javascript - DB and D3 connection via php. Unable to complete D3noob's tutorial -
at first want thank community lot i've learnt here. feel can't find answer.
i'm having problems following guide http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html . followed step step (with updated wampserver version), , got this. i've been struggling , have not found mistake. appreciated.
this first question, please feel free edit, improve, correct, ask. thank :)
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` `data2` "; $query = mysql_query($myquery); if ( ! $query ) { echo mysql_error(); die; } $data = array(); ($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 + ")"); // data d3.json("data2.php", function(error, data) { data.foreach(function(d) { d.date = parsedate(d.date); d.close = +d.close; }); // scale range of 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 valueline path. .attr("class", "line") .attr("d", valueline(data)); svg.append("g") // add x axis .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") // add y axis .attr("class", "y axis") .call(yaxis); }); </script> </body> the firefox inspector thew following js error:
ns_error_dom_bad_uri: access restricted uri denied i solved putting both simple-graph.html , data2.php in same folder. , in script edited shows
d3.json("data2.php", function(error, data) instead of showed
d3.json("php/data2.php", function(error, data) the last error got has knocked me out:
typeerror: data undefined it points out line 37 of script:
data.foreach(function(d) { d.date = parsedate(d.date); d.close = +d.close; }); i stuck there. is/are mistakes?
thanks in advance
the error presented firefox (access restricted uri denied) symptomatic of trying load cross domain content. means (in case present here) browser believed trying access file data2.php while file registering being 'out of bounds'. ths security feature modern browsers reasonably expects files coming same domain (as current file loading) trusted , outside domain potentially harmful (http://en.wikipedia.org/wiki/same-origin_policy) .
this nicely confirmed test ran same file in chrome , received error 'cross origin requests supported http' in developer console.
the cause of problem local web server have support development environment mis-configured in way or isn't running.
edit: pleaseteachmehowtodoit has provided great feedback in comments below assist in explaining why problem occurring. while .html file being displayed being served local web server correctly, php file extracting data mysql database wasn't. hence disparity of errors different browsers.
Comments
Post a Comment