viewing paste Unknown #21598 | Text

Posted on the
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free Responsive Templates
http://www.free-responsive-templates.com
Released for free under a Creative Commons Attribution 3.0 Unported License (CC BY 3.0)
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prior Prime Dashboard</title>
<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- 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>
 
    <script>
      // onload callback
      function drawChart() {
        var public_key = 'G2pRD1LNAqirE1JwYg1A';
        // JSONP request
        var jsonData = $.ajax({
                url: 'https://data.sparkfun.com/output/' + public_key + '.json',
                data: {page: 1},
                dataType: 'jsonp',
        }).done(function (results) {
          var data = new google.visualization.DataTable();
          data.addColumn('datetime', 'Time');
          data.addColumn('number', 'Temperature');
          $.each(results, function (i, row) {
            data.addRow([
              (new Date(row.timestamp)),
              parseFloat(row.analog_temperature),
             ]);
          });
          var chart = new google.visualization.LineChart($('#chart').get(0));
          chart.draw(data, {
            title: 'Autoclave Temperature',
            curveType: 'function',
            legend: { position: 'bottom' }
          });
 
        });
 
        var jsonData2 = $.ajax({
                url: 'https://data.sparkfun.com/output/' + public_key + '.json',
                data: {'gte' :{'timestamp' : 'now - 6 hours'}},
                dataType: 'jsonp',
        }).done(function (results) {
          var data2 = new google.visualization.DataTable();
          data2.addColumn('datetime', 'Time');
          data2.addColumn('number', 'Analog Voltage');
         
          $.each(results, function (i, row) {
            data2.addRow([
              (new Date(row.timestamp)),
             parseFloat(row.analog_v1),
            ]);
          });
          var chart2 = new google.visualization.LineChart($('#chart2').get(0));
          chart2.draw(data2, {
            title: 'Autoclave Analog Voltage 1',
            curveType: 'function',
            legend: { position: 'bottom' }
          });
         
        });
      }
               
      // load chart lib
      google.load('visualization', '1', {
        packages: ['corechart']
      });
      // call drawChart once google charts is loaded
      google.setOnLoadCallback(drawChart);
    </script>
 
</head>
<body>
<!-- begin #header -->
<div id="header">
        <div id="navcontainer">
        <div id="navcontainerBox">
            <h1><img src="http://www.priorclave.co.uk/a/img/global/logo.png"> Dashboard</h1>
                <ul id="navlist">
                <li id="active"><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
                <li><a href="#">four</a></li>
                <li><a href="#">five</a></li>
            </ul>
        </div>
    </div>
    <div class="girlContainer">
        <h1>Statistics</h1>
        <form>
           <table style="width:75%">
            <tr>
                <td>Autoclave Name:</td>
                <td><input type="text" name="AutoclaveName" value="Sea Cucumber" size="20" readonly></td>  
            </tr>
 
            <tr>
                <td>Cycle Count:</td>
                <td><input type="text" name="CycleCount" value="345" size="20" readonly></td>      
            </tr>
 
            <tr>
                <td>Average Cycle Water Consumption: </td>
                <td><input type="text" name="AverageWater" value="0" size="20" readonly>Gallons / Cylce</td>
            </tr>
            <tr>
                <td>Average Cycle Electricity Consumption:</td>
                <td><input type="text" name="AverageElectricity" value="22.3" size="20" readonly>Watts / cycle</td>
            </tr>
            <tr>
                <td>Idle Water Consumption: </td>
                <td><input type="text" name="IdleWater" value="1.2345" size="20" readonly>Gallons</td>
            </tr>
            <tr>
                <td>Idle Electricity Consumption:</td>
                <td><input type="text" name="IdleElectricty" value="12" size="20" readonly> Watts</td>
            </tr>
            <tr>
                <td> Current Machine Status:</td>
                <td><input type="text" name="Status" value="Idle" size="20" readonly></td>
            </tr>
            <tr>
                <td>Faults:</td>
                <td><input type="text" name="Faulys" value="None" size="20" readonly></td>
            </tr>
            <tr>
                <td>Select Cycle To Graph</td>
                <td>
                    <select name="Cycles">
                    <option value="C1">Cycle 1</option>
                    <option value="C2">Cycle 2</option>
                    <option value="C3">Cycle 3</option>
                    <option value="C4">Cycle 4</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
 
    </div>
        <div class="clearer"></div>
    </div>
</div>
<!-- end #header -->
<!-- begin #container -->
<div id="container">
    <!-- begin #mainContent -->
    <div id="mainContent">
        <h2>Graph One</h2>
        <p>
        <div id="chart" style="width: 100%;"></div>
        <h2>Graph Two</h2>
        <p>
        <div id="chart2" style="width: 100%;"></div>
        </p>
        <div class="clearer"></div>
    </div>
    <!-- end #mainContent -->
</div>
<!-- end #container -->
</div>
<!-- end #container -->
 
<!-- begin #footer -->
<div id="footer">
    <p>
        Copyright &copy; Josh Corp. All rights reserved. Designed by <a href="http://www.free-responsive-templates.com" title="free responsive templates">Free Responsive Templates</a>
    </p>
</div>
<!-- end #footer -->
</body>
</html>
 
Viewed 637 times, submitted by unknown.