Home forums Using CanvasJS No data in the chart

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

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

    jerry_k7
    Member

    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.

    weather

    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 :)

    • This topic was modified 1 month ago by  jerry_k7.
    #23053

    Priyanka M S
    Member

    @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

    #23069

    jerry_k7
    Member

    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.

    Here is the link to my Google Drive with the required files. Link
    Thank you for your help.

    #23072

    Vishwas R
    Keymaster

    @jerry_k7,

    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.