Drawing Charts in Grails

Recently, I encountered a problem with using charts in a Grails web application. At first, I was thinking about using well-known Java libraries, such as JFreeChart. JFreeChart has a nice look, nicely written documentation, and is pretty simple to use.

But I was wondering about any Grails plugins that might be a better fit for the needs of our web application. The first one I found—the Google Chart Plugin—seemed pretty popular, but it lacked good documentation. Actually, what this plugin does is build a URL that leads to a chart generated by Google’s chart service. So if you’re fine using an external web service in your application, you could use the Google Chart API. And if it’s not, you should probably use a Java library, or the JFreeChart Eastwood plug-in for Grails, that uses JFreeChart for emulating the look of Google charts.

If not, you should probably use a Java library or the JFreeChart Eastwood plugin for Grails, which uses JFreeChart to emulate the look of Google charts.

But the simpler and faster way to build a chart is actually using the Google Chart API. The way it works is downloading the AJAX API and the visualization library, then it processes the received data and builds the chart within the browser using SVG or VML.
It has a lot of different types of charts, which are pretty flexible and easy to customize. The only reason why I can’t say that this is the best solution to use in charts of a web application is the need to download the API and library every time the page loads, so it may slow down the work of the web application on really slow connections.

Eventually I decided to use Google Chart API, and here is some code, which draws an area chart with a date showing on the horizontal axis, it shows how simple it is to draw a charts with this tool.

<script type='text/javascript'>  
  // Load the Visualization API and the area chart package.  
  google.load('visualization', '1', {packages:['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  // Callback that creates and populates a data table,
  // instantiates the area chart, passes in the data and
  // draws it.
  function drawChart() {
    //Creates data table with the data passed from the Grails controller.
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Subscribers');
    //List of the values to show.
    var subs = ${subscribers};
    //Start date of chart's horizontal axis.
    var date = new Date(${currentMonthDate.year + 1900}, ${currentMonthDate.month}, ${currentMonthDate.date});
    for (var i = 0; i < subs.length; i++) {
      data.addRow([new Date(date.getTime() + i * 86400000), subs[i]])
    }
    //Instantiate and draw a chart to the 'chart_div' div.
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 600, height: 300, backgroundColor: '#ffffff', legend: 'top'});
  }
</script>

<script type='text/javascript'>  
  // Load the Visualization API and the area chart package.  
  google.load('visualization', '1', {packages:['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  // Callback that creates and populates a data table,
  // instantiates the area chart, passes in the data and
  // draws it.
  function drawChart() {
    //Creates data table with the data passed from the Grails controller.
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Subscribers');
    //List of the values to show.
    var subs = ${subscribers};
    //Start date of chart's horizontal axis.
    var date = new Date(${currentMonthDate.year + 1900}, ${currentMonthDate.month}, ${currentMonthDate.date});
    for (var i = 0; i < subs.length; i++) {
      data.addRow([new Date(date.getTime() + i * 86400000), subs[i]])
    }
    //Instantiate and draw a chart to the 'chart_div' div.
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 600, height: 300, backgroundColor: '#ffffff', legend: 'top'});
  }
</script>