Skip to content

Instantly share code, notes, and snippets.

@rdmurphy
Created December 7, 2011 20:40
Show Gist options
  • Select an option

  • Save rdmurphy/1444537 to your computer and use it in GitHub Desktop.

Select an option

Save rdmurphy/1444537 to your computer and use it in GitHub Desktop.
A working version of a data formatter using the Google Charts API.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>cargochart</title>
</head>
<body>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script>
function drawViz() {
var data;
var baseURL = "http://www.google.com/fusiontables/gvizdata?tq=";
var queryURL = encodeURIComponent("SELECT Quarter, col10 as '2011', col11 as '2010', col12 as '2009' FROM 2365322");
var query = new google.visualization.Query(baseURL + queryURL);
query.send(function(response) {
data = response.getDataTable();
var formatter = new google.visualization.NumberFormat({
prefix: '$',
fractionDigits: 0
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
google.visualization.drawChart({
"containerId": "visualization_div3",
"dataTable": data,
"refreshInterval": 5,
"chartType": "BarChart",
"options": {
"colors": ['#990000', '#0072ac', '#000077'],
"title":"",
"vAxis": {"title": "Quarter"},
"hAxis": {"title": "Sales ($)", "format": "$#,###"},
}
});
});
}
google.setOnLoadCallback(drawViz);
</script>
<style="border: 0pt none ; font-family: Arial;">
<div id="visualization_div3" style="width: 720px; height: 350px; margin-top: -25px; margin-left: -41px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment