Skip to content

Instantly share code, notes, and snippets.

@chrowe
Last active August 29, 2015 14:16
Show Gist options
  • Save chrowe/b5277b238eb629faed11 to your computer and use it in GitHub Desktop.
Save chrowe/b5277b238eb629faed11 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<!-- EXTERNAL LIBS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<!-- EXAMPLE SCRIPT -->
<script>
// onload callback
function drawChart() {
var public_key = '9JjO6ZzQggFKmXLrZz7n';
// JSONP request
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {page: 0},
dataType: 'jsonp',
}).done(function (results) {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'New Garn');
$.each(results, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.temp * 9 / 5 + 32)
]);
});
var chart = new google.visualization.LineChart($('#chart').get(0));
chart.draw(data, {
title: 'Garn OPK '
});
});
}
// load chart lib
google.load('visualization', '1', {
packages: ['corechart']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart" style="width: 100%;"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Fido</title>
<style>
#dashboard_div {
}
#line_div {
}
#control_div {
}
#table_div {
margin-left: auto;
margin-right: auto;
width: 250px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages : ['controls'] } );
google.setOnLoadCallback(createTable);
function createTable() {
// Create the dataset (DataTable)
var public_key = '9JjO6ZzQggFKmXLrZz7n';
// JSONP request
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {page: 0},
dataType: 'jsonp',
}).done(function (results) {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'New Garn');
$.each(results, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.temp * 9 / 5 + 32)
]);
});
// Create a dashboard.
var dash_container = document.getElementById('dashboard_div'),
myDashboard = new google.visualization.Dashboard(dash_container);
// Create a date range slider
var myDateSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': {
'filterColumnLabel': 'Time'
}
});
// Table visualization
var myTable = new google.visualization.ChartWrapper({
'chartType' : 'Table',
'containerId' : 'table_div'
});
// Bind myTable to the dashboard, and to the controls
// this will make sure our table is update when our date changes
myDashboard.bind(myDateSlider, myTable);
// Line chart visualization
var myLine = new google.visualization.ChartWrapper({
'chartType' : 'LineChart',
'containerId' : 'line_div',
});
// Bind myLine to the dashboard, and to the controls
// this will make sure our line chart is update when our date changes
myDashboard.bind(myDateSlider, myLine );
myDashboard.draw(data);
});
}
</script>
</head>
<body>
<div id="dashboard_div">
<div id="line_div" style="height: 500px; border: 1">><!-- Line chart renders here --></div>
<div id="control_div" style="height: 100px;"><!-- Controls renders here --></div>
<div id="table_div"><!-- Table renders here --></div>
</div>
</body>
</html>
@chrowe
Copy link
Author

chrowe commented Mar 24, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment