Last active
August 29, 2015 14:08
-
-
Save srayhan/cdf8e3595bfed51a6914 to your computer and use it in GitHub Desktop.
Basic Google Chart Wrapper in Coffee Script
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class @Chart | |
constructor: (@data, @options) -> | |
google.setOnLoadCallback(this.drawCharts) | |
drawCharts: => | |
table = google.visualization.arrayToDataTable(@data) | |
options = $.extend(true, { | |
title: 'Weekly Trends', | |
explorer: { axis: 'horizontal' }, | |
legend: 'top', | |
hAxis: {'title': 'date', 'format': 'MMM d', 'textStyle': {'fontSize': '8', color: 'white'}, 'showTextEvery': 2}, | |
vAxis: {'title': '', 'textStyle': {'fontSize': '8', color: 'white'}}, | |
backgroundColor: 'none', | |
'pointSize': 3 | |
}, @options) | |
@chart.draw(table, options) | |
class @LineChart extends @Chart | |
constructor: (@data, @options) -> | |
super | |
drawCharts: => | |
@chart = new google.visualization.LineChart(document.getElementById('line-chart')) | |
super | |
class @StackedBarChart extends @Chart | |
constructor: (@data, @options) -> | |
@options['isStacked'] = true | |
super | |
drawCharts: => | |
@chart = new google.visualization.ColumnChart(document.getElementById('bar-chart')) | |
super |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This encapsulates google chart API for drawing basic line and stacked bar chart. You can easily extend the base chart class to other types. These charts expect a placeholder element designated by an id ('line-chart' or 'bar-chart') to insert the chart on the page. It also expects the data in a JSON array. You can initialize a chart like
var linechart = new LineChart(linechartdata, {vAxis: { title: 'My Chart'}});
linechartData = [['date', 'data'],
['12/01/2014', 10].
.....]
Oh, don't forget to load the Google chart api before you create a chart.
google.load('visualization', '1', {'packages':['corechart','geochart','table']});