FusionCharts for Flex > Special Cases > TrendLines

Trendlines are used for displaying trends, targets, etc. on the chart. In this section we will discuss how to create trendlines for your charts from your Flex project.

Trendlines can be specified in chart XML. The following code renders a column 2D chart with two trendlines and a trendzone:

<?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>
For more information on XML Structures for different types of charts please refer to the 'Chart XML Structure' section. Also refer to 'Chart XML Reference' section for information on XML attributes such as startValue, endValue, color, etc., which are used for defining trendlines and manipulating their appearance.

The code (above) renders the following chart:

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. The process is illustrated through following example:

<?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 is similar to the above image.

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>