| Creating your first chart > Single Page Charts |
| Till now, we had seen the first method of data communication
to FusionCharts, in which an external data provider page/XML document was
required. However, there also exists another way to provide the XML data
to FusionCharts. In this method, the XML Data is provided to FusionCharts
by the same page in which it's embedded. When working with this method,
you don't need to create the external server side script/XML document to
provide the data to FusionCharts.
Let's quickly see an example of the above. Once again open your text editor, create an HTML file with the following
code and save it as SinglePageChart.html
under MyFirstChart folder. |
| <HTML> <HEAD> <TITLE>FusionCharts Sample Single Page Chart</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> <CENTER> <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="FC2Column" ALIGN=""> <PARAM NAME=movie VALUE="../Charts/FC2Column.swf"> <PARAM NAME="FlashVars" value="&dataXML=<graph caption='Decline in Net Interest Margins of Asian Banks (1995-2001)' subCaption='(in Percentage)' yaxisname='Points' xaxisname='Country' numdivlines='3' zeroPlaneColor='333333' zeroPlaneAlpha='40' > <set name='Taiwan' value='-0.33' color='F23456'/> <set name='Malaysia' value='-0.27' color='FF6600'/> <set name='Hong Kong' value='0.40' color='009966' /> <set name='Philippines' value='0.6' color='CC3399'/> <set name='Singapore' value='-0.8' color='FFCC33' /> <set name='Thailand' value='-2.2' color='F23456'/> <set name='India' value='1.2' color='FF6600'/> </graph>"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="../Charts/FC2Column.swf" FlashVars="&dataXML=<graph caption='Decline in Net Interest Margins of Asian Banks (1995-2001)' subCaption='(in Percentage)' yaxisname='Points' xaxisname='Country' numdivlines='3' zeroPlaneColor='333333' zeroPlaneAlpha='40' > <set name='Taiwan' value='-0.33' color='F23456'/> <set name='Malaysia' value='-0.27' color='FF6600'/> <set name='Hong Kong' value='0.40' color='009966' /> <set name='Philippines' value='0.6' color='CC3399'/> <set name='Singapore' value='-0.8' color='FFCC33' /> <set name='Thailand' value='-2.2' color='F23456'/> <set name='India' value='1.2' color='FF6600'/> </graph>" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FC2Column" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </CENTER> </BODY> </HTML> |
As you can see above, we have provided the complete data
(in XML format) to FusionCharts, by appending it as a FlashVars attribute
in the following format: However, with this method, there can sometimes be a problem when you're working with larger chunks of data. This problem happens due to the length limitation of the browser. When you specify a larger chunk of data in the dataXML format, the browser ignores everything after a certain length. This causes FusionCharts to hang (nothing would be displayed on-screen) as the full data has not been supplied to it. Therefore, dataURL method is recommended for larger chunks of data (basically - multi-series charts). Let's now move on and see the different properties of the chart that can be customized using the XML data source. |