Java code implementation highchart combined with database data complete case Study (ii)---line chart

Author original: not allowed to reprint without the permission of Bo Master

In the previous blog, show and analyze how to make a pie chart, there are questions can refer to the previous blog.

Now analyze and demonstrate the drawing of line charts and case studies,

First show:

Unlike a pie chart, a line chart shows more data, and it also shows more automation.

First show the JS code:

<!--play type statistics line chart--><script type= "Text/javascript" >$ (function () {var livflowlist=document.getelementbyid ("Livflowlist"). Value; var vodflowlist=$ ("#vodFlowList"). Val ();//a variable of type string is received herevar yvodflow =[]; The array here is the array of data needed in the line chart var yliveflow= []; var xmonth=[];//data elements for automatically generated x-axis axes//remove the [] side of the [],,, loop through the elements in the list collection and resolve it to the JS data type, because it is the data received by the list collection, both sides with "" number, you need to delete itvar test1 = livflowlist.substring (1,livflowlist.length-1);//when using the substring method, you must have a variable to pick up, otherwise the value of the response will not be returnedvar ss=test1.split (', ');  for(var i=0; i<ss.length; i++{Yliveflow.push (parsefloat (ss[i]));//parses the elements in the string array into the JS number format type and puts it into the array} var test2=vodflowlist.substring (1,vodflowlist.length-1); var tt=test2.split (', ');  for(Var h=0;h<tt.length; h++) {Yvodflow.push (parsefloat (tt[h)); } var flowmonthlist=$ ("#flowMonthList"). Val (); var monthlist=flowmonthlist.substring (1,flowmonthlist.length-1); var gg=monthlist.split (', ');  for(var k=0; k<gg.length; k++) {Xmonth.push (parseint (gg[k)); }         $(' #line_playType '). Highcharts ({title: {text:' Traffic statistics ', x:-20}, Credits: {text:‘‘, href:‘‘}, Xaxis: {categories:xmonth}, YAxis: {title: {T Ext:' Flow (G) '}, Plotlines: [{value:0, Width:1, Color:' #808080 '}]}, tooltip: {valuesuffix:G}, Legend: {layout:' Vertical ', align:' Right ', VerticalAlign:' Middle ', BorderWidth:0}, Series: [{name:' Live Traffic ', Data:yliveflow,
Color:Highcharts.getOptions (). Colors[3]}, {name:' On-demand traffic ', Data:yvodflow,
Color:Highcharts.getOptions (). Colors[7]}]});</script>

The things to note here are written in the comments in the code, and when you put a variable of the JS array type into data, the line chart automatically resolves the number of elements in the array.

and automatically parse and show.

JS in the received data, are from the Java background data, and put the data into the JSP page, and then JS from the JSP to get the value.

The code is as follows:

<input type= "hidden" name= "vodflowlist" id= "vodflowlist" value= "${vodflowlist}"/>                       <input type= "hidden" Name= "Livflowlist" id= "livflowlist" value= "${livflowlist}"/>                       <input type= "hidden" name= "flowmonthlist" id = "Flowmonthlist" value= "${flowmonthlist}"/>                        

The reason is put into the JSP page, is to achieve in JS convenient and quick to obtain data.

Now show the code in the Java backend Fetch data section

//live streaming traffic growth line chart data statisticsUserresourcemonthstatistics monthstatistics=NewUserresourcemonthstatistics (); Monthstatistics.setuserid (USERID);
Collection of presentation data from database query List<UserResourceMonthStatistics> monthlist=monthstatisticservice.getresmonthstatisticslist (monthstatistics);
Because we want to show 3 sets of data, new has three collections and puts the required data into the corresponding collection, and then setattribute to the JSP list<Double> livflowlist =NewArraylist<>(); List<Double> vodflowlist =NewArraylist<>(); List<String> flowmonthlist =NewArraylist<>();  for(Userresourcemonthstatistics userstatistics:monthlist) {LongLiveFlow2 = percentstring (Userstatistics.getliveflow ());//On- demand traffic            DoubleLivemonthflow =Chargeflow (LIVEFLOW2); LongVodFlow2 =percentstring (Userstatistics.getvodflow ()); DoubleVodmonthflow =Chargeflow (VODFLOW2); String Month=Userstatistics.getmonth ();            Flowmonthlist.add (month);            Livflowlist.add (Livemonthflow);        Vodflowlist.add (Vodmonthflow); } request.setattribute ("Flowmonthlist", flowmonthlist); Request.setattribute ("Livflowlist", livflowlist); Request.setattribute ("Vodflowlist", vodflowlist);

At the beginning of the time, I have been thinking how to get the collection value of a property directly from the list collection, searched the internet for a long time, did not search the corresponding method,

The loop is then written, which completes the drawing of a line chart.

Draw a line chart, can also be implemented in the way of Ajax, where the main logic and data processing are placed on the client processing, thinking and processing in the service side of the idea is

Consistent, with the AJAX request to the data, typically the data is a collection, and then the JS loop the collection, and put the required data into the array, and then the array

Available to line chart plug-ins ...

Java code implementation highchart combined with database data complete case Study (ii)---line chart