HOME
Andrew Schwabe's Blog : charting

CF United 2008 Presentation Files

Here are the presentation files and sample flex apps from my presentation on "Charting with CF and Flex" on Friday June 20, 2008.

RIA328_Charting_with_CF_and_Flex.zip (5.5M)

Google Chart API

From the incredible minds at Google :)

http://code.google.com/apis/chart/

This impressive little library lets you generate PNG chart files from a single URL request string.  Since people typically need to pass lots and lots of data for charting, they came up with a really creative way to compress the values, and provide a javascript snippet for automating the process.

So the nifty chart you see to the right is a "hello world" app using their API.  It ultimately comes down to a simple URL request of:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Quite impressive and easy to use!

While this doesn't provide the stellar interactivity and depth of integration that Flex charts do, it certainly provides a way to do nice looking charts with a quick turn-around. 

According to their docs, you can freely use this so long as you don't regularly exceed the 50,000 hits per day limit at which point they may block you.  I think most of us will not be hitting it quite this much.

Some samples:


Using JFreeChart with ColdFusion

This was originally posted in Christian Cantrell's blog.

Well, your post just helped me figure out a long time nagging problem. I have been working on a CF wrapper for JFreeChart to generate on-the-fly charts, and have been stumped with corrupted output, until I saw your fix about the double getResponse() method calls. With that change, all works great!

For those who don't understand WHY you might need to do this, here is sampe code that creates a bar chart on-the-fly (no caching on the file system) and outputs directly to the browser a JPEG image (or a PNG with incredible quality!):

<!--- first generate some data --->
barDataset = CreateObject("java", "org.jfree.data.category.DefaultCategoryDataset");
Randomize(numberformat(timeformat(now(),"ss")));
rval = int(randrange(1,500));
barDataset.setValue(numberformat(rval), "2001", "Q1");
rval = int(randrange(1,500));
barDataset.setValue(numberformat(rval), "2001", "Q2");
rval = int(randrange(1,500));
barDataset.setValue(numberformat(rval), "2001", "Q3");
rval = int(randrange(1,500));
barDataset.setValue(numberformat(rval), "2001", "Q4");
rval = int(randrange(1,500));
barDataset.setValue(numberformat(rval), "2002", "Q1");
rval = int(randrange(1,500));
barDataset.setValue(numberformat(rval), "2002", "Q2");
rval = int(randrange(1,500));
barDataset.setValue(numberformat(rval), "2002", "Q3");
rval = int(randrange(1,500)); barDataset.setValue(numberformat(rval), "2002", "Q4");

<!--- create the chart objects --->
chart = CreateObject("java", "org.jfree.chart.JFreeChart");
chartfactory = CreateObject("java", "org.jfree.chart.ChartFactory");
chartorient = CreateObject("java", "org.jfree.chart.plot.PlotOrientation");
chartutil = CreateObject("java", "org.jfree.chart.ChartUtilities");

<!--- create our chart --->
chart = chartfactory.createBarChart3D ("Sample Bar Chart", "Category", "Value", barDataset, chartorient.VERTICAL, true, true, true);

<!--- MAGICALLY get the correct response object... --->
response = getPageContext().getResponse().getResponse();
response.setContentType("image/jpeg");

<!--- write chart directly to output stream --->
chartutil.writeChartAsJPEG(response.getOutputStream(),
   100, // jpeg quality 0-100
   chart, // chart object
   500, // width
   300); // height

response.flush();
response.close();

If anybody else needs help with the above code, email me.

cheers