FusionCharts in Eclipse Part 2
There is another open source tool that allows you to create charts.
You should first download Fusioncharts.
You can open the index.html file in the download to see how you can integrate FusionCharts with your asp and jsp applications.
Under your Action2Project, create a folder called FusionCharts. FusionCharts creates the charts from an xml file. Open up the Charts folder from your FusionCharts directory. Copy all of those .swf files into the FusionCharts folder you created in your eclipse.
Now we will create our first chart.
In your FusionCharts directory, create a file called MonthlySales.xml and paste the following data into the xml file.
MonthlySales.xml
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46' />
<set name='May' value='761' color='008E8E' />
<set name='Jun' value='960' color='D64646' />
<set name='Jul' value='629' color='8E468E' />
<set name='Aug' value='622' color='588526' />
<set name='Sep' value='376' color='B3AA00' />
<set name='Oct' value='494' color='008ED6' />
<set name='Nov' value='761' color='9D080D' />
<set name='Dec' value='960' color='A186BE' />
</graph>
You will also need to create an html file. You should call this file Charts.html.
Paste the following code into the Charts.html file.
Charts.html
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
<param name="movie" value="FCF_Column3D.swf" />
<param name="FlashVars" value="&dataURL=MonthlySales.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high" />
<embed src="FCF_Column3D.swf" flashVars="&dataURL=MonthlySales.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
Save those files and open Charts.html in your browser. You should see the chart display.
To create a Funnel Chart, you should create a file in the same folder called Data.xml and an html file called Funnel.html. Paste the following code into those files.
Funnel.html
<html>
<head>
<title>My First FunnelCharts</title>
</head>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
<param name="movie" value="FCF_Funnel.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high" />
<embed src="FCF_Funnel.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
Data.html
<chart showNames='1' showValues='1' numberPrefix='$' numberScaleValue='1000,1000' numberScaleUnit='K,M' decimalPrecision='1' isSliced='1' slicingDistance='5'>
<set name='Buchanan' value='20000' color='0099FF' />
<set name='Callahan' value='49000' color='66CC66' />
<set name='Davolio' value='63000' color='CD6AC0' />
<set name='Dodsworth' value='41000' color='FF5904' />
<set name='Fuller' value='74000' color='0099CC' />
<set name='King' value='49000' color='FF0000' />
<set name='Leverling' value='77000' color='006F00' />
<set name='Peacock' value='54000' color='0099FF' />
<set name='Suyama' value='14000' color='FF66CC' />
</chart>
When you open the Funnel.html in your browser, you should see the following chart.

Go To Part 3 Read more...







