Customize CFMX's 7 CFCHART Features Using WebCharts3D Designer

Posted by Dan on Sep 23, 2005 @ 11:10 AM

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.

Categories: HTML/ColdFusion


  • Keep it coming... I'm working on a project that will need CFMX7 charts in the next few months... I'll be needing all the help I can get, including samples and tutorials... maybe an article in CFDJ?
  • Michael,

    Make sure to check back. I'll be blogging some more stuff soon.
  • One of the things that prevents us from using it is that there is no way to control the distance between exploded pie slices!!! It's always the same, no matter what the size of the chart image. We even went so far as to open a case with WebCharts themselves, and they wanted to _charge_ us to add that feature to the engine since it does not currently exist.
  • Hey - just noticed you show email addresses on comments if you don't inlcude a url. You may want to start hiding those so the harvesters don't start spamming us!
  • Hiya dude, I dont know about you, but after about a month playing with this tag and the tool to make sytles and all that jazz, I could not produce a chart like this but so if u could give it a try and get it right, please show us all since i am sure other like myself need this help.
  • Kowen,

    You should used stacked to allow you to layer the diffrent datasets into your line Graph then create three chartseries each with the data for each line and with color values that match your graph. shoudl be easy
  • I have a problem with spaces between my bars in cfchart. Any idea how to delete the spaces ?
  • Is there any way to do a multi-stacked cfchart. example would use this data


    so basically what I need to do is have the x-axis have the date then have a line for each group showing total tickets and then on that line show a stack of days it took to close them.

    Top left chart is what I'm trying todo with cfchart.
  • Great article. I'm trying to run a bar graph, and put the actual value of the bar onto each bar. I haven't seen that done, and can't seem to locate this. Thoughts?

Add Comment

Leave this field empty