jquery combined with Highcharts plug-ins to display real-time data dynamic graphs

The effect is as shown in the figure:

The JS code is as follows:

  1 $ (document). Ready (function () {2 highcharts.setoptions ({3 global: {4 useutc:f
  Alse 5}, 6 colors: "#08c, #ff5a00". Split (","), 7 symbols: ["Circle", "triangle"]
  8}); 9 var options = {One chart: {renderto: ' container ', t  ype: ' Spline ', Marginright:10, events: {load:function ()  {//Set up the updating of the chart each second//var series =
 This.series[0]; $.each (this.series, function (IDX, series) {SetInterval (functio                                     N () {var x = (new Date ()). GetTime (),//Current time 22
 y = Math.random ();
 Series.addpoint ([x, Y], true, true);        24                     }, 1000);
 25}); }, Title: {text: ' Real-time broadband  ' To}, subtitle: {text: "" Credits: {Enabled:false Notoginseng}, Xaxis: {4 type: ' DateTime ',                     0 tickpixelinterval:80, YAxis: {The title: {44                 Text: ' Kbps ', startontick:true,//Is True, set min to valid 47                     min:0, plotlines: [{value:0, Width:1, 51                 Color: ' #808080 '}], tooltip: {55 Formatter:function () {return ' <b> ' + this.series. Name + ' </b><br/> ' + highcharts.dateformat ('%y-%m-%d%h:%m:%s ', this.x) + ' <br /> ' + ' <span style= ' color: #08c ' > ' + Highcharts.numberformat (THIS.Y, 2) + ' Kbps ' + ' &
 Lt;/span> ';             The legend: {enabled:true 64                 }, exporting: {Enabled:false), series: [{69  Name: ' Live download rate ', Data: (function () {//Generate an array of random                         Data, var data = [], time = (new Date ()). GetTime (), 74
 I                             for (i = -19; I <= 0; i++) {Data.push ({78
 X:time + i * 1000, y:math.random () 80}); 81                     The return data;
 }) () () (), {name: ' Real-time uplink rate ', Data: (function () {                         Random//Generate an array of the var data = [], 89
 Time = (new Date ()). GetTime (), I;                             A for (i = -19; I <= 0; i++) {Data.push ({94
 X:time + i * 1000, Y:math.random () 96});
 The return data;
99}) () 100}] 101};
102 chart = new Highcharts.chart (options); 103});

HTML code:

1 <div id= "container" style= "min-width:400px"; height:400px; margin:0 Auto "></div>

Http://www.cnblogs.com/nancy0324/p/3757016.html