Home forums Chart Support using json array from php json_encode

Tagged: , , ,

  • This topic has 8 replies, 2 voices, and was last updated 1 year ago by mrt4c.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #28156

    Hi! Im new to canvasJS and my web programming isn’t very strong. I have a php file that retrieves data from a mysql database and encodes it into a json array. i would like to visualise this data into a graph using canvasjs but im not sure how to proceed. i would like the graph to update itself every 5 mins. i managed to achieve this using jQuery and a html table but im not sure how to do it using canvasJS.
    Any help is greatly appreciated!
    below is a snippet of my php code.

    $sql = 'SELECT *  FROM sensor ORDER BY ID';
            if($query = mysqli_query($conn,$sql)){
                $json_array = array();
                while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
                    $json_array[] = $row;
                echo json_encode($json_array);


    Can you kindly create a sample project reproducing the issue along with the sample database and share it over Google-Drive or Onedrive so that we can look into the code, run it locally to understand the scenario better and help you resolve?

    From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

    Having a sample project helps us in figuring out the issue and suggesting an appropriate solution accordingly.

    Shashi Ranjan
    Team CanvasJS


    I just do not know how to start using CanvasJS. I have a json array but i do not know how to integrate it with canvasJS. A point in the right direction would be extremely helpful. I have looked at the examples on canvasJS but i still do not know how to proceed.



    Please take a look at this gallery page for an example on creating a chart using JSON data in PHP.

    Shashi Ranjan
    Team CanvasJS


    Using https://canvasjs.com/php-charts/dynamic-live-multi-series-chart/ as reference, this is what i came up with:
    This is my JSON array:
    [{“ID”:6,”Date”:”2020-01-24 07:35:46″,”sensorName”:”sensor 1″,”sensorValue”:213},{“ID”:7,”Date”:”2020-01-24 07:35:46″,”sensorName”:”sensor 1″,”sensorValue”:433},{“ID”:8,”Date”:”2020-01-24 07:35:46″,”sensorName”:”sensor 2″,”sensorValue”:45},{“ID”:9,”Date”:”2020-01-24 07:35:46″,”sensorName”:”sensor 3″,”sensorValue”:54}]

    Im not sure how to retrieve data (Date, sensorName, sensorValue) from the JSON array.
    For the graph, the x-axis will be the Date value from the JSON array. the y-axis will have values from the sensorValue. the graph should only show the latest 50 data points from the JSON array. the graph updates every 2 secs.


    i cant seem to be able to upload my php codes. i keep getting blocked.


    I have placed all relevant files in this folder: folder

    My objectives:
    – plot only the latest 50 data points
    – x axis will be Date value
    – y axis will be sensor value
    – update the graph every 5 seconds and only showing 50 data points



    Please take a look at this updated sample project.

    Shashi Ranjan
    Team CanvasJS


    @Shashi, thanks for your help! I will look through your sample code when my workload lightens. Thanks once again

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

You must be logged in to reply to this topic.