A few blogs have reported this over the weekend, but the Big G (as I like to call Google) has released a new charting API. The API lets you create charts simply by constructing a URL. Why bother when we have charts in ColdFusion already?
Well first off - I think the Flash charts in ColdFusion looks real swell. But you can't always use Flash. What if you want to embed a chart in a PDF? CFCHART lets you output PNG or JPG, but frankly, these versions look pretty bad. Check this screen shot which has both a Flash and PNG version side by side:
As you can see - the text is especially bad when compared to the Flash version. Now compare this to a Google version (and this is a 'live' example of the API, right click on the chart to see the URL):
The second reason you may wish to use the Google charts is the chart types. Now a lot of folks don't know that ColdFusion has more chart types then documented. If you use the Java application webcharts.bat, you can play with other types, and modify the display more than what you have available via cfchart. Google supports less types than ColdFusion does, but supports types not available in ColdFusion, like Venn diagrams.
You are limited to 50000 API requests per day, but don't forget that the built in ColdFusion function, imageNew(), lets you specify a URL for the source. You could use this to suck down and cache the Google chart.
Using the Google Chart API is a bit complex. Your data has to be remappped to line up correctly on the charts. Google offers 3 ways of doing so - and includes some sample JavaScript code. I've rewritten their JS code into CF Script, and made it a bit easier (you don't need to know your max data before hand). I'll paste that code into the very end of the blog entry.
You also have to spend a bit more time thinking about your data. So for example - imagine you want labels for your values. Imagine your data is sales figures that range from 20k to 100k or so. So what should your labels be? 25/50/75/100? 0/50/100? Google doesn't help you here. You have to figure out what labels, and how many, you want to display. It certainly isn't impossible, but it does mean a bit more work on your side.
My simpleEncode UDF - based on Google's original work:
<cfscript>
function simpleEncode(data) {
var maxdata = 0;
var i = 0;
var currentvalue = "";
var str = "s:";
var simpleEncoding = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var thepos = "";
var thechar = "";
for(i=1;i <= arrayLen(data); i++) {
if(data[i] gt maxdata) maxdata = data[i];
}
for(i=1; i <= arrayLen(data); i++) {
currentvalue = data[i];
if (isNumeric(currentValue) && currentValue >= 0) {
thepos = round((len(simpleEncoding)-1) * currentvalue/maxdata);
thechar = mid(simpleEncoding,thepos+1,1);
str &= thechar;
} else {
str &= "_";
}
}
return str;
}
</cfscript>
Archived Comments
Nice find Ray! Could be a good alternative to cfchart for me
Although I haven't done it yet, CF8 allows flash charts to be embedded into a pdf (cfdocument).
I believe that is a document mistake. I remember trying it during my blog posts on CF8 PDF stuff and it did not work. (Again, I "believe". Call it 90% certain.)
A good reason NOT to use cfchart indeed.
From your 3 examples I can tell that Google's chart does indeed apply X coordinate labels to all bars, is this because the width is larger, or in fact is better than CF by NOT making those labels disappear?
This thing is great!
Here's my meme-friendly attempt at it: http://tinyurl.com/2j227d
Raul, I'm a bit confused by your q. Are you asking how it applied the labels for the xaxis? I set them. I also set the bar width. Why does CF 'hide' labels? It does the best it can I guess with the width. I set the width of my chart until it was wide enough to hold it all. The Google charts definitely require you to work with them a bit more.
Yeah, what I meant was, since CF tries to fit it (if it doesnt succeed it will hide it) will google do this as well? or will they fit in the label doing whatever it takes? (because when the charts are totally dynamic, manually setting the width and height is not that good an idea (I think)
No, if things are tight, text will overwrite each other. I had to play with the total width and bar width a bit. Then again, I'd rather have it all show up then some randomly drop off. I've never liked that about cfchart.
I've been tinkering with the Google Chart API for a Vista gadget that I've made for tracking download quota usage for my ISP... It seems to work great, although it doesn't include as much detail as I'd like, for example values next to each data item on the chart.
Here's a sample screeny of how I'm currently using it:
http://img142.imageshack.us...
Great for apps where ColdFusion can't be used :)