I’ve done simple line charts with ColdFusion in the past with the CFCHART tag, but a recent project had me doing more complex charting and having to use the flash chart type which I’d never used before. When making bar charts, the default behavior for Flash type graphs is a basic grow animation that looks neat when you first see it, but it gets annoying if you are constantly refreshing the chart. This also becomes problematic if the refresh rate is faster than the animation time because you never see the final data.

Ray Camden and Dan Switzer pointed me to a couple of blog posting about WebCharts3D which is included in ColdFusion 7. So I launched the application – simply executing the webcharts.bat file in the WEB-INF\cfusion\charting directory. You’re first presented with a screen where you choose the type of chart you want to build/customize.

webchart1-747317.jpg

When you select the type – and sub-type – that you want, you are taken directly to the main editor screen.

webchart2-731124.jpg

It takes some playing around to learn how to access and change the properties of any given chart style (as the interface is not incredibly intuitive) and as soon as you change any property, the example on the left is updated with a preview.

Once you have it looking the way you like, you go to the XML Style tab and click the save button. You need to save it in the WEB-INF\cfusion\charting\styles directory.

webchart3-739210.jpg

Then you simple take the name of xml file you just saved and put it in the style attribute of the CFCHART tag.

<cfchart title="My Chart" scaleFrom="0" scaleTo="100"
   format="flash" chartheight="300" chartwidth="650"
   markersize="1" style="my_new_chart_style">
      <cfchartseries type="line" colorlist="1E90FF">
          <cfchartdata value="50">
      </cfchartseries>
</cfchart>

If you are unhappy with any aspect of the way your ColdFusion charts are being displayed or want to add/remove information from them, then definitely play around with WebCharts3D.