用Highcharts绘制实时数据图 [英] Draw real time data graph with Highcharts

问题描述

我的json数据数组如下:

My json data array is as below:

[{"item":"Mango","price":30.0,"date":"Feb 18, 2016 6:54:49 PM"},{"item":"karela","price":45.0,"date":"Feb 20, 2016 3:39:08 PM"},{"item":"karela","price":455.0,"date":"Feb 24, 2016 3:59:28 PM"},{"item":"karela","price":65.0,"date":"Feb 29, 2016 10:46:16 AM"},{"item":"karela","price":45.0,"date":"Feb 29, 2016 10:47:05 AM"},{"item":"iphone","price":300.0,"date":"Mar 2, 2016 3:32:14 PM"}]

我想在Highcharts中将价格"设置为Y轴数据，将日期"设置为X轴数据. 上面的数组是从MySQL数据库生成的.

I want to set the "price" as Y-Axis data and "date" as X-Axis data in Highcharts. This above array generated from a MySQL database.

上面的数组更新何时会有新数据，何时有新数据，那么我想每次都用新数据更新图形. 为此，我正在使用Ajax.

The above array updates when new data will come and when new data will come then I want to update my graph with new data every time. For that I am using Ajax.

还有一件事，如果我的时间间隔是1秒，那么图形也会显示得很好.

And one more thing if my time interval is 1 second, then graph also display with nice look.

推荐答案

在后端创建一个websocket程序，并使用HTML 5功能websocket使用以下代码连接至该套接字. ，因为许可证问题.高价图表不是免费的许可证

Create a websocket program at backend and connect to that socket using the HTML 5 feature websocket use following code .Its a powerful dynamic code i wrote after that i dropped it ,because of license issue.High chart is not a free licence one

$('#Chart').highcharts('StockChart',  {
        colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
                 "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
        chart: {
            //type: 'areaspline',
                     events: {
                    load: function () {

                        // set up the updating of the chart each second

                        var series1 = this.series[0];


                        var webSocket = 
                            new WebSocket('ws://'+Config.ip+':'+Config.port+'/websocket');

                        webSocket.onerror = function(event) {
                            alert(event.data);
                        };

                        webSocket.onopen = function(event) {
                            webSocket.send($scope.IDSelected);
                            return false;
                        };

                        webSocket.onmessage = function(event) {
                            var point = JSON.parse(event.data);
                            var dataPoint1 ={
                                    x:(new Date()).getTime(),
                                    y: Math.round(point.point1),
                                    color:'#00ff00',
                                    segmentColor :'#00ff00',
                                     real_valueMap : Math.round(point.point1)
                                }

                            series1.addPoint(dataPoint1);

                        };

                    }


                     } },
        title: {
            text: "Title"
        } 
        xAxis: {
           type:"datetime",
            plotBands: [{ // visualize the weekend
                from: 4.5,
                to: 6.5,
                color: 'rgba(68, 170, 213, .2)'
            }]
        },
        yAxis: {
            title: {
                text: 'Percentage'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' units'
        }, 
        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            },
            spline: {
                turboThreshold: 2000}
        },
        series: [{
            marker: {
                states: {
                  hover: {
                    fillColor: {}
                  }
                }
              },
            type: 'coloredline',
            name: 'GraphName1',
            data: (function () {
                // generate an array of random data
                var data = [];
                return data;
            }())

        } ]
    });

这篇关于用Highcharts绘制实时数据图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！