Modifying look and feel of charts - Part I (very Basic)

You will need to use custom styles for this. Macromedia experience design team has designed the various style files that are lying in the <cfusion-install>\charting\styles directory. If you want to modify the look and feel of the charts that you create you will need to create your own custom files by modifying these default style files and using the "style" attribute in the <cfchart> tag. I will demonstrate this by increasing the width of lines in line charts.

By default the style that is used for bar/line charts is - default.xml and the one for pie charts is - default_pie.xml.

Before applying the style file our chart looks like this

The corresponding code for this chart is:

<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>

Creating your own style file.
(this is the style file you will get - mystyle.xml)

• Copy the default.xml file in <cfusion-install>\charting\styles directory to the directory where you have the .cfm of your line chart.
• Rename this "default.xml" to "mystyle.xml"
• For changing the line width the attribute that is used is "linewidth", in the <element> child tag of the xml document.
• Locate this line in the xml document:
  

  <elements action="" shape="Area"
            drawOutline="false">

  modify it to the following:

  <elements action="" shape="Area"
            drawOutline="false" lineWidth="6">

• Save the file, you have now created a custom style file.

Applying custom styles to charts
We will now apply the style file "mystyle.xml" we created above to our chart. This is very easy to do just use the "style" attribute in <cfchart> tag. Our code will now become:

<cfchart format="png"
                 scalefrom="-100" scaleTo="100" gridlines="5"
                 style="mystyle.xml">
            <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>

and our graph will look like:


Comparison
Default line width

Line width = 6