Trendline is used to display trends, targets etc. on the chart. You can create trendlines on chart within your Flex project. In this section we will discuss how to do the same.
Specifying trendlines in XML you can opt to define the trendlines in the chart XML itself. We show below an example of a Column 2D chart with 2 trendlines and a trendzone defined in a XML String.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataXML="{xmlData}"/>
<mx:Script>
<![CDATA[
//Create Chart data XML as String with 3 trendlines defined in the XML
[Bindable]
private var xmlData:String="<chart caption='Weekly Sales' xAxisName='Week' " +
" yAxisName='Revenue' numberPrefix='$' >" +
" <set value='40800' label='Week 1' />" +
" <set value='31400' label='Week 2' />" +
" <set value='26700' label='Week 3' />" +
" <set value='54400' label='Week 4' />" +
" <trendLines>" +
" <line startValue='42000' color='ff0000' />" +
" <line startValue='30000' color='008800' displayvalue='Average' showOnTop='1' />" +
" <line startValue='50000' endValue='60000' color='0000ff' alpha='20' " +
" displayvalue='Dream Sales' showOnTop='1' isTrendZone='1' />" +
" </trendLines>" +
"</chart>";]]>
</mx:Script>
</mx:Application>
Please refer to "Internal XML Structure" section for more on XML Structure of various chart types. Also refer to "Chart XML Reference" section to get the trendline attributes like startValue, endValue, color etc. applicable to each chart.
The above XML would render a chart as shown in the image below:
Creating Trendlines using Array, XMLList or Model object
FusionCharts for Flex allows developers to store the trendline definitions in Array, XMList or Model. You can create trendlines by binding the trendline storing object to FCTrendLines attribute of FCChartData class. Let us find out with the excerpt from an example, shown below, how this can be done using ArrrayCollection:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataXML="{xmlData}" FCTrendLines="{chartTrend}" FCParams="{chartParams}"/>
<mx:Script>
<![CDATA[
//Create an ArrayCollection object to store trendline objects
[Bindable]
private var chartTrend:ArrayCollection=new ArrayCollection([
{startValue:"42000",color:"FF0000",displayvalue:"Target",showOnToop:"1"},
{startValue:"30000",color:"008800",displayvalue:"Average",showOnToop:"1"},
{startValue:"50000",endValue:"60000",color:"0000FF",alpha:"20",displayvalue:"Dream Sales", showOnTop:'1', isTrendZone:'1'}]);
]]>
</mx:Script>
</mx:Application>
As you can see above, we create an ArrayCollection object named as chartTrend. We bind this object to the FCTrendLines attribute of FCChartData class. We sent various trendline parameters like startValue, displayValue, color, showOnTop etc.. The resultant chart would be the same as shown in the image above.
Let us go through the equivalent example using XMLList:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataXML="{chartData.data[0]}" FCTrendLines="{chartTrend.trend[0]}" FCParams="{chartParams.param[0]}"/>
<mx:Script>
<![CDATA[
[Bindable]
private var chartTrend:XML=
<main>
<trend>
<trendLine startValue='42000' color='FF0000' displayValue='Target' showOnTop='1'/>
<trendLine startValue='30000' color='008800' displayValue='Average' showOnTop='1'/>
<trendLine startValue='50000' endValue='60000' color='0000FF' alpha='20' displayValue='Dream Sales' showOnTop='1' isTrendZone='1' />
</trend>
</main>;
]]>
</mx:Script>
</mx:Application>
Below is the example using Model:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataXML="{chartData.data}" FCTrendLines="{chartTrend.trend}" FCParams="{chartParams.param}"/> ...
<!--Create an Model object to store trendline objects -->
<mx:Model id="chartTrend">
<chart>
<trend>
<startValue>42000</startValue>
<color>FF0000</color>
<displayValue>Target</displayValue>
<showOnTop>1</showOnTop>
</trend>
<trend>
<startValue>30000</startValue>
<color>008800</color>
<displayValue>Average</displayValue>
<showOnTop>1</showOnTop>
</trend>
<trend>
<startValue>50000</startValue>
<endValue>60000</endValue>
<color>0000FF</color>
<alpha>20</alpha>
<displayValue>Dream Sales</displayValue>
<showOnTop>1</showOnTop>
<isTrendZone>1</isTrendZone>
</trend>
</chart>
</mx:Model>
</mx:Application>