Highchart real-time curve example: highchart real-time curve, Java Web

Recently, the data transmitted from sensors is displayed on the front-end of the web in the form of real-time curves. After finding and finding the data on the Internet, the basic functions are finally implemented. I will share with you some ideas, it is very helpful for beginners ~~

Web Front-end:

VaR data;
Highcharts. setoptions ({
Global :{
Useutc: false
}
});

VaR chart;
$ (Function (){
Chart = new highcharts. Chart ({
Chart :{
Renderto: 'Container ',
Defaultseriestype: 'spline ',
Marginright: 10,
Events :{
Load: getform

}
},
Title :{
Text: 'real-time parameter curve'
},
Xaxis :{
Type: 'datetime ',
Tickpixelinterval: 150
},
Yaxis :{
Title :{
Text: 'value'
},
Plotlines :[{
Value: 0,
Width: 1,
Color: '#000000'
}]
},
Tooltip :{
Formatter: function (){
Return '<B>' + this. Series. Name + '</B> <br/>' +
Highcharts. dateformat ('% Y-% m-% d % H: % m: % s', this. X) +' <br/> '+
Highcharts. numberformat (this. Y, 2 );
}
},
Legend :{

Layout: 'signature ',
Align: 'right ',
Verticalalign: 'top ',
X:-10,
Y: 100,
Borderwidth: 0
},
Exporting :{
Enabled: false
},
Series :[{
Name: 'parameter ',
Data: []
}]
});
Function getform (){
Jquery. getjson ("find. do? Command = rtview ", null, function (data) {// return JSON data in rtview
// Set the value for the curve
Chart. Series [0]. setdata (data );

});
}
$ (Document). Ready (function (){
// Call the method automatically every one second to update the chart in real time.
Window. setinterval (getform, 1000 );
});

});

 

Background: In the rtview Function

 

Response. setheader ("Pragma", "No-Cache ");
Response. setheader ("cache-control", "No-Cache ");
Response. setdateheader ("expires", 0 );
// JSON
Stringbuilder rtdatabuffer = new stringbuilder ();

// Arraylist list = new arraylist ();
 
Serialportsini SPI = new serialportsini (); // The processing class of the parameter passed by the sensor. It is not described here, that is, the data is generated.
// Limit 20 points per page
If (celist. Size ()> 20 ){
System. Out. println (celist. Size () + "sssssssss ");
Celist. Remove (0 );
}

// List. Add (SPI. getenvdata (). getlight ());
System. Out. println ("$" + SPI. getenvdata (). getlight ());

// Piece together JSON
Rtdatabuffer. append ("["). append (new date (). gettime (). append (",").
Append (SPI. getenvdata (). getlight (). append ("]");

Celist. Add (rtdatabuffer. tostring ());

// Pass the parameter to the foreground
Response. getwriter (). Print (celist );