Java code implementation highchart combined with database data complete case study (i)---pie chart

Author Original: Reproduced please indicate the source

In the process of doing the project, often use statistical data, and will use Highchart or Echart for data display, Highchart is a foreign developed data chart plug-in,

Echart is our country developed data statistics plug-in, I prefer Highchart statistics plug-in, here is also Highchart plug-in application.

It is not difficult to apply Highchart plug-ins, to find official documents, copy code, you can show the icon, difficult is how to combine the data in the local database. So

Here is the main analysis of the database data and plug-in combination of the process, I use Java code implementation. Here is the scale diagram of the implementation:

First show JS code

<script type= "Text/javascript" >$ (function () {var livepercent=document.getelementbyid ("Livepercent"). Value; var vodpercent=$ ("#vodPercent"). Val (); var playcount=$ ("#playCount"). Val (); //alert (typeof ()); //alert ("Vodpercent:" +vodpercent+ "##### #livePercent =" +livepercent ");$ (' #pieChart_res '). Highcharts ({chart: {plotbackgroundcolor:NULL, Plotborderwidth:NULL, Plotshadow:false}, Title: {text:' Play statistics scale graph '}, Credits: {text:‘‘, href:‘‘}, tooltip: {headerformat:' {series.name}<br> ', Pointformat:' {point.name}: <b>{point.percentage:.1f}%</b> '}, Plotoptions: {pie: {allowpointselect:true, cursor:' Pointer ', DataLabels: {enabled:true, Format:' {point.description} ', Distance:-140}, Showinlegend:true}}, Series: [{type:' Pie ', Name:' The resource access ratio ', data: [[' Live traffic ratio ', Parsefloat (livepercent)], {name:' On-demand traffic ratio ', Y:parsefloat (vodpercent), sliced:true, selected:true, Description:' Total plays ' +Playcount}]    }]        });  }); </script>

The code above is basically consistent with the API code in Highchart, and the main idea is: what data is needed and what data is provided.

So I've plugged the data into a JSP page in the background and parsed it in JS to provide the data to the chart.

##### #特别要注意的是, the property value obtained from the JSP (int or long, or double,float), when I use the JS variable var to receive it, it becomes

String type of variable, so in the supply of data, it must be resolved to JS in the number type format, the method used here is: Parselong (), or Parsefloa ();

This is a long time, because the data type does not match, the chart in the debugging process, always do not display. To have a long memory ...

Here is the code presentation (which is hidden in the page) that puts the data you get in the background on the page:

<input type= "hidden" name= "Livetotalcount" id= "livepercent" value= "${livecountpercent}" >                       <input type= " Hidden "name=" Vodtotalcount "id=" vodpercent "value=" ${vodcountpercent} ">

It is placed on the page to facilitate the receipt of data.
The most critical place is the Java code to get the data needed for the chart:

//querying data from a databaseUserplaysummarystatistics playstatistics=userplayservice.getuserplaystatistics (playsummarystatistics); String Livetotalcount=Playstatistics.getlivetotalcount (); String Vodtotalcount=Playstatistics.getvodtotalcount (); //Converts the acquired data type to a long type        LongLivecount=percentstring (Playstatistics.getlivetotalcount ());//total number of a stations        LongVodcount=percentstring (Playstatistics.getvodtotalcount ());//Total number of B stations//calculate percentage, percent is double type ,,,,        DoubleLivepercent = (Double) livecount/(livecount+vodcount); DecimalFormat format=NewDecimalFormat ("0%"); String livecountpercent=Format.format (livepercent); System.out.println ("Livecountpercent" +livecountpercent); DoubleVodpercent = (Double) vodcount/(livecount+vodcount); DecimalFormat FORMAT1=NewDecimalFormat ("0%"); String vodcountpercent=Format1.format (vodpercent); System.out.println ("Vodcountpercent" +vodcountpercent); Request.setattribute ("Playcount", Playcount); Request.setattribute ("Livecountpercent", livecountpercent); Request.setattribute ("Vodcountpercent", vodcountpercent); 

The main part of the code is the above, so you can easily implement a chart, and load the data faster.

Also useful AJAX implementation of data requests, process and logic is also more complex, I will also use the AJAX implementation of the statistical Chart of the code case to share, has made notes.

Java code implementation highchart combined with database data complete case study (i)---pie chart