Creating your first Chart > Changing it to Pie Chart |
In our previous example (the first chart), we had created a column chart to show the monthly sales summary. Here, we'll quickly convert this chart into a 3D Pie chart to show the ease of chart generation with FusionCharts. |
To convert a chart type, all you need to do is change the .swf file that you're using. That is to say, if you're using a single series Column Chart, just changing the .swf file to Single Series Pie Chart would change the chart output to a pie, the data remaining the same (or with minor cosmetic changes). Let's quickly see the changes we need to make. |
Creating the HTML Page for the Pie Chart |
Create a copy of MyFirstChart.html and name the copy as MyFirstPieChart.html with the following code changes |
<HTML> <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="565" HEIGHT="420" id="FusionCharts"> <PARAM NAME=movie VALUE="../Charts/FC_2_3_Pie3D.swf"> <PARAM NAME="FlashVars" VALUE="&dataURL=Data.xml"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="../Charts/FC_2_3_Pie3D.swf" FlashVars="&dataURL=Data.xml" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FusionCharts" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </BODY> </HTML> |
In the above code, we've just changed the name of FusionCharts .swf file from (Column Chart to Pie Chart i.e., FC_2_3_Column3D.swf to FC_2_3_Pie3D.swf). And now when you view MyFirstPieChart.html, in your browser, you'll see the following output: |
So you just saw how easy it is to change the chart output type - merely change the .swf file (within the same series), make cosmetic changes in your XML data document and you're done. We'll next see how to resize a FusionCharts chart as per our requirements. |