I am trying to plot mysql data with d3. I am using php to convert to json format. For testing purposes I followed the steps here and used my own php file on XAMPP. But when I open the the html file in my browser, it always displays a white page.
<?php $mysqli = mysqli_connect("$host, $username, $password, $dbname"); $mysqli ->set_charset('utf8mb4'); $myArray = array(); if($result = $mysqli ->query("SELECT `date`, `volume` FROM `sensordata`")) { while ($row = $result->fetch_array(MYSQLI_ASSOC)) { $myArray[] = $row; } header("Content-Type: application/json"); echo json_encode($myArray); } $result->close(); $mysqli ->close(); ?> It echoes in json format like so:
[{"date": "02-04-2021","volume": "606.51"},{"date": "03-04-2021","volume": "700.51"}]
I use the following code from the Site:
<!DOCTYPE html> <meta charset="utf-8"> <html lang = "en"> <style> /* set the CSS */ .line { fill: none; stroke: steelblue; stroke-width: 2px; } </style> <body> <script src="d3/d3.js"></script> <script> // set the dimensions and margins of the graph var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // parse the date / time var parseTime = d3.timeParse("%d-%m-%Y"); // set the ranges var x = d3.scaleTime().range([0, width]); var y = d3.scaleLinear().range([height, 0]); // define the line var valueline = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.volume); }); // append the svg obgect to the body of the page // appends a 'group' element to 'svg' // moves the 'group' element to the top left margin 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("get_data.json", function(error, data) { if (error) throw error; // format the data data.forEach(function(d) { d.date = parseTime(d.date); d.volume = +d.volume; }); // 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.volume; })]); // Add the valueline path. svg.append("path") .data([data]) .attr("class", "line") .attr("d", valueline); // Add the X Axis svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x) .tickFormat(d3.timeFormat("%d-%m-%Y"))); // Add the Y Axis svg.append("g") .call(d3.axisLeft(y)); }); </script> </body> If I use variables like these:
var data = [ {date:"30-05-12",volume:"123"}, {date:"27-05-12",volume:"67.00"}, {date:"26-06-12",volume:"89.70"}, {date:"25-07-12",volume:"99.00"} ]; instead of this part:
// Get the data d3.json("get_data.json", function(error, data) { if (error) throw error; // format the data data.forEach(function(d) { d.date = parseTime(d.date); d.volume = +d.volume; }); everything is fine and the data gets plotted.
All files are in the same folder.
Could someone please help me?
https://stackoverflow.com/questions/66934759/get-data-from-mysql-with-json-and-plot-with-d3 April 04, 2021 at 02:50AM
没有评论:
发表评论