You are viewing documentation for an older version. For current documentation - click here.

This section explains the XML structure used by single-series charts in FusionCharts XT, namely Column 2D, Column 3D, Bar 2D, Line, Area 2D, Pie 2D, Pie 3D, Doughnut 2D, Doughnut 3D, Pareto 2D and Pareto 3D.

Let's recall our previous XML. It had a structure similar to the XML below. We have added a few new XML elements here as well.

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='January' value='17400' /> <set label='February' value='19800' /> <set label='March' value='21800' /> <set label='April' value='23800' /> <set label='May' value='29600' />
    <set label='June' value='27600' />
    <vLine color='FF5904' thickness='2'/>
    <set label='July' value='31800' />
    <set label='August' value='39700' />
    <set label='September' value='37800' />
    <set label='October' value='21900' />
    <set label='November' value='32900' /> <set label='December' value='39800' />
<trendlines>        <line startValue='22000' color='00cc00' displayValue='Average' /> </trendlines>
<styles>

      <definition>        <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />
      </definition>
      <application>
          <apply toObject='Canvas' styles='CanvasAnim' />
      </application>   
    </styles>
</chart>

Brief Explanation

The <chart> element is the main element of any FusionCharts XT XML document - it represents the starting point and the ending point of data. The <chart> element has a number of attributes which helps configure the cosmetic and functional properties of the chart. You can find a list of all such attributes in "Chart XML Sheet" of each chart (present in Chart XML API section).

In the most general form, attributes have the following form:
attributeName="Value"
For example, 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. Duplicate attributes result in XML validation error.

Moving on, each <set> element (which is a child element of the <chart> element) represents a set of data that is to be plotted on the chart. A typical <set> element will look like:

<set label="Jan" value="17400" color="3300FF" toolTip="January, 17400" link="details.asp?month=jan" showLabel="1"/>

Between the <set> elements, we can have the <vLine> element, which indicate the vertical separator lines running along the height and width of the chart canvas.

<vLine color='FF5904' thickness='2'/>

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

Finally, you have the <styles> element which is new in FusionCharts XT. It helps you apply font, effects and animations to various objects of the chart. Styles lends a simple mechanism using which you can easily control the visual layout of charts. To read more on Styles, please see FusionCharts XT Styles section.