Skip to content

Instantly share code, notes, and snippets.

@alexeiz

alexeiz/gcharts.html

Created March 20, 2013 06:00
Show Gist options
  • Save alexeiz/5202629 to your computer and use it in GitHub Desktop.
Save alexeiz/5202629 to your computer and use it in GitHub Desktop.
Download ZIP
An example of using Google Chart Tools from CoffeeScript. This is a self-contained html page that displays a table and a column chart. It uses coffeescript code to prepare and display the data. The code is translated into js on the fly in the browser.
Raw
gcharts.html
<html>
<head>
<title>CoffeeScript charts</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.load("visualization", "1", {packages:["table"]});
</script>
<script type="text/coffeescript">
window.rawdata =
[['Year', 'Sales', 'Expenses']
['2004', 1000, 400]
['2005', 1170, 460]
['2006', 660, 1120]
['2007', 1030, 540]]
</script>
<script type="text/coffeescript">
drawChart = (data) ->
chart = new google.visualization.ColumnChart(document.getElementById 'chart_div')
chart.draw data,
title: 'Company Performance'
hAxis:
title: 'Year'
titleTextStyle:
color: 'red'
drawTable = (data) ->
table = new google.visualization.Table(document.getElementById 'table_div')
table.draw data
data = google.visualization.arrayToDataTable window.rawdata
google.setOnLoadCallback ->
drawTable data
drawChart data
</script>
<script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
</head>
<body>
<div id="table_div" style="width: 900px;"></div>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment