CanvasJS real time line chart

Question

I am currently busy with setting up a business intelligence environment for Elderly Patients. The elderly are wearing a bracelet that measures acceleration and their heart rate.

The heart rate part is going to be a static chart (not a real time one), I have finished that one. The whole environment is pretty much done actually. Except for the real-time acceleration line chart.

So I would like to use the real time life chart of CanvasJS as what they offer seems about right. The problem is I am pretty knew with javascript.

This is the code for the real life line chart:

<!DOCTYPE HTML>
<html>

<head>
    <script type="text/javascript">
    window.onload = function () {

        var dps = []; // dataPoints

        var chart = new CanvasJS.Chart("chartContainer",{
            title :{
                text: "Live Random Data"
            },          
            data: [{
                type: "line",
                dataPoints: dps 
            }]
        });

        var xVal = 0;
        var yVal = 100; 
        var updateInterval = 20;
        var dataLength = 500; // number of dataPoints visible at any point

        var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

            for (var j = 0; j < count; j++) {   
                yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                dps.push({
                    x: xVal,
                    y: yVal
                });
                xVal++;
            };
            if (dps.length > dataLength)
            {
                dps.shift();                
            }

            chart.render();     

        };

        // generates first set of dataPoints
        updateChart(dataLength); 

        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 

    }
    </script>
    <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width:100%;">
    </div>
</body>
</html>

As you can see, it is a real chart but it behaves off of random (static) data. I have my database full of data that is generated by the accelerometer.

My question is: How do I make this chart use my data from my database instead of random data? I was thinking around the lines of making an array that is filled with my database data and then use the variable of that array as the source of the data used for the chart.. But I don't know.

I hope I have given you enough info.

Answer 1

You can find the answer here .

Just so that the answer remains here, in case the link is broken.

Here is how you can display MySQL data in CanvasJS,

Create a PHP service that returns data in JSON format.
HTML page that does AJAX request to the server and fetches the data. After getting the data, it renders a Chart.

EXAMPLE:

1. PHP Service to return JSON Data

    <?php
    header('Content-Type: application/json');
    $con = mysqli_connect("127.0.0.1","user","password","canvasjssampledb");

    // 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 * FROM sales");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['product'] , "y" => $row['total_sales']);

        array_push($data_points, $point);        
    }

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

    ?>

2. HTML Page to Fetch Data and render Chart

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="jquery.js"></script>
    <script src="canvasjs.js"></script>

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

            $.getJSON("data.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>

CanvasJS real time line chart

Question

1 answers

solution1
2 ACCPTED 2015-05-19 18:35:26

CanvasJS real time line chart

Question

1 answers

solution1 2 ACCPTED 2015-05-19 18:35:26

solution1
2 ACCPTED 2015-05-19 18:35:26