This article is an example of the display histogram, of course, this is only a method, there are many ways to display the chart, such as custom chart labels, using Jfreechart plug-ins, etc.;
1, Import JS file, contains a lot of presentation methods:
<script type= "Text/javascript" Src=<select:link page= "/js/chartobject.js"/>></script><script Type= "Text/javascript" Src=<select:link page= "/js/fusioncharts.js"/>></script>
2, from the background to obtain data:
function init () { var name3= "<%=request.getattribute (" Accountlist.name ")%>"; var value3= "<%=request.getattribute (" Accountlist.values ")%>"; var rate3= "<%=request.getattribute (" ACCOUNTLIST.VALUESHB ")%>"; SHOWCHART4 (name3,rate3); // ShowChart3 (Name3,value3, ""); }
3. Assign the data to the legend:
functionShowChart4 (names,values) {varChartobj =Newchartobject (); varXmlstring= ""; Chartobj.caption= "Vehicle Sales ratio chart for each carrier unit"; Chartobj.showvalues= ' 0 '; Chartobj.showlabels= ' 1 '; Chartobj.snumbersuffix= '%25 '; XMLString= Chartobj.createdualymscolumnxmlbyvalues (Names,values, "", "sales ratio = Cigarette sales% vehicle capacity;", "" "); varChart =NewFusioncharts ("charts/mscolumn3dlinedy.swf", "ChartId2", "1000", "230", "0", "0"); Chart.setdataxml (xmlstring); Chart.render ("ChartDiv2"); }
The following flash is used:
4. Just write in the JSP page:
<div style= "MARGIN-TOP:3PX;MARGIN-LEFT:3PX;" ><span id= "ChartDiv2" style= "width:100%;" ></span></div>
5. The results appear as follows:
JavaScript displays data as pie, histogram, and line charts