XY plot charts are charts where you represent multiple series of data as points in a graph, ideal for representing data in continuous space. Unlike our previous examples, we have to specify the exact co-ordinate of the data plot, not its value and order in the series. XY plot charts accept multiple series of data that can be plotted over the same graph. FusionCharts offer two types of plot charts; scatter charts for standard (x, y) co-ordinate plotting and bubble charts which can represent z co-ordinates also.
Note that the XML structure is generic for all plot charts. However, some extra attributes are required in bubble charts, which can be added as normal <set> attributes.
For our case, we have selected to plot the performance of two servers as a load factor vs. response time graph. Shown below is the image of how the chart will look:
The XML for the scatter chart would look as follows:
<chart palette='2' caption='Server Performance' yAxisName='Response Time (sec)' xAxisName='Server Load (TPS)' xAxisMaxValue='100' xAxisMinValue='20' yAxisMaxValue='7'>
<categories verticalLineColor='666666' verticalLineThickness='1'>
<category label='20' x='20' showVerticalLine='1'/>
<category label='30' x='30' showVerticalLine='1'/>
<category label='40' x='40' showVerticalLine='1'/>
<category label='50' x='50' showVerticalLine='1'/>
<category label='60' x='60' showVerticalLine='1'/>
<category label='70' x='70' showVerticalLine='1'/>
<category label='80' x='80' showVerticalLine='1'/>
<category label='90' x='90' showVerticalLine='1'/>
<category label='100' x='100' showVerticalLine='0'/>
</categories>
<dataset seriesName='Server 1' color='009900' anchorSides='3' anchorRadius='4' anchorBgColor='D5FFD5' anchorBorderColor='009900'>
<set y='2.4' x='21' />
<set y='3.5' x='32' />
<set y='2.5' x='43' />
<set y='4.1' x='48' />
<set y='3.5' x='50' />
<set y='4.6' x='56' />
<set y='4.8' x='59' />
<set y='4.9' x='73' />
<set y='4.6' x='89' />
<set y='4.2' x='93' />
</dataset>
<dataset seriesName='Server 2' color='0000FF' anchorSides='4' anchorRadius='4' anchorBgColor='C6C6FF' anchorBorderColor='0000FF'>
<set y='1.4' x='23'/>
<set y='1.5' x='29'/>
<set y='1.5' x='33'/>
<set y='1.1' x='41'/>
<set y='1.5' x='47'/>
<set y='1.6' x='49'/>
<set y='1.8' x='51'/>
<set y='1.9' x='53'/>
<set y='1.6' x='57'/>
<set y='1.2' x='58'/>
<set y='1.9' x='61'/>
<set y='1.1' x='63'/>
<set y='1.9' x='64'/>
<set y='1.7' x='71'/>
<set y='1.1' x='77'/>
<set y='1.3' x='79'/>
<set y='1.7' x='83'/>
<set y='1.8' x='89'/>
<set y='1.9' x='91'/>
<set y='1.0' x='93'/>
</dataset>
<vTrendlines>
<line startValue='20' endValue='65' alpha='5' color='00FF00' />
<line startValue='65' endValue='75' alpha='15' color='FFFF00' />
<line startValue='75' endValue='100' alpha='15' color='FF0000' />
</vTrendlines>
<trendlines>
<line startValue='5.2' displayValue='Check' lineThickness='2' color='FF0000' valueOnRight='1' dashed='1' dashGap='5'/>
</trendlines>
</chart>
The following example shows a plot of the relative market share of companies vs. their cost per service. The z-index shows the number of companies present in each group.
The XML for the bubble chart would look as follows:
<chart palette='3' numberPrefix='$' is3D='1' xAxisMaxValue='100' showPlotBorder='0' xAxisName='Stickiness' yAxisName='Cost Per Service' chartRightMargin='30'>
<categories>
<category label='0%' x='0' />
<category label='20%' x='20' showVerticalLine='1'/>
<category label='40%' x='40' showVerticalLine='1'/>
<category label='60%' x='60' showVerticalLine='1'/>
<category label='80%' x='80' showVerticalLine='1'/>
<category label='100%' x='100' showVerticalLine='1'/>
</categories>
<dataSet showValues='0'>
<set x='30' y='1.3' z='116' name='Traders'/>
<set x='32' y='3.5' z='99' name='Farmers'/>
<set x='8' y='2.1' z='33' name='Individuals'/>
<set x='62' y='2.5' z='72' name='Medium Business Houses'/>
<set x='78' y='2.3' z='55' name='Corporate Group A'/>
<set x='75' y='1.4' z='58' name='Corporate Group C'/>
<set x='68' y='3.7' z='80' name='HNW Individuals'/>
<set x='50' y='2.1' z='105' name='Small Business Houses'/>
</dataSet>
<trendlines>
<line startValue='2.5' isTrendZone='0' displayValue='Median Cost' color='0372AB'/>
</trendlines>
<vTrendlines>
<line startValue='0' endValue='60' isTrendZone='1' displayValue='Potential Wins' color='663333' alpha='10'/>
<line startValue='60' endValue='100' isTrendZone='1' displayValue='Cash Cows' color='990099' alpha='5'/>
</vTrendlines>
</chart>
If you've already gone through the multi series XML structure, you'll find notable differences between the two XML structures. There is the new x and y attributes within the <set> element replacing the value attribute.
However, if you're still unaware of the FusionCharts XML structure, let's get to the basics first. 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 which helps to manipulate the chart. You can find the full list of attributes in FusionCharts and XML » Chart XML Reference for each chart.
In the most general form, attributes have the following form:
AttributeName = "StringValue"
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.
Next to the <chart> element are <categories> element and its child <category> elements. Each <category> element represents a label on the x-axis. The <category> elements need to be defined for all the plot charts before you can define the data. For example, in our bubble chart, the categories are the month names (0%, 20%, 40% ...) as we're plotting a chart to show the relative market shares.
Now, in a XY plot chart, similar to a multi-series chart, each series of data needs to be enclosed between a <dataset> element. Like in our scatter chart example, we're plotting a chart showing the server performance for two different computers - the first dataset element's child-nodes would be the data for the first computer and the second one for the second computer. Depending on the chart type, there are a number of properties which you can define for each <dataset> element, which you can see in FusionCharts and XML » Chart XML Reference section.
Moving on, each <set> element (which is a child element of the <dataset> 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 y='4.8' x='59' />
The x and y attributes represent the x and y co-ordinates of the plot points. In case of bubble charts, a z attribute can also be specified that determines the radius of each bubble. The name attribute specifies the name of each plot point.
You should note that unlike multi-series charts, the number of <category> elements need not be equal to the number of data rows in each data sets, i.e., if you mention six categories (as our bubble chart example), the data can contain eight <set> elements (eight plots along x-axis).
Next we have the <trendLines> and <vTrendlines> element. Using this function of the chart, you could draw custom lines on the chart to represent a trend. For example, in our bubble chart XML (above), we have defined a line at 2.5 represent the median cost.
Please note that FusionCharts internally can accept ONLY XML data to render chart. FusionCharts for Flex component allow Flex developers to provide data as Array, Model or XMLList object. Though our discussions in this Documentation mainly show examples in XML, a Flex developer can always use Array, Model or XMLList objects. To make the thing easier, we have visually shown how the other data sources need to be structured to provide the same data.