I've been playing around with CFMX 7's CFCHART tag quite a bit lately. I've been trying to decide if I can get it to do all the things I want it to do. While it's certainly a nice tag, there are certain aspects of the tag I don't like. Fortunately, with some work you can customize the CFCHART functionality quite a bit. You can even design your own style sheets for use with the WebCharts3D engine that Macromedia licensed for use with CFXM 7.
The biggest obstacle is that Macromedia hasn't done a great job describing how to use the WebCharts3D designer and how those features map up to the internal CFMX syntax. There are a lot of differences in nomenclature between the two, and this makes it a bit of a pain to try to map what attributes of the CFCHART series of tags map up to the internal WebCharts3D XML style sheet.
After playing around with CFCHART for a few days, I found the best way to really learn the capabilities of what you can do w/CFCHART was to use the WebCharts3D v5.0 Enterprise Edition designer. In your CFusionMX7\charting folder you'll find a batch file called "webcharts.bat" Run this file to load the WebCharts3D designer.
There's a lot of stuff in this designer, but I did find it particularly intuitive—especially when trying to figure out what changes I needed to make to my CF tags to get the changes to appear. Well, quite frankly this is because a lot of the functionality isn't available via the the CF tag syntax, but instead would require you to use the "style" attribute on the <cfchart /> tag in order to get the exact visual effects you want.
What I found most useful was to actually load up a default new chart (just to get some sample data) and then load in the base ColdFusion style sheet and start playing from there. This gives you the ability to really see how your changes to the default style sheet affect CFMX's output.
To load the default style sheet, go to the "Xml Style" tab and click the "Load" button. Browse to your "CFusionMX7\charting\styles\" folder and load the "default.xml" file. Next, click the "Apply" button. Now, I'd recommend loading the CFusionMX7\charting\styles\default.xml file in a text editor so you can quickly compare the changes you make in the designer to the original syntax in the file.
Go back to the "Design" tab and view the chart. I'd recommend turning on "Expert Mode" (go to File > Expert Mode > on) to get the full set of features available. Using the Property/Value pairs in the right-hand column make a change and go back to the "Xml Style" tab to compare the changes. If you come up with a style you like, click the "Save" button and save the style to your drive. If you save it to your "CFusionMX7\charting\styles\" folder, you'll be able to load it by just calling <cfchart style="fileNameWithNoXmlExtension" />. You can also save the style sheet to a custom folder where you could store all your Xml Style sheets. You can then use a relative/absolute path in the "style" attribute in the <cfchart /> tag to load your custom style sheet.
You can also change modify the default/base style sheet templates that Macromedia includes with CFMX 7. I'd definitely recommend backing up the originals and you'll need to remember to move your modified templates if you move servers or upgrade—otherwise the changes will be lost.
Also, look through the Chart Gallery (from Design tab, go to "File > New") as a way to load a chart that looks close to what you want. Always go back and look at your Xml Style sheet. After a while you'll start to see how the CFCHART tags match up to the Xml Style syntax. It'll take some playing around, but it should be helpful.
I'll post some other more specific tips soon. One of my biggest complaints about CFMX 7 was how aggressive it is with hiding labels on the X-axis. By default there has to be a lot of space between hortizontal bar charts for each X-axis label to show up. Unfortunately, you can't change this from <cfchart />, but you can modify your base Xml Style sheet (or create your own) to get the effect you want. I'll blog about that shortly.
Hopefully you find this pseudo-tutorial useful.
9 Comments
Comments for this entry have been disabled.