Wednesday, January 13, 2010

Multiple Data Sets on Line Charts with Google Chart Plugin for Grails

I'm working on a Grails project and we're using the very slick Google Chart Plugin to handle the charting aspects of the project. If you aren't familiar with the Google Chart API be sure and check it out; even if you aren't using Grails it's a really simple way to add charting to any application. You just call a URL on Google and in return you get a very nice looking chart, and it supports just about any type of chart you can think of. Cool stuff.

One of my tasks today was to get a line chart up and running, and I was having a bit of trouble getting multiple datasets working on a line chart when using two separate Groovy lists. The solution turned out to be simple but since it took a bit of head banging to get there I figured I'd share in case others run into this.

The data I have is simple integers in two Groovy lists (let's call them dataSetA and dataSetB), and in my controller I'm putting the lists in the model for the view so they're already available. Here's the syntax for a simple line chart using the Google Chart Plugin with one data set:

<g:lineChart
    size="[400,300]"
    colors="['00ff00','ff0000']"
    type='lc'
    legend="['Data Set A', 'Data Set B']"
    fill="bg,s,efefef"
    dataType='simple'
    axes="x,y"
    data="${dataSetA}" />

This worked fine. To add a second data set, you simply separate the two data sets with a comma, so you'd think this would work (or at least I did):

<g:lineChart
    size="[400,300]"
    colors="['00ff00','ff0000']"
    type='lc'
    legend="['Data Set A', 'Data Set B']"
    fill="bg,s,efefef"
    dataType='simple'
    axes="x,y"
    data="${dataSetA},${dataSetB}" />

For some reason the lineChart tag doesn't like that syntax. I'll save you the various things I tried to get the data into the right format so I could pass the lineChart tag a single attribute and just give you the solution. Basically you just create a new list using the two existing lists as its elements:

<% def combinedDataSets = [ dataSetA, dataSetB ] %>

<g:lineChart
    size="[400,300]"
    colors="['00ff00','ff0000']"
    type='lc'
    legend="['Data Set A', 'Data Set B']"
    fill="bg,s,efefef"
    dataType='simple'
    axes="x,y"
    data="${combinedDataSets}" />

As I said, very simple fix but it took me a while to get there. Be nice, I'm still kind of new to Grails. ;-)

Hope that helps someone else who may run into this.

2 comments:

Jason Blum said...

Hey I found that live chart sandbox I asked you about - didn't realize it was right there under my nose on the Google chart API page: http://code.google.com/apis/chart/docs/chart_playground.html Very handy.

Jason Blum said...

Ah even better: http://dexautomation.com/googlechartgenerator.php