JavaScript displays data as pie, histogram, and line charts

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