FusionCharts for Flex > XML by Chart Elements > Divisional Lines

Divisional lines are horizontal lines running through the canvas. They break up the y axis into smaller units helping in better visual data interpretation.

The XML code going into the above is:

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'>
    <set label='Jan' value='420000' />
    <set label='Feb' value='910000' />
    <set label='Mar' value='720000' />
    <set label='Apr' value='550000' />
    ....
</chart>

Note that we haven't specified the number of div lines we want, nor the y-axis min or max value.

Adjusting divisional lines

In certain cases, you would want to explicitly specify the y-axis upper & lower limit values and also the number of divisional lines. In those cases, you need to disable automatic adjustment of divisional lines using adjustDiv='0'. Then you can specify the y-axis upper and lower limits using the yAxisMaxValue and yAxisMinValue attributes respectively. Also, the number of divisional lines can be specified using the numDivLines attribute.

<chart ... adjustDiv='0' yAxisMaxvalue='100' yAxisMinValue='0' numDivLines='5'> 

Hiding y-axis values

You can hide all the y-axis values using showYAxisValues='0'.

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0' showYAxisValues='0'>
    <set label='Jan' value='420000' />
    <set label='Feb' value='910000' />
    <set label='Mar' value='720000' />
    ....
</chart>

The above would yield the following result:

Skipping y-axis values

You can skip every nth y-axis value using the yAxisValuesStep attribute.

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0' yAxisValuesStep='2'>
    <set label='Jan' value='420000' />
    <set label='Feb' value='910000' />
    <set label='Mar' value='720000' />
    ....
</chart>

Now the chart would look as under:

Customizing the divisional lines

The looks of the divisional lines can be customized using the following attributes:

Attribute Name Range Description
divLineColor Color for divisional lines (without the '#')
divLineThickness 1-5 Thickness of divisional lines
divLineAlpha 0-100 Alpha of divisional lines.
<chart ... divLineColor='8CB1FF' divLineThickness='2' divLineAlpha='40'>

This would yield the following result:

Dashed divisional lines

The divisional line can be made dashed using divLineIsDashed='1'.

The dash properties - dash length and dash gap can be customized using the divLineDashLen & divLineDashGap attributes respectively.

<chart divLineIsDashed='1' divLineDashLen='1' divLineDashGap='2' ...>

The dashed div lines with the customized dash properties would look as shown below:

Alternate Horizontal Grid Bands

The horizontal grid bands appear alternately between the divisional lines for all 2D charts. They can be hidden by setting showAlternateHGridColor='0'.

<chart showAlternateHGridColor='0' ...> 

The chart without the alternate horizontal grid bands would look as under:

Customizing the horizontal grid bands

The color and alpha of the alternate horizontal grid bands can be customized using the alternateHGridColor and alternateVGridAlpha attributes.

Using Styles to set font properties for y-axis values

Using Styles, you can individually set the font properties for the y-axis values.

The XML for this chart is as under. To read more on Styles, please see "For Web Developers > FusionCharts and STYLES" section.

<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' />
    <styles>
        <definition>
            <style name='myValuesFont' type='font' font='Arial' size='12' color='666666' bold='1'/>
        </definition>
        <application>
            <apply toObject='YAXISVALUES' styles='myValuesFont' />
        </application>
    </styles>

</chart>

Applying effects to div lines

We can apply effects (shadow, glow, blur, bevel) to the y-axis values and div lines using STYLES. Here, we will see a chart having shadow for the div lines.

<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' />
    <styles>
        <definition>
            <style name='myShadow' type='shadow' angle='45' distance='3' color='000000'/>
        </definition>
        <application>
            <apply toObject='DIVLINES' styles='myShadow' />
        </application>
    </styles>

</chart>

Similarly, the other effects can be applied to the div lines and to the y-axis values as well.

Animating div lines & y-axis values

You can also apply animation effects to the div lines & y-axis values. In the XML given below, the x-Scale of the div lines will be animated and y-position of the y-axis values will be animated.

<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' />
    <styles>
        <definition>
            <style name='myAnim1' type='animation' param='_xScale' start
='0' duration='1'/>
            <style name='myAnim2' type='animation' param='_y' start
='$canvasStartY' duration='1'/>
        </definition>
        <application>
            <apply toObject='DIVLINES' styles='myAnim1' />
            <apply toObject='YAXISVALUES' styles='myAnim2' />

        </application>
    </styles>

</chart>

Animating alternate horizontal grid bands

Animation effects can be applied to the alternate horizontal grid using STYLES. The following XML would animate the x-Scale and the alpha of the horizontal grid bands.

<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' />
    <styles>
        <definition>
            <style name='myAnim1' type='animation' param='_xScale' start
='0' duration='1'/>
            <style name='myAnim2' type='animation' param='_alpha' start
='0' duration='1'/>
        </definition>
        <application>
            <apply toObject='HGRID' styles='myAnim1, myAnim2' />

        </application>
    </styles>

</chart>