You must be logged in to post your query.
Home › Forums › Chart Support › No data in the chart
Tagged: Empty chart, My SQL, No data, php
Hello,
I am new to CanvasJS. I hope someone can help me out.
I have a MySQL database on my computer with weather data from my Arduino weather station I followed the example from this site ( link). It was suggested to make a php file to get the data from the database which I think works fine. I get a bunch of JSON code if I call the php.file. And a html file to display the chart. When I call the html file the char loads in the browser but there is no data in the chart.
Here is my code:
PHP
<?php mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); header('Content-Type: application/json'); $dbusername = "test1"; $server = "localhost"; $con = mysqli_connect($server ,$dbusername, "", "bmetest" ); // Check connection if (mysqli_connect_errno($con)) { echo "Failed to connect to DataBase: " . mysqli_connect_error(); }else { $data_points = array(); $result = mysqli_query($con, "SELECT time, temperature FROM sensor"); while($row = mysqli_fetch_array($result)) { $point = array("time" => $row['time'] , "temperature" => $row['temperature']); array_push($data_points, $point); } echo json_encode($data_points, JSON_NUMERIC_CHECK); } mysqli_close($con); ?>
HTML
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script src="jquery.min.js"></script> <script src="canvasjs.min.js"></script> <meta charset="utf-8"/> <script type="text/javascript"> $(document).ready(function () { $.getJSON("http://localhost:80/test/data.php", function (result) { var chart = new CanvasJS.Chart("chartContainer", { title:{ text:"Weather station" }, data: [ { type: "line", dataPoints: result } ] }); chart.render(); }); }); </script> </head> <body> <div id="chartContainer" style="width: 800px; height: 380px;"></div> </body> </html>
Thank you for your help :)
@jerry_k7,
CanvasJS accepts only numeric or dateTime in x-values and numeric in y-values. Assigning numeric values to time and temperature values of point array $point = array("time" => $row['time'] , "temperature" => $row['temperature']); , should work fine in your case.
$point = array("time" => $row['time'] , "temperature" => $row['temperature']);
If this doesn’t solve your issue, kindly create a sample project reproducing the issue you are facing and share it over Google-Drive or Onedrive along with the sample database, so that we can look into your code, understand it better and help you out.
__ Priyanka M S Team CanvasJS
Hey,
thank you for your help. I still cannot make it work. I created a new simple dummy database just few rows to test everything. And the graph is still empty This time I took the id from the database and the temperature. So the json output was: [{"id":1,"temp":23},{"id":2,"temp":28},{"id":3,"temp":20},{"id":4,"temp":44},{"id":5,"temp":10}] The values were only numeric. But the chart is still empty.
[{"id":1,"temp":23},{"id":2,"temp":28},{"id":3,"temp":20},{"id":4,"temp":44},{"id":5,"temp":10}]
Here is the link to my Google Drive with the required files. Link Thank you for your help.
dataPoints can accept [{"x": 1, "y": 23},...] or labels and few other properties like indexLabel, color, etc and not as id and temp. Changing $point = array("id" => $row['id'] , "temp" => $row['temp']); to $point = array("x" => $row['id'] , "y" => $row['temp']); in data.php should work fine in your case. Please download the updated sample code here.
[{"x": 1, "y": 23},...]
$point = array("id" => $row['id'] , "temp" => $row['temp']);
$point = array("x" => $row['id'] , "y" => $row['temp']);
— Vishwas R Team CanvasJS
You must be logged in to reply to this topic. Login/Register