Last active
August 29, 2015 14:16
-
-
Save chrowe/b5277b238eb629faed11 to your computer and use it in GitHub Desktop.
This file contains 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
| <!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> |
This file contains 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
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
pipe2 is based on https://blog.smalldo.gs/2013/04/google-chart-tools-walkthrough-part-3/