Single Series Chart XML

Single Series Charts depict only one set of data on the chart. A simple 2D single series looks like this:

In this section, the XML structure of single series chart has been explained in a generic way. Let's recall our previous XML. It looked something like this (minus a few new nodes):

<graph caption='Business Results 2006' xAxisName='Month' yAxisName='Revenue' showValues='0'
  numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'
  divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' alternateHGridColor='f8f8f8'
  alternateHGridAlpha='60' >

   <set name='Jan' value='27400' color='AFD8F8'/>
   <set name='Feb' value='29800' color='F6BD0F' />
   <set name='Mar' value='25800' color='8BBA00'/>
   <set name='Apr' value='26800' color='FF8E46'/>
   <set name='May' value='29600' color='008E8E' />
   <set name='Jun' value='32600' color='D64646'/>
   <set name='Jul' value='31800' color='8E468E'/>
   <set name='Aug' value='36700' color='588526'/>
   <set name='Sep' value='29700' color='B3AA00'/>
   <set name='Oct' value='31900' color='008ED6'/>
   <set name='Nov' value='34800' color='9D080D'/>
   <set name='Dec' value='24800' color='A186BE' />

 <trendlines>
   <line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>
 </trendlines>

</graph>
 
Brief Explanation

The <graph> element is the main element of any FusionCharts 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. You can find the list of all the attributes for this element in "Chart XML Reference" of each chart.

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'. However, you need to make sure that a particular attribute occurs only once for a given element.

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='Jan' value='27400' color='AFD8F8' hoverText="January, 17400" link="details.asp?month=jan" showName="1"/>

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 26000 to represent the average target sales for the period.

<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>