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 similar to the one shown below (minus a few new nodes): |
Note: FusionCharts internally can accept ONLY XML data to render chart. FusionCharts for Flex component allows Flex developers to provide data as Array, Model, or XMLListobject. Though our discussions in this Documentation mainly show examples of XML, a Flex developers can always use Array, Model or XMLList objects. To make things easier, later in this section we have visually shown how the other data sources need to be structured to provide the same data. |
<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 XML document. It represents the starting point and the ending point of data. The <chart> element has a number of attributes, that helps in manipulating the chart. You can find the list of all attribute for this element in "FusionCharts and XML » Chart XML Reference" of each chart. In the most general form, attributes have the following form: Attributes can be written in any order and quotes can be single or double like xAxisName="Month". However, you need to make sure that a particular attribute is used only once for a given element. Moving on, each <set> element (which is a child element of the <chart> 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 similar to the one shown below: <set label="Jan" value="17400" color="3300FF" toolTip="January, 17400" link="details.asp?month=jan" showName="1"/> In between <set> elements, we can have <vLine> elements, which create vertical separator lines running along the height/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've <styles> element, which is new in FusionCharts. 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 go through "FusionCharts and XML » Chart Style XML" section. |