chrowe/pipe1.html

## pipe1.html

<!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>

## pipe2.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>

	<!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>