Home Forums Chart Support No data in the chart

No data in the chart

Viewing 4 posts - 1 through 4 (of 4 total)
  • #23047


    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:


    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();
        $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);


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" >
        <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", {
    						text:"Weather station"
                        data: [
                                type: "line",
    							dataPoints: result
        <div id="chartContainer" style="width: 800px; height: 380px;"></div>

    Thank you for your help :)

    • This topic was modified 5 years, 4 months ago by 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.

    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



    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.

    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.

    Vishwas R
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.