Converting our previous chart to Pie Chart |
In our previous example (My 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 convert a chart type, all you need to do is change the SWF file that you're using. e.g., 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 - XML data remaining the same. Let's quickly see the changes we need to make. For this example, create a copy of Chart.html
and save it as PieChart.html in the same
folder. And, finally edit the HTML code to reflect the following changes: |
<html> <body bgcolor="#ffffff"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="300" id="Pie3D" > <param name="movie" value="../FusionCharts/Pie3D.swf" /> <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=550&chartHeight=300"> <param name="quality" value="high" /> <embed src="../FusionCharts/Pie3D.swf" flashVars="&dataURL=Data.xml&chartWidth=550&chartHeight=300" quality="high" width="550" height="300" name="Pie3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </body> </html> |
In the above code, we've changed the SWF file from Column3D.swf to Pie3D.swf and changed chart size for a better fit. When you now view this page in browser, you'll see a pie chart as under: |
![]() |
You can click on any pie slice (in the actual chart - not in the image above) to slice that pie. Or, you can right click on the chart, choose "Enable Rotation" from the context menu, and then drag & rotate the pie chart. |