Complex Charting in ColdFusion with WebCharts
I did a session a couple of weeks back at RIAUnleashed in Boston and one of the topics I covered was about leveraging more of the WebCharts3D charting capabilities using Java. The point of it was to illustrate how easy it can be to reach down one level into the underlying technologies used in ColdFusion, all you need to know is where they are.
WebCharts3D is the underlying charting engine built into ColdFusion. The GreenPoint site has more information about the technology here.
You may not know this, but ColdFusion comes with a client application for designing WebCharts3d Projects. All you need to do is go to run C:\ColdFusion\charting\webcharts.bat (change as appropriate for your operating system). They have also made a WebCharts Eclipse Plug-in freely available if you are interested in that.
Running these will give you a chart type chooser that will look something like this:
Select your type and you will get a great utility to help you design your chart that will look a bit like this:
Once you have your chart designed, this utility has tabs for getting back the format of the XML needed "style" the chart, the XML needed to populate the chart, and even the java code needed to make it work for a jsp and even how to make it work in an applet, Swing, or SWT app. The jsp code needs a couple tweaks to make it work for CF.
The Style file that was generated for you will look like:
<frameChart>
<yAxis scaleMin="0"/>
<legend isVisible="false"/>
<elements>
<series index="1" shape="Area">
<morph morph="Grow"/>
</series>
</elements>
<decoration style="FrameClock" foreColor="#0080FF"/>
<paint isVertical="true"/>
<insets left="5" top="10" right="10" bottom="5"/>
</frameChart>
The data file will look like:
<XML type="default">
<COL>2009</COL>
<COL>2010</COL>
<COL>2011</COL>
<COL>2012</COL>
<COL>2013</COL>
<ROW col0="100.0" col1="200.0" col2="100.0" col3="180.0" col4="200.0"/>
<ROW col0="150.0" col1="300.0" col2="250.0" col3="230.0" col4="250.0"/>
</XML>
And then the code to execute this in ColdFusion will look like:
<cfchart chartwidth="1" chartheight="1"/>
<cfscript>
webCharts3DServer = createObject("java","com.gp.api.jsp.MxServerComponent").getDefaultInstance(GetPageContext().getServletContext());
myChart = webCharts3DServer.newImageSpec();
myChart.width = 320 ;
myChart.height= 300 ;
myChart.type = "PNG" ;
myChart.loadStyles(expandpath('./webchartStyle.xml'));
myChart.model= fileread(expandpath('./webchartModel.xml'));
writeoutput(webCharts3DServer.getImageTag(myChart,"/CFIDE/GraphData.cfm?graphCache=wc50&graphID="));
</cfscript>
Do that and you get a sexy new chart! Stock full of rollover states and all the polish you care to put on it. :)
This probably looks more complicated than it is. From a developer perspective, use a tool to design any chart type you want from the WebCharts charting set (and there are many!), and then figure out how to populate some XML. Add 7 lines of CF code (with only one of them actually creating a java object), and you're done!!!
Now you can create Bubble, Ring, Scatter, Gantt, Gauge, Radar, Polar, Star, Stock, Histogram, Regression, and Doughnut Charts, and you can create Maps and even Heatmaps. The charting world is your oyster!
Easy peasy.
Happy charting!
Jason
Great article! Does webcharts3d also allow for multiple series and value axes _and_ let users zoom in?
Marc
Can I zoom in on the chart, show multiple series and have a value axis with each serie?
Marc