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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.