Effect:
The JS code is as follows:
1$ (document). Ready (function() {2 highcharts.setoptions ({3 Global: {4USEUTC:false5 },6Colors: "#08c, #ff5a00". Split (","),7Symbols: ["Circle", "triangle"]8 });9 Ten varOptions = { One Chart: { ARenderto: ' Container ', -Type: ' Spline ', -Marginright:10, the events: { -Loadfunction() { - //set up the updating of the chart each second - //var series = this.series[0]; +$.each ( This. series,function(IDX, series) { -SetInterval (function() { + varx = (NewDate ()). GetTime (),// Current Time Ay =math.random (); atSeries.addpoint ([x, Y],true,true); -}, 1000); - }); - } - } - }, in title: { -Text: ' Live broadband ' to }, + subtitle: { -Text: "" the }, * credits: { $EnabledfalsePanax Notoginseng }, - Xaxis: { theType: ' DateTime ', +Tickpixelinterval:80 A }, the YAxis: { + title: { -Text: ' Kbps ' $ }, $Startontick:true,//set min to be valid when True -min:0, - plotlines: [{ thevalue:0, -Width:1,WuyiColor: ' #808080 ' the }] - }, Wu tooltip: { -Formatterfunction() { About 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 ' + ' </span> '; - - } A }, + legend: { theEnabledtrue - }, $ Exporting: { theEnabledfalse the }, the series: [{ theName: ' Live download rate ', -Data: (function() { in //generate an array of random data the vardata = [], theTime = (NewDate ()). GetTime (), About i; the the for(i = -19; I <= 0; i++) { the Data.push ({ +X:time + i * 1000, - y:math.random () the });Bayi } the returndata; the })() - }, { -Name: ' Real-time uplink rate ', theData: (function() { the //generate an array of random data the vardata = [], theTime = (NewDate ()). GetTime (), - i; the the for(i = -19; I <= 0; i++) { the Data.push ({94X:time + i * 1000, the y:math.random () the }); the }98 returndata; About })() - }]101 };102Chart =NewHighcharts.chart (options);103});
HTML code:
1 < ID= "container" style= "min-width:400px; height:400px; margin:0 Auto" ></ Div >