2

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

PleaseTeachMeHowToDoIt
  • 67
  • 8
  • Did you check whether the call to the database returns the data you expect it to return? – Lars Kotthoff Mar 10 '14 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 Mar 10 '14 at 16:54
  • Does `error` contain anything? – Lars Kotthoff Mar 10 '14 at 16:56
  • 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 Mar 10 '14 at 17:01
  • What does the variable `error` contain? The first argument of the `d3.json` callback. – Lars Kotthoff Mar 10 '14 at 17:02
  • ReferenceError: error is not defined – PleaseTeachMeHowToDoIt Mar 10 '14 at 17:06
  • You need to run the code to print it inside the callback function. – Lars Kotthoff Mar 10 '14 at 17:09
  • :( I've been unable to do that. Thanks for your patience – PleaseTeachMeHowToDoIt Mar 10 '14 at 17:46
  • Add this code: `console.log(error)` and have a look at your browser's Javascript/debug console. – Lars Kotthoff Mar 10 '14 at 18:03
  • If I put that code inside the d3.json function, before or after I can't get anything more from it in the console – PleaseTeachMeHowToDoIt Mar 11 '14 at 12:43
  • If you have google chrome available are you able to use the developer console? If so can you enter `console.log(data);` after the line that loads the d3.json (d3.json("data2.php", function(error, data)? That would allow you to see if the 'data' is being loaded by your script. I get the feeling from the error that it isn't. Otherwise it looks good. – d3noob Mar 17 '14 at 06:18
  • Thank you for helping @d3noob. The Chrome showed a different error. `XMLHttpRequest cannot load file:///C:/localpath/data2.php. Cross origin requests are only supported for HTTP.` I visited similar errors in SO: [link](http://stackoverflow.com/questions/8449716/cross-origin-requests-are-only-supported-for-http-but-its-not-cross-domain) But could not solve it with the http solution. – PleaseTeachMeHowToDoIt Mar 17 '14 at 17:05
  • Ahh! A cross origin request problem. That's good progress. It would indicate that there is something wrong with the way your web server is running. I will make the assumption that you don't have a web server running? This would explain why Firefox would work for some graphics (it allows some cross origin requests) but Chrome does not. I would look towards your web server. There is a brief intro here https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-web-servers see if this might be a good direction to go down – d3noob Mar 17 '14 at 17:37
  • Thanks for the orienteering tip. I get to work it. – PleaseTeachMeHowToDoIt Mar 17 '14 at 17:57
  • Well Done. Was the resolution to install the server? If So I can write up an answer to the problem so that people who come across similar problems in the future can resolve the it. – d3noob Mar 18 '14 at 04:07
  • Nono, I am still working on the problem, trying to solve it. I had already installed WAMP, now it looks well configured. I can get into the php via `http://127.0.0.1/php%20files/data2.php` that returns the data in the desired format as output. But Chrome now shows another security error. `XMLHttpRequest cannot load http://127.0.0.1/php%20files/data2.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.` – PleaseTeachMeHowToDoIt Mar 18 '14 at 13:47
  • Then I went to [http://superuser.com/questions/593726/is-it-possible-to-run-chrome-with-and-without-web-security-at-the-same-time](is-it-possible-to-run-chrome-with-and-without-web-security-at-the-same-time) and learning how to do that security changes. – PleaseTeachMeHowToDoIt Mar 18 '14 at 13:50

1 Answers1

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.

d3noob
  • 2,133
  • 3
  • 29
  • 36
  • 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 Mar 18 '14 at 15:38
  • 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. – – PleaseTeachMeHowToDoIt Mar 18 '14 at 16:07
  • 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? – d3noob Mar 18 '14 at 17:36
  • 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 Mar 20 '14 at 08:20
  • 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. – PleaseTeachMeHowToDoIt Mar 20 '14 at 09:24
  • Good work. You've found the key to the puzzle! Good luck with future D3 :-) – d3noob Mar 20 '14 at 15:23