Highcharts adding point data dynamically

Highcharts used as a chart data display is very convenient, the effect is better. Highcharts not only can realize the display of dead data, but also can realize the real-time display of dynamic data, similar to the real-time refresh effect of financial stock, the realization process is not difficult, roughly as follows.

After referencing Highcharts 3.0, you can add a method Highcharts () to the DIV container that loads the Highcharts chart, which can load the chart into the appropriate container. The code for the JS section is as follows:

The main methods include

function Loadmoredatafornoisechart (seriesobj) {    var series = seriesobj[0];    var series1 = seriesobj[1];    Chartstime = setinterval (function () {        count;        var x = (Newdate ()). GetTime () (8 * 60 * 60 * 1000); Current time         var y;        First line         y = Math.floor (Math.random () * x);        var Newpoint;        Newpoint = {            x:x,//Current time             y:y,            marker: {                symbol: ' url (.. /.. /.. /content/images/warnning.png) '            }        ;        Series.addpoint (Newpoint, False, true);  Only the second parameter of the first line is set to False         //second line         var y1;        Y1 = Math.floor (Math.random () *);        var newPoint1;        NewPoint1 = {            x:x,//Current time             y:y1        };        Series1.addpoint (NewPoint1, True, true);    }, 1500); 1.5 Seconds to add}

　

The specific implementation of Getdatafornoisemonitor () is as follows:

Get data for the first few minutes to make the effect look better function getdatafornoisemonitor () {    var dataarr = [];    var plotname = [' One Metre of sunshine ', ' miles away riding alone '];    for (var i = 0; i < myplotname.length; i++) {        var tempobj = {            Name:myplotname[i],            data: []        };        var time = (Newdate ()). GetTime (8 * * +), J;   Adjust         the time for (j = -10; J <= 0; j + +) {            TempObj.data.push ({                x:time + j *),      //3 minutes before                 Y:MATH.F Loor (Math.random () *)            });        Dataarr.push (tempobj);    }    Returndataarr;}

　　

Finally, the two methods have a common place, that is, the polyline is the same number of bars, the above example is two.

The effect is as follows:

　

Highcharts adding point data dynamically