DB and D3 connection via php. Unable to complete D3noob's tutorial

Question

At first I want to thank the community a lot for everything I've learnt here. Now I feel like I can't find the answer.

I'm having problems following this guide http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html . I followed step by step (with updated WAMPSERVER version), and got this. I've been struggling and have not found my mistake. Any help would be appreciated.

This is my first question, please feel free to edit, improve, correct, ask. Thank you :)

data2.php file:

<?php
    $username = "homedbuser"; 
    $password = "homedbuser";   
    $host = "localhost";
    $database="homedb";

    $server = mysql_connect($host, $username, $password);
    $connection = mysql_select_db($database, $server);

    $myquery = "
SELECT  `date`, `close` FROM  `data2`
";
    $query = mysql_query($myquery);

    if ( ! $query ) {
        echo mysql_error();
        die;
    }

    $data = array();

    for ($x = 0; $x < mysql_num_rows($query); $x++) {
        $data[] = mysql_fetch_assoc($query);
    }

    echo json_encode($data);     

    mysql_close($server);
?>

simple-graph.html file:

<!DOCTYPE html>

<style>

</style>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.json("data2.php", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });
    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    svg.append("path")      // Add the valueline path.
        .attr("class", "line")
        .attr("d", valueline(data));

    svg.append("g")         // Add the X Axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")         // Add the Y Axis
        .attr("class", "y axis")
        .call(yAxis);

});
    </script>

</body>

The Firefox inspector thew the following JS error:

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

I solved it by putting both simple-graph.html and data2.php in the same folder. And in the script that is edited now shows

d3.json("data2.php", function(error, data)

Instead of what originally showed

 d3.json("php/data2.php", function(error, data)

The last error I got has knocked me out:

TypeError: data is undefined

It points out line 37 of my script:

 data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

I am stuck there. Where is/are the mistakes?

Thanks in advance

Did you check whether the call to the database returns the data you expect it to return? — Lars Kotthoff
– Lars Kotthoff, Commented Mar 10, 2014 at 16:51
The query is ok, in DB shows what I want back. If you mean to check if the php is working as expected, I don't know how to do it. — PleaseTeachMeHowToDoIt
– PleaseTeachMeHowToDoIt, Commented Mar 10, 2014 at 16:54
TypeError: data is undefined in Firefox developer tools only points out the mentioned line. Is that what you're asking? It seems like data does not exist as an object. — PleaseTeachMeHowToDoIt
– PleaseTeachMeHowToDoIt, Commented Mar 10, 2014 at 17:01
What does the variable error contain? The first argument of the d3.json callback. — Lars Kotthoff
– Lars Kotthoff, Commented Mar 10, 2014 at 17:02

d3noob · Accepted Answer · 2014-03-20 15:22:58Z

1

The error presented Firefox (Access to restricted URI denied) is symptomatic of trying to load cross domain content. This means that (in the case you present here) the browser believed that it was trying to access the file data2.php while that file was registering as being 'out of bounds'. Ths is a security feature for modern browsers as it reasonably expects files that are coming from the same domain (as the current file it is loading) to be trusted and those outside the domain to be potentially harmful (http://en.wikipedia.org/wiki/Same-origin_policy) .

This was nicely confirmed by the test where you ran the same file in Chrome and received the error 'Cross origin requests are only supported for HTTP' in the developer console.

The most likely cause of the problem is that the local web server that you have to support your development environment is mis-configured in some way or that it isn't running.

Edit: PleaseTeachMeHowToDoIt has provided some great feedback in the comments below that assist in explaining why the problem was occurring. While the .html file being displayed was being served by the local web server correctly, the php file that was extracting the data from the MySQL database wasn't. Hence the disparity of errors from the different browsers.

edited Mar 20, 2014 at 15:22

answered Mar 18, 2014 at 8:15

d3noob

2,1513 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

PleaseTeachMeHowToDoIt Over a year ago

Note: The same html file does not work in Firefox? Why? It shows the initial error TypeError: data is undefined data.forEach(function(d) {, but with Chrome it works fine!

PleaseTeachMeHowToDoIt Over a year ago

Worked on Chrome! Steps: 1.-Execute and saver correctly the needed files in the Apache webserver 2.-Disable web security following chromium.org/for-testers/command-line-flags (Not sure this is necessary, but before it showed another error) so it shows similar to "...Chrome\Application\chrome.exe" --disable-web-security (Note the space between " and --). Sorry I can't vote up, I will when I get 15 rep. Thank you very much d3noob. –

d3noob Over a year ago

Hmm... You're certainly welcome for the assistance, but your explanation about your resolution of the problem makes me wonder if the problem is sorted. By disabling the security in the Chrome browser, you have (probably) told it to ignore cross domain violations. This may be masking a further problem with your server setup that Firefox is still seeing. What type of server setup are you running?

PleaseTeachMeHowToDoIt Over a year ago

WAMP as you said in your tutorial. Files are saved in the www directory, in a subfolder. I have a local(c:\[...].html) file that calls the .php (data2) and d3.v3 files that are inside the localhost server.

PleaseTeachMeHowToDoIt Over a year ago

You made me think about it. Please correct me if I'm wrong: I did not understand well the concept "Run from the server". I ran from "C:\\" and at the same time requested links to webpages. That means a Cross origin request that I solved by running the .html file from the server, 127.0.0.1/subfolder/file.html. It is not necessary to disable Chrome's security.

|

Collectives™ on Stack Overflow

DB and D3 connection via php. Unable to complete D3noob's tutorial

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related