使用Highcharts绘制实时数据图

My json data array is as below:

我的json数据数组如下:

[{"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"}]

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.

我想将“价格”设置为Y轴数据,将“日期”设置为Highcharts中的X轴数据。上面的数组是从MySQL数据库生成的。

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.

上面的数组会在新数据到来时更新,当新数据到来时,我想每次都用新数据更新我的图表。为此我使用Ajax。

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

还有一件事,如果我的时间间隔是1秒,那么图表也会显示出漂亮的外观。

1 个解决方案

#1

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

在后端创建一个websocket程序,并使用HTML 5功能websocket连接到该套接字使用以下代码。由于许可证问题,我写了一个强大的动态代码后我写了。高图表不是免费许可证

$('#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;
            }())

        } ]
    });