FusionCharts Knowledge Base


How do I customize the trend lines and trend zones on the chart?

What is a Trend Line in FusionCharts?

Trend lines are horizontal/vertical lines spanning the chart canvas, which aid in interpretation of data with respect to some predetermined value.


How do I display a Trend Line in my charts?

You can display a Trend Line in your chart using trendlines attribute in your <chart> element.

Example:

 <chart caption='Quarterly Sales Summary' subcaption='Figures in 
xAxisName='Quarter' yAxisName='Sales' showValues='0'>
    <set label='Qtr 1' value='420500' />
    <set label='Qtr 2' value='295400' />
    <set label='Qtr 3' value='523400' />
    <set label='Qtr 4' value='465400' />
     <trendLines>
        <line startValue='430000' color='009933' displayvalue='Target' />
    </trendLines>

</chart>

The trend line is plotted at the value which you have specified. If the value specified is not within the chart limits, then the trend line is not plotted at all.


How do I display a tool text for the Trend Line in my charts?

The trendlines can also show tool-text when hovered over using toolText attribute. To specify a custom tool-text for trend-line, the following data can be used:

 <chart caption='Quarterly Sales Summary' subcaption='Figures in 
xAxisName='Quarter' yAxisName='Sales' showValues='0'>
    <set label='Qtr 1' value='420500' />
    <set label='Qtr 2' value='295400' />
    <set label='Qtr 3' value='523400' />
    <set label='Qtr 4' value='465400' />
     <trendLines>
        <line startValue='430000' color='009933' displayvalue='Target'
toolText='This trend was calculated last year'/>
    </trendLines>
</chart>

This results in:


What are Trend Zones in FusionCharts?

Trend zones are similar to trend lines except that they mark out an entire zone rather than just a line. You can specify the Trend Zones in your charts using isTrendZone attribute as under.

<trendLines>
        <line startValue='350000' endValue='500000' isTrendZone='1'
color='009933' displayvalue='Target' />
</trendLines>

Note that for converting a trend line into a trend zone, all we have to do is add an end value and set isTrendZone to 1.


How do I customize the look of Trend lines & Trend Zones in my charts?

You can customize the look of the Trend lines & Trend Zones using the following attributes:

Attribute Name Range Description
color Hex Code Color of the trend line and its associated text
thickness In Pixels If you've opted to show the trend as a line, this attribute lets you define the thickness of trend line
alpha 0-100 Alpha of the trend line


How can I have slanted Trend Lines in my charts?

You can have slanted Trend Lines in your charts, i.e. trend lines having a different starting & ending value using startValue and endValue attributes in your <chart> element.

Example:

<line startValue='300000' endValue='500000' color='508548' displayvalue='Target' />

This gives the following output:


How can I display the value of Trend Lines to the right of my charts?

You can display value of Trend Lines to the right of your chart by setting valueOnRight='1'.

Example:

<line startValue='430000' color='508548' displayvalue='Target' valueOnRight ='1'/>

This gives the following output:


How can I use dashed lines for Trend Lines in my charts?

The trend lines can be made dashed by setting dashed='1'. The dash length and gap can be customized using dashLen & dashGap attributes respectively.

Example:

<line startValue='430000' color='508548' displayvalue='Target' dashed='1' 
dashLen='4' dashGap='3' 
/>

It results in:


How can I animate the Trend Lines in my charts?

You can animate the Trend Lines in your charts by using styles.

Example:

The example below when runs will animate the x-scale & the alpha of the trend line.

 <chart caption='Quarterly Sales Summary' subcaption='Figures in 
xAxisName='Quarter' yAxisName='Sales' showValues='0'>
    <set label='Qtr 1' value='420500' />
    <set label='Qtr 2' value='295400' />
    <set label='Qtr 3' value='523400' />
    <set label='Qtr 4' value='465400' />
    <trendLines>
        <line startValue='430000' color='009933' displayvalue='Target' />
    </trendLines>
    <styles>
        <definition>
            <style name='Anim1' type='animation'
param='_xScale' start='0' duration='1' />
            <style name='Anim2' type='animation'
param='_alpha' start='0' duration='1' />
        </definition>
        <application>
            <apply toObject='TRENDLINES' styles='Anim1, Anim2' />
        </application>
    </styles>
</chart>


How do I specify a Trend Line in Dual Y-Axis charts?

A dual y-axis chart has 2 y-axes. So when you are defining a trend line, you also need to define which axis the line has to be defined on. This can be done using the parentYAxis attribute. By default, the trend line shows up on the primary y-axis but if you want to show it on the secondary y-axis you have to configure the same by setting parentYAxis='S'.

Example:

<line startValue='430000' color='009933' displayvalue='Target' parentYAxis='S' /> 


Related Articles

No related articles were found.

Attachments

No attachments were found.

Visitor Comments

Article Details

Last Updated
27th of October, 2010

Would you like to...

Print this page  Print this page

Email this page  Email this page

Post a comment  Post a comment

 Subscribe me

Subscribe me  Add to favorites

Remove Highlighting Remove Highlighting

Edit this Article

Quick Edit


User Opinions

100% thumbs up 0% thumbs down (2 votes)

How would you rate this answer?



Thank you for rating this answer.

Continue