scaleFrom, scaleTo and gridlines

Prerequisite:
You will need to have applied the charting hotfix (find it here) to your CF7 installation.

Using scaling is a breeze in CF7 after you have installed the above given hotfix. The idea behing "scaleTo" and "scaleFrom" attributes is to specify the y-axis range of your charts. I will illustrate this by plotting five points: 1, 25, 50, 75, 99 on a line graph. This chart can be plotted by the following code:

<cfchart format="png" scalefrom="0" scaleTo="100" gridlines="5">
            <cfchartseries type="line">
                        <cfchartdata item="Point1" value="1">
                        <cfchartdata item="Point2" value="25">
                        <cfchartdata item="Point3" value="50">
                        <cfchartdata item="Point4" value="75">
                        <cfchartdata item="Point5" value="99">
            </cfchartseries>
</cfchart>

This code should give you the following picture


Note that our y-axis is from 0 to 100. Now lets increase the upper range of the axis to 200. So the code becomes:

<cfchart format="png" scalefrom="0" scaleTo="200" gridlines="5">
            <cfchartseries type="line">
                        <cfchartdata item="Point1" value="1">
                        <cfchartdata item="Point2" value="25">
                        <cfchartdata item="Point3" value="50">
                        <cfchartdata item="Point4" value="75">
                        <cfchartdata item="Point5" value="99">
            </cfchartseries>
</cfchart>

This code should give you the following picture

Observe that the graph appears to have been compressed vertically since we have doubled the vertical range.

Now lets play around and try to create an erroneous graph by introducing negative values but plotting only in the range from 0 to 100. Now the code is:

<cfchart format="png" scalefrom="0" scaleTo="100" gridlines="5">
            <cfchartseries type="line">
                        <cfchartdata item="Point1" value="-50">
                        <cfchartdata item="Point2" value="-25">
                        <cfchartdata item="Point3" value="1">
                        <cfchartdata item="Point4" value="25">
                        <cfchartdata item="Point5" value="50">
                        <cfchartdata item="Point6" value="75">
                        <cfchartdata item="Point7" value="99">
            </cfchartseries>
</cfchart>

This code should give you the following picture

Here we can spot trouble! We observe that the gridlines have not come out properly, the reason for this is the following - the charting engine gives preference to the data passed, it will try to plot the entire data first and then try to scale it/adjust the gridlines accordingly. This problem is solved if you scale within proper range, lets say between -100 to 100. So the code becomes:

<cfchart format="png" scalefrom="-100" scaleTo="100" gridlines="5">
            <cfchartseries type="line">
                        <cfchartdata item="Point1" value="-50">
                        <cfchartdata item="Point2" value="-25">
                        <cfchartdata item="Point3" value="1">
                        <cfchartdata item="Point4" value="25">
                        <cfchartdata item="Point5" value="50">
                        <cfchartdata item="Point6" value="75">
                        <cfchartdata item="Point7" value="99">
            </cfchartseries>
</cfchart>

The graph you get is:

Obviously this isnt looking great, so we should probably decrease the lower range to -50, so the code is now:

<cfchart format="png" scalefrom="-50" scaleTo="100" gridlines="5">
            <cfchartseries type="line">
                        <cfchartdata item="Point1" value="-50">
                        <cfchartdata item="Point2" value="-25">
                        <cfchartdata item="Point3" value="1">
                        <cfchartdata item="Point4" value="25">
                        <cfchartdata item="Point5" value="50">
                        <cfchartdata item="Point6" value="75">
                        <cfchartdata item="Point7" value="99">
            </cfchartseries>
</cfchart>

The image you get

Now this is looking completely offtrack !!
The trick is to know that "scaleFrom", "scaleTo" and "gridlines" work in conjunction.
Our range is from -50 to 100, so that is a difference of 100 - (-50) = 150, and the number of gridlines that we have specified is 5 - this will display 4 intervals in the graph now 150/4 gives you 37.5, so you see that the markers on the y-axis are at the lines -37.5,0,37.5 and 75, and the graph is looking odd.

Solution is to have the no. of gridlines so that your range can be divided into integral intervals,
so if I make gridlines=7, which means 6 intervals and 150/6 = 25,
I get a good looking graph:

The code for the same is this:

<cfchart format="png" scalefrom="-50" scaleTo="100" gridlines="7">
            <cfchartseries type="line">
                        <cfchartdata item="Point1" value="-50">
                        <cfchartdata item="Point2" value="-25">
                        <cfchartdata item="Point3" value="1">
                        <cfchartdata item="Point4" value="25">
                        <cfchartdata item="Point5" value="50">
                        <cfchartdata item="Point6" value="75">
                        <cfchartdata item="Point7" value="99">
            </cfchartseries>
</cfchart>