XML Methods > The XML Structure
 

FusionCharts uses XML to create and manipulate charts. XML is a simple and structured language that is easy to read and understand. An XML file can be created using any text editor.

  • In case you have not mastered XML yet, here are a few important things to know about an XML document:
  • You can make up your own tags.
  • Every opening tag requires a matching closing tag.
  • If an element has no content, the opening and closing tags may be combined into a single "shortcut" tag such as <TAG/>.
  • XML is case-sensitive.
  • The character " (double quote) in a string constant must be denoted as &quot;

FusionCharts has many chart rendering parameters defined in the code itself. Each chart can be generated using very minimal attributes without concern for every finer details such as the grid lines color, number of grid lines, hover caption details etc. As you become more proficient in the graph attributes, you could use it to create complex charts with a wide range of features and an informative & animated appearance.

A simple XML file for the single series charts may look as under:

<graph bgcolor='FFFFFF' caption='Monthly Hits of www.InfoSoftGlobal.com for the year 2002' subCaption='Hits in Thousands' yaxisname='Hits' xaxisname='Month' canvasbgcolor='FFC700' gridbgcolor='FFECAA' hovercapbg='FFECAA' hovercapborder='F47E00' divlinecolor='F47E00' numberSuffix='K'>
<set name='January' value='235' color='F23456' link='http://counter.InfoSoftGlobal.com/showdetail?mo=1&yr=2002' />
<set name='February' value='123' color='33FF66' showName='0' link='http://counter.InfoSoftGlobal.com/showdetail?mo=2&yr=2002' />
<set name='March' value='129' color='FF6600' link='http://counter.InfoSoftGlobal.com/showdetail?mo=3&yr=2002' />
<set name='April' value='121' color='3399FF' showName='0' link='http://counter.InfoSoftGlobal.com/showdetail?mo=4&yr=2002' />
<set name='May' value='181' color='AA99FF' link='http://counter.InfoSoftGlobal.com/showdetail?mo=5&yr=2002' />
<set name='June' value='110' color='009966' showName='0' link='http://counter.InfoSoftGlobal.com/showdetail?mo=6&yr=2002' />
<set name='July' value='90' color='CC3399' link='http://counter.InfoSoftGlobal.com/showdetail?mo=7&yr=2002' />
<set name='August' value='186' color='FFCC33' showName='0' link='http://counter.InfoSoftGlobal.com/showdetail?mo=8&yr=2002' />
<set name='September' value='289' color='CC6666' link='http://counter.InfoSoftGlobal.com/showdetail?mo=9&yr=2002' />
<set name='October' value='163' color='9900FF' showName='0' link='http://counter.InfoSoftGlobal.com/showdetail?mo=10&yr=2002' />
<set name='November' value='260' color='993333' showName='0' link='http://counter.InfoSoftGlobal.com/showdetail?mo=11&yr=2002'/>
<set name='December' value='212' color='CCCC00' link='http://counter.InfoSoftGlobal.com/showdetail?mo=12&yr=2002'/>

<trendlines>
<line value='189' displayValue='Average' color='FF0000' thickness='1'/>
<line value='229' displayValue='High' color='009999' thickness='1'/>
</trendlines>
</graph>

The <graph> element is the main element of the XML document - it represents the starting point and the ending point of data. The graph element has a number of attributes which helps to manipulate the chart (we’ll soon discuss them). In the most general form, attributes have the following form:
attributeName = "Value"
e.g., xAxisName="Month"

The attributes can occur in any order and quotes can be single or double like xAxisName='month'

Moving on, each <set> element (which is a child element of the <graph> element) represents a set of data which is to be plotted on the graph and determines a set of data which would appear on the graph. A typical <set> element would look like:

<set name="Eng" value="54" color="3300FF" link="http://www.marks.com/ marks.asp?sub=Eng" showName="1"/>

Don’t worry about the attributes now – we’ll soon discuss them.

Next we have the <trendlines> element. Using this function of the chart, you could draw custom lines on the chart to represent a trend. For example, in our above XML, we have defined a line at 189 to represent the average hits for the period.

Before we delve into the details of each attributes, let’s first see the different elements contained in a chart.