Last updated by ealax 3 years ago

Google Chart Chart Plugin

Author: James Williams (james.l.williams AT gmail DOT com) Contributer: Zan Thrash (zanthrash AT gmail DOT com) This is a plugin for Google Chart API.

  • Supports pie charts, bar charts, line charts, venn diagrams, scatter plots, maps, text data encoding with scaling.
  • Seeks to fully implement Google's spec, http://code.google.com/apis/chart/
  • Builder to create Google Chart URLs in domain or service layer.
  • Recently added:QR codes

Setup

To install

grails install-plugin google-chart
After install test out the charts by going to this page:
http://localhost:8080/app/plugins/google-chart-<version>/index.gsp

Conventions

Generally if the required attribute can take more than 4 objects/parameters, it is expected to be passed as an ArrayList. For example, assuming values3, colors, and labels are ArrayLists, this would be the tag to make a pie chart.

<g:pieChart title='Sample Pie Chart' colors="${colors}"
      labels="${labels}" fill="${'bg,s,efefef'}" dataType='simple' data='${values3}' />

Specifying Colors for Bar Charts

The API allows you to specify colors per dataset for bar charts and per value. To specify per dataset, pass an ArrayList:

<g:barChart title='Sample Bar Chart' size="${[200,200]}" colors="${['FF0000','00ff00','0000ff']}" … />
To specify per value, pass a pipe-separated string:
<g:barChart title='Sample Bar Chart' size="${[200,200]}" colors="FF0000|00ff00|0000ff" … />

Builder Example

def chart = new GoogleChartBuilder()
result = chart.lineChart{
  size(w:300, h:200)
  title{
      row('Joy vs. Pain')
  }
  data(encoding:'extended'){
      dataSet([1,18,200,87,1090,44,3999])
      dataSet([88,900,77,1,2998,4])
  }
  colors{
      color('66CC00')
      color('3399ff')
  }
  lineStyle(line1:[1,6,3])
  legend{
      label('Joy')
      label('Pain')
  }
  axis(left:(1..5).toList(), bottom:[])
  backgrounds{
      background{
          solid(color:'999999')
      }
      area{
          gradient(angle:45, start:'CCCCCC', end:'999999')
      }
  }
   markers{
      rangeMarker(type:'horizontal', color:'FF0000', start:0.75, end:0.25)
      rangeMarker(type:'vertical', color:'0000cc', start:0.7, end:0.71)
  }
}

Roadmap

  • Google Chart Designer work in progress