Home forums Using CanvasJS No data in the chart

This topic contains 3 replies, has 3 voices, and was last updated by  Vishwas R 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #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 3 months, 1 week ago by  jerry_k7.

    Priyanka M S


    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.


    Vishwas R


    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.