CanvasJS实时折线图

时间:2015-05-19 18:19:43

标签: javascript charts

我目前正忙于为老年患者建立商业智能环境。老年人戴着手镯,测量加速度和心率。

心率部分将是静态图表(不是实时图表),我已经完成了那个。实际上整个环境都已完成。除了实时加速折线图。

所以我想使用CanvasJS的实时生活图表,因为他们提供的似乎是正确的。问题是我很熟悉javascript。

这是真实生活线图的代码:

<!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>

正如您所看到的,它是一个真实的图表,但它的行为是随机(静态)数据。我的数据库中充满了加速度计生成的数据。

我的问题是:如何使此图表使用我的数据库中的数据而不是随机数据?我正在考虑制作一个充满我的数据库数据的数组,然后使用该数组的变量作为图表所用数据的来源。但我不知道。

我希望我已经给你足够的信息。

1 个答案:

答案 0 :(得分:2)

您可以找到答案here

如果链接断开,答案仍然存在。

以下是在CanvasJS中显示MySQL数据的方法,

  1. 创建一个以JSON格式返回数据的PHP服务。
  2. 向服务器发送AJAX请求并获取数据的HTML页面。获取数据后,它会呈现图表。
  3. 示例:

    <强> 1。用于返回JSON数据的PHP服务

        <?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页面

    <!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>