| Creating your first chart > Creating the XML Source | ||||||||||||||||
| In our HTML Page (MyFirstChart.html)
we had embedded FusionCharts Column Chart and asked it to pull data from
Data.xml. Here, we’ll see how to morph
a specific set of data into the XML format required by FusionCharts. Let’s
say we want to plot a graph to depict “Decline in Net Interest Margins
of Asian Banks (1995-2001)” the decline being in percentage. The
data table for the above graph looks as under: |
||||||||||||||||
|
||||||||||||||||
| The above data when formed into FusionCharts XML may look as under: | ||||||||||||||||
| <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' numberSuffix='%'> <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> |
||||||||||||||||
| Open your favorite text editor; punch the above XML code
into it and save it as Data.xml under MyFirstChart
folder. And yeah - don't worry about whatever spaghetti stuff you have just written - we'll soon cover them. Basically, in the above file we are instructing the graph how to render the graph. First we define a few properties of the graph like axis names, captions, a few color etc. Thereafter, we provide the data to the graph. Just as a measure to check if the XML document is valid, double click (from Windows Explorer) on it to open in your browser (if the default handler for XML files on your machine is the browser). If you open it in IE, you should get the proper formatted output. And, it's now time to frutify the efforts that you have put into creating
your first chart. Get the Run dialog box (Start > Run) and enter the
following: You’ll get a graph as under: |
||||||||||||||||
![]() |
||||||||||||||||
| So, you just saw how you can create impressive looking charts in just a matter of minutes. Next, we'll see the data communication model. |