FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › No data in the chart

No data in the chart

Viewing 4 posts - 1 through 4 (of 4 total)
  • October 14, 2018 at 11:27 pm #23047

    jerry_k7

    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 5 years, 6 months ago by jerry_k7.
    October 15, 2018 at 10:38 am #23053

    Priyanka M S

    @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

    October 15, 2018 at 9:57 pm #23069

    jerry_k7

    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.

    October 16, 2018 at 10:16 am #23072

    Vishwas R

    @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.