Home forums Using CanvasJS Creating Dynamic Graphs on a PHP page based off MySQL data

Tagged: , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Indranil Deo 5 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #19847

    lindsay10c
    Member

    Hi,
    I looked at “How can I use PHP MySQL Dynamic data” Forum and attempted to get my graph to work but am having trouble even displaying a dynamic graph with data. Eventually I want to be able to sum my count value and have the dynamic graph tick every second with the new query sum(count) value. Before I get there, I was hoping to just get a dynamic graph to work with my MySQL table. Here is my PHP code:
    <?php

    header(‘Content-Type: application/json’);

    $con = mysqli_connect(“18.85.28.15″,”lindsay”,”McGelin123!”,”python”);

    // 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 count, timestamp FROM skelCount”);

    while($row = mysqli_fetch_array($result))
    {
    $point = array(“label” => $row[‘timestamp’] , “y” => $row[‘count’]);

    array_push($data_points, $point);
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);
    }
    mysqli_close($con);

    ?>

    And here is my HTML code:
    <!DOCTYPE html>
    <head>
    <!– javascript –>
    <script type=”text/javascript” src=”js/jquery.canvasjs.min.js”></script>
    <script type=”text/javascript” src=”js/canvasjs.min.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {

    $.getJSON(“canvas-json-return.php”, function (result) {

    var chart = new CanvasJS.Chart(“chartContainer”, {
    data: [
    {
    dataPoints: result
    }
    ]
    });

    chart.render();
    });
    });
    </script>
    </head>
    <body>

    <div id=”chartContainer” style=”width: 800px; height: 380px;”></div>

    </body>

    </html>

    #19849

    Indranil Deo
    Member

    @lindsay10c,

    Please download the PHP sample from the download page which includes example for creating chart from database. In case it doesn’t help your out can you please create a sample project with a sample database and share it over Google-Drive or Onedrive so that we can understand your code better and help you out?

    ___________
    Indranil Deo,
    Team CanvasJS

    #19867

    lindsay10c
    Member
    #19872

    Indranil Deo
    Member

    @lindsay10c,

    I think you forgot to share the link to the sample project. The link shared is for the ReadMe file. Can you kindly share the link to the sample project, so that we can look into it and help you out!

    ___________
    Indranil Deo,
    Team CanvasJS

    #19879

    lindsay10c
    Member
    #19892

    Indranil Deo
    Member

    @lindsay10c,

    The query seems to have some issue. Comparing timestamp properly should work fine in your case, i.e. SELECT timestamp, count FROM skelCount WHERE timestamp >= TIMESTAMP(DATE_SUB(NOW(), INTERVAL 1 day)) should work fine in this scenario. Please take a look at this link for more info. Please take a look at the updated project. Below is the screenshot of the chart when its run in local-server.
    php charts with data from mysql db

    ___________
    Indranil Deo
    Team CanvasJS

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

You must be logged in to reply to this topic.