Created water.html

plots temperature wrt water depth and date
Doesn't have units when hovered over

api2/modifyData.py

@@ -94,15 +94,18 @@ def siteHandler(site):
 def instHandler(inst):
     return inst
 
-def symbolsHandler(site, symbols):
+def symbolsHandler(site, inst, symbols):
     translation = {}
 
-    if(site == 'aoss'):
+    if(site == 'aoss' and inst == 'tower'):
         translation = Util.aoss_translation
 
-    elif(site == 'mendota'):
+    elif(site == 'mendota' and inst == 'buoy'):
         translation = Util.buoy_translation
 
+    else:
+        return 404         
+
     returnList = []
 
     wind_speed = 0
@@ -404,7 +407,15 @@ def modifyData(fmt, begin, end, site, inst, symbols, interval, sep, callback):
         if(interval == -1):
             return 500
 
-    unpack = symbolsHandler(site, symbols)
+    unpack = symbolsHandler(site, inst, symbols)
+
+    if(not unpack[0]):
+        return 500
+
+    if(isinstance(unpack, int)):
+        if(unpack == 404):
+            return 404
+
     symbols = unpack[0]
     windSpeed = unpack[1]
     windDirection = unpack[2]

api2/server.py

@@ -84,6 +84,9 @@ def getData(fmt):
 
             if(data == 400):
                 return render_template('400.html', format=fmt), 400
+
+            if(data == 404):
+                return render_template('404.html'), 404    
         if(isinstance(data, str)):
             if(data == '400_stamp'):
                 return render_template("stamp_error.html")    
@@ -134,6 +137,22 @@ def getData(fmt):
 def meteorogram():
     return render_template('meteorogram.html')  
 
+#trying out dashboards using react, yo
+@app.route('/dash')
+def dash():
+    return render_template('dash.html')
+
+@app.route('/dash/tower')
+def aossDash():
+    return render_template('tower.html')
+
+@app.route('/dash/buoy')
+def buoyDash():
+    return render_template('buoy.html')
+
+
+
+
 if __name__ == '__main__':
     app.debug = True
     app.run('0.0.0.0')

api2/static/compGraphs.js

+//var reactPlotly = require('react-plotlyjs');
+
+//console.log(reactPlotly);
+
+console.log('here');
+
+//module.exports = function()
+  //              {
+    //                return 'test';
+      //          };    
\ No newline at end of file

api2/static/divs.css

+div#container {
+	width: 100%;
+}
+
+div#left {
+	width: 15%;
+	background: red;
+	float: left;
+}
+
+div#center {
+   width: 70%;
+   background: black;
+   float: left;
+}
+
+div#right {
+	width: 15%;
+	background: blue;
+	float: left;
+}
\ No newline at end of file

api2/static/test.js

+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+//var reactPlotly = require('react-plotlyjs');
+
+//console.log(reactPlotly);
+
+console.log('here');
+
+//module.exports = function()
+  //              {
+    //                return 'test';
+      //          };    
+},{}]},{},[1])
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2hvbWVicmV3L0NlbGxhci9udm0vMC4zMS4xL3YwLjEwLjQ1L2xpYi9ub2RlX21vZHVsZXMvYnJvd3NlcmlmeS9ub2RlX21vZHVsZXMvYnJvd3Nlci1wYWNrL19wcmVsdWRlLmpzIiwiY29tcEdyYXBocy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQ0FBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImdlbmVyYXRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gZSh0LG4scil7ZnVuY3Rpb24gcyhvLHUpe2lmKCFuW29dKXtpZighdFtvXSl7dmFyIGE9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtpZighdSYmYSlyZXR1cm4gYShvLCEwKTtpZihpKXJldHVybiBpKG8sITApO3ZhciBmPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIrbytcIidcIik7dGhyb3cgZi5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGZ9dmFyIGw9bltvXT17ZXhwb3J0czp7fX07dFtvXVswXS5jYWxsKGwuZXhwb3J0cyxmdW5jdGlvbihlKXt2YXIgbj10W29dWzFdW2VdO3JldHVybiBzKG4/bjplKX0sbCxsLmV4cG9ydHMsZSx0LG4scil9cmV0dXJuIG5bb10uZXhwb3J0c312YXIgaT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2Zvcih2YXIgbz0wO288ci5sZW5ndGg7bysrKXMocltvXSk7cmV0dXJuIHN9KSIsIi8vdmFyIHJlYWN0UGxvdGx5ID0gcmVxdWlyZSgncmVhY3QtcGxvdGx5anMnKTtcblxuLy9jb25zb2xlLmxvZyhyZWFjdFBsb3RseSk7XG5cbmNvbnNvbGUubG9nKCdoZXJlJyk7XG5cbi8vbW9kdWxlLmV4cG9ydHMgPSBmdW5jdGlvbigpXG4gIC8vICAgICAgICAgICAgICB7XG4gICAgLy8gICAgICAgICAgICAgICAgcmV0dXJuICd0ZXN0JztcbiAgICAgIC8vICAgICAgICAgIH07ICAgICJdfQ==

api2/templates/dash.html

+<!doctype html>
+<html>
+<head>
+      <meta charset="utf-8">
+      <title>QuickLook Demo Using Wind Depth Data</title>
+      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.css" type="text/css">
+      <link rel=stylesheet type=text/css href="{{ url_for('static', filename='divs.css') }}">
+</head>
+<body>
+
+<div id="container">
+ <div id="left">Left Stuff</div>
+ <div id="center">Middle Stuff</div>
+ <div id="right">Right Stuff</div>
+ <br style="clear: left;" />
+</div>
+
+
+<!-- Plotly.js -->
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+<!-- jQuery.js -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+
+<!-- Bootstrap -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script>
+
+<!-- jQueryUI.js -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.js"></script>
+
+<!-- Timepicker -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.js"></script>
+
+<!-- React -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
+<!-- ReactDOM -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
+
+<!-- TEST -->
+ <script type="text/javascript" href="{{ url_for('static', filename='test.js') }}"></script>
+
+
+<script type="text/javascript">
+
+
+</script>
+
+</body>
+</html>
\ No newline at end of file

api2/templates/meteorogram.html

@@ -182,6 +182,47 @@ function storeAndPlot(dataObj)
 	plotData(dates, temp, dewPt, pressure, wind_speed, wind_dir, accum_precip, solar_flux);
 }
 
+function getLay(varArray, precision)
+{
+    var min = Math.min.apply(null, varArray);
+    var max = Math.max.apply(null, varArray);
+
+    var range = [min, max];
+
+    var tickVals = getTickVals(min, max, precision);
+
+    return [range, tickVals];
+}
+
+function updateLayout()
+{
+    var plotDiv = document.getElementById('graph');
+    var data = plotDiv.data;
+
+    console.log('data', data);
+
+    //console.log('temp', data[0]['y']);
+    //console.log('dp', data[1]['y']);
+
+	//get min and max of temp and dewPt arrays
+	var tempMin = determineMin(data[0]['y'], data[1]['y']) - 1,
+	 tempMax = determineMax(data[0]['y'], data[1]['y']) + 1,
+
+    //get those tickvals in degrees C
+	tTickvals = getTickVals(tempMin, tempMax, 3),
+	CtickVal = getC(tTickvals, 3),
+
+	layout = {
+		'yaxis.range': [tempMin, tempMax],
+		'yaxis.tickvals': tTickvals,
+		'yaxis2.range': [tempMin, tempMax],
+		'yaxis2.tickText': CtickVal,
+		'yaxis2.tickvals': tTickvals,
+	};
+
+	Plotly.relayout(plotDiv, layout);
+}
+
 function main()
 {
     var status = localStorage.getItem('status');
@@ -207,44 +248,6 @@ function main()
 		            storeAndPlot(dataObj);
 		        }
 		    });	            
-
-		//for expert users
-		//if they know which types of data they want,
-		//their actions may get ahead of the interface
-		//this massive columns of ifs reverse that
-		if(!($('#temp').is(':checked')))
-		{
-			hideTemp();
-		}
-
-		if(!($('#pres').is(':checked')))
-		{
-			hidePres();
-		}
-
-		if(!($('#dir').is(':checked')))
-		{
-			hideDir();
-		}
-
-		if(!($('#speed').is(':checked')))
-		{
-			hideSpeed();
-		}
-
-		if(!($('#precip').is(':checked')))
-		{
-			hidePrecip();
-		}
-
-		if(!($('#flux').is(':checked')))
-		{
-			hideFlux();
-		}
-
-        //waiting for updates
-        //tell web server what our status is
-		localStorage.setItem("status", "update");
 	}	
 
     //web server sent information to the client
@@ -290,6 +293,9 @@ function main()
                         console.log(dataObj);
 					    updateLocal(dataObj);
 		                updateGraph();
+
+                        updateLayout();
+
 		                //console.log("updated");
 		                updateText();
 		            }
@@ -494,6 +500,44 @@ function main()
         localStorage.setItem("status", "static");
     } 
 
+    //for expert users
+		//if they know which types of data they want,
+		//their actions may get ahead of the interface
+		//this massive columns of ifs reverse that
+		if(!($('#temp').is(':checked')))
+		{
+			hideTemp();
+		}
+
+		if(!($('#pres').is(':checked')))
+		{
+			hidePres();
+		}
+
+		if(!($('#dir').is(':checked')))
+		{
+			hideDir();
+		}
+
+		if(!($('#speed').is(':checked')))
+		{
+			hideSpeed();
+		}
+
+		if(!($('#precip').is(':checked')))
+		{
+			hidePrecip();
+		}
+
+		if(!($('#flux').is(':checked')))
+		{
+			hideFlux();
+		}
+
+        //waiting for updates
+        //tell web server what our status is
+		localStorage.setItem("status", "update"); 
+
 	setTimeout(main, 3000);
 }
 

api2/templates/tower.html

+<!doctype html>
+<html>
+<head>
+		<meta charset="utf-8">
+		<title>QuickLook Demo Using Wind Depth Data</title>
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.css" type="text/css">
+</head>
+<body>
+
+<ul class="nav nav-tabs" id="tabs">
+</ul>	
+
+<div id="content"></div>
+
+<!-- Plotly.js -->
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+<!-- jQuery.js -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+
+<!-- Bootstrap -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script>
+
+<!-- jQueryUI.js -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.js"></script>
+
+<!-- Timepicker -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.js"></script>
+
+<!-- React -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
+<!-- ReactDOM -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
+
+<script type="text/javascript">
+    //component for tabs on top of page
+    var tabs = React.createClass({
+   	displayName: "tabs",
+
+   	render: function createTab() {
+   		console.log("in here");
+   		var link = React.createElement("a", {href: this.props.link}, this.props.children);
+
+         if(this.props.active == 1)
+         {
+            var listElt = React.createElement("li", {className: 'active'}, link);
+         }
+
+         else
+         {
+            var listElt = React.createElement("li", null, link);
+         }
+
+   		return listElt;
+   	}
+   });
+
+   ReactDOM.render(React.createElement(tabs, {link: '0.0.0.0:5000/dash/tower', active:1}, 'tower'), document.getElementById("tabs"));
+
+   //component for graphs
+   var graph = React.createClass({
+       render: function graph() {
+         var graphElt = React.createElement("div", {id: 'aoss meteorogram', style: {width: '1200px', height: '2000px'}}, null);
+         return graphElt;
+       }
+   });
+
+   ReactDOM.render(React.createElement(graph, null), document.getElementById('content'));
+
+   url = 'http://0.0.0.0:5000/data/jsonp?site=aoss&inst=tower&symbols=t:td:p:spd:dir:accum_precip:flux&begin=-03:00:00';
+
+function getC(tickvals, precision)
+{
+    tempTick = [];
+
+    for(var i = 0; i < tickvals.length; i++)
+   {
+      var newVal = (tickvals[i] * 5 /9) - 32;
+      tempTick.push(newVal.toFixed(precision));
+   }
+
+   return tempTick;
+}
+
+function getTickVals(min, max, precision)
+{
+   range = max - min;
+   tickvals = []
+
+   //create 4 tick values for the y axis
+   //ticks at min, max, and 2 points in between evenly spaced
+
+   for(var i = 0; i <= 3; i++)
+   {
+      var newVal = min + range * i/3;
+      tickvals.push(newVal.toFixed(precision));
+   }
+
+   return tickvals
+}
+
+function determineMin(temp, dewPt)
+{
+    min1 = Math.min.apply(null, temp);
+    min2 = Math.min.apply(null, dewPt);
+
+    return Math.min(min1, min2);
+}
+
+/**
+* The purpose of this method is to return the max value
+* of temp and dew point
+* @param temp - array of temp values
+* @param dewPt - array of dew point values
+* @return max of both arrays
+*/
+
+function determineMax(temp, dewPt)
+{
+    max1 = Math.max.apply(null, temp);
+    max2 = Math.max.apply(null, dewPt);
+
+    return Math.max(max1, max2);
+}
+
+   function plotData(dates, temp, dewPt, pressure, wind_speed, wind_dir, accum_precip, solar_flux)
+{
+    //create temp trace for graph
+   var tempObj =
+      { 
+         //has x axis of dates and y axis of temp values
+         x: dates,
+         y: temp,
+
+         //it's a scatter plot
+         type: 'scatter',
+
+         //legend labels trace as temperature
+         name: 'Temperature',
+
+            //the first plot trace doesn't need to be fixed 
+            //- automatically placed on first x and first y
+
+         //makes the text pop up when user hovers over
+         //text: createText(dates, temp, 'Temperature: ', ' Deg F', 3),
+         //hoverinfo: "text"
+      },
+
+      dewPtObj =
+      { 
+         //has x axis of dates and y axis of dew point values
+         x: dates,
+         y: dewPt,
+
+         //it's a scatter plot
+         type: 'scatter',
+
+         //legend labels trace as dew point
+         name: 'Dew Point',
+
+         //fix the trace to the first x axis and the second y-axis - see layout for more details
+         xaxis: 'x1',
+         yaxis: 'y2',
+
+         //makes the text pop up when user hovers over
+         //text: createText(dates, dewPt, 'Dew Point: ', ' Deg F', 3),
+         //hoverinfo: "text"
+      },
+
+        //get min and max of temp and dewPt arrays
+      min = determineMin(temp, dewPt) - 1,
+      max = determineMax(temp, dewPt) + 1,
+
+        //get those tickvals in degrees C
+      tickvals = getTickVals(min, max, 3),
+      CtickVal = getC(tickvals, 3),
+
+      wMin = Math.min.apply(null, wind_dir);
+      wMax = Math.max.apply(null, wind_dir);
+
+      windTickvals = getTickVals(wMin, wMax, 0);
+
+      console.log('wind_direction tick vals', windTickvals)
+
+
+       pressureObj = 
+       {
+         //has x axis of dates and y axis of pressure values
+         x: dates,
+         y: pressure,
+
+         //it's a scatter plot
+         type: 'scatter',
+
+         //legend labels trace as pressure
+         name: 'Pressure',
+
+         //fix the trace to the first x axis and the third y-axis - see layout for more details
+         xaxis: 'x1',
+         yaxis: 'y3',
+
+         //makes the text pop up when user hovers over
+         //text: createText(dates, pressure, 'Pressure: ', ' hPa', 1),
+         //hoverinfo: "text"
+       },
+
+       wind_speedObj = 
+       {
+         //has x axis of dates and y axis of wind speed values
+         x: dates,
+         y: wind_speed,
+
+         //it's a scatter plot
+         type: 'scatter',
+
+         //legend labels trace as wind speed
+         name: 'Wind Speed',
+
+         //fix the trace to the first x axis and fourth y axis - see layout for more details
+         xaxis: 'x1',
+         yaxis: 'y4',
+
+         //makes the text popup when user hovers over
+         //text: createText(dates, wind_speed, 'Wind Speed: ', ' m/s', 3),
+         //hoverinfo: "text"
+      },
+
+      wind_dirObj = 
+      {
+         //has x axis of dates and y axis of wind dir values
+         x: dates,
+         y: wind_dir,
+
+         //change  the trace from continuous to discrete
+         mode: 'markers',
+
+         //it's a scatter plot
+         type: 'scatter',
+
+         //legend labels trace as Wind Direction
+         name: 'Wind Direction',
+
+         //fix the trace to the first x axis and fifth y axis - see layout for more details
+         xaxis: 'x1',
+         yaxis: 'y5',
+
+         //makes the text popup when user hovers over
+         //text: createText(dates, wind_dir, 'Wind Direction: ', ' Deg',0),
+         //hoverinfo: "text"
+      },
+
+      accum_precipObj = 
+      {
+         //has x axis of dates and y axis of accumulated precipitation values
+         x: dates,
+         y: accum_precip,
+
+         //it's a scatter plot
+         type: 'scatter',
+
+         //legend labels trace as accumulated precipitation
+         name: 'Accumulated Precipitation',
+
+         //fix the trace to the first and sixth y axis - see layout for more details
+         xaxis: 'x1',
+         yaxis: 'y6',
+
+         //makes the text popup when user hovers over
+         //text: createText(dates, accum_precip, 'Accumulated Precipitation: ', ' mm', 2),
+         //hoverinfo: "text"
+
+      },
+
+      solar_fluxObj = 
+      {
+         //has x axis of dates and y axis of solar flux values
+         x: dates,
+         y: solar_flux,
+
+         //it's a scatter plot
+         type: 'scatter',
+
+         //legend labels trace as solar flux
+         name: 'Solar Flux',
+
+         //fix the trace to the first and seventh y-axis - see layout for more details
+         xaxis: 'x1',
+         yaxis: 'y7',
+
+         //makes the text popup when user hovers over
+         //text: createText(dates, solar_flux, 'Solar Flux: ', ' W/m^2', 2),
+         //hoverinfo: "text"
+      },
+
+        //data used to create plot
+      data = [tempObj, dewPtObj, pressureObj, wind_speedObj, wind_dirObj, accum_precipObj, solar_fluxObj],
+
+        //layout of the plot
+      layout = 
+      {
+         title: 'AO&SS Building RIG RealTime Meteorogram',
+         showlegend: true,
+
+         //legend posiitoning
+         legend: 
+         {
+            x: 150,
+            y: 0.8
+         },
+
+         //xaxis
+         //all graphs anchored to one x-axis, so one zoom impacts all subplots
+         xaxis: {
+                    //domain affects size of x axis
+                    //this made room for the legend
+                    //1 is the far right of the plot, 0 is the far left
+                  domain: [0, 0.9],
+
+                  //xaxis doesn't show its lines
+                  showline: false,
+
+                  //xaxis only shows with the 6th plot
+                  //only with the 7th y-axis
+                  anchor: 'y7',
+
+                  //values of the tick labels show up
+                  showticklabels: true
+               },                
+
+         //first y-axis       
+         yaxis:  {
+                  //all plots are 0.15 of the div element
+                  //1 is the top of the plot, 0 is the bottom
+                  domain: [0.85, 1],
+
+                  //this is the y-axis label
+                  title: 'Temp (Deg F)',
+
+                  //range means the range of values the y-axis can expect
+                  range: [min, max],
+                  tickvals: tickvals
+
+                 },
+         //second y-axis
+         //this is the degrees celsius axis        
+         yaxis2: 
+               {
+                  //this is the y-axis label
+                  title: 'Temp (Deg C)',
+
+                  //this says it will be attached to the first y-axis and to the
+                  //right of the first
+                  overlaying: 'y',
+                  side: 'right',
+
+                  //this means it is attached to the first x axis
+                  anchor: 'x',
+
+                  //range means the range of values the y-axis can expect
+                  //take note that this is the same range as the first y
+                  //this is so the lines of the first will line up with the ticks
+                  //of the second
+                  range: [min, max],
+
+                  //sets the yaxis ticks
+                  //this means although the values are the same, the tick vals
+                  //will seem to be in celsius
+                  ticktext: CtickVal, 
+                  tickvals: tickvals
+               },        
+          yaxis3: {
+                  //all plots are 0.15 of the div element
+                  //1 is the top of the plot, 0 is the bottom
+                  domain: [0.68, 0.83],
+
+                  //this is the y-axis label
+                  title: 'Pressure (hPa)'
+                },   
+          yaxis4: {
+                  //all plots are 0.15 of the div element
+                  //1 is the top of the plot, 0 is the bottom
+                  domain: [0.51, 0.66],
+
+                  //this is the yaxis label
+                  title: 'Wind Speed (m/s)'
+               },
+          yaxis5: {
+                  //all plots are 0.15 of the div element
+                  //1 is the top of the plot, 0 is the bottom
+                  domain: [0.34, 0.49],
+
+                  //this is the y axis label
+                  title: 'Wind Dir (Deg)',
+
+                  //this is the tickvals evenly spaced by 90
+                  tickvals: windTickvals
+                  //tickvals: [0, 15, 30, 45, 60]
+               },
+          yaxis6: {
+                  //all plots are 0.15 of the div element
+                  domain: [0.17, 0.32],
+
+                  //this is the y axis label
+                  title: 'Accum Precip (mm)'
+               },
+          yaxis7: {
+                  //all plots are 0.15 of the div element
+                  domain: [0, 0.15],
+
+                  //this is the yaxis label
+                  title: 'Solar Flux (W/m^2)'
+                }    
+      },
+
+        //this is the toolbar. It disabled the link to plotly and does not display
+        //plotly's logo
+      toolbar = 
+      {
+         'showLink': false,
+         'displaylogo': false
+
+      }; 
+
+    //creates new graph
+   Plotly.newPlot('aoss meteorogram', data, layout, toolbar);
+
+    //this tells the program which plots are in what positions
+    //when we hide plots, this mapping gets altered
+   var graphs = {"temp" : 1,
+                     "pres" : 2,
+                     "wS" : 3,
+                     "wD" : 4,
+                     "accum" : 5,
+                     "flux" : 6};
+
+    //these flags tells the program which plots are being shown
+    //when we hide plots, the flags get altered
+   var graphsShown = {"temp" : true,
+                     "pres" : true,
+                     "wS" : true,
+                     "wD" : true,
+                     "accum" : true,
+                     "flux" : true};
+
+   var axes = {
+                  "temp": 'y1',
+                  "pres": 'y3',
+                  "wS": 'y4',
+                  "wD": 'y5',
+                  "accum": 'y6',
+                  "flux": 'y7'
+                };                                 
+
+   //store map and flags in local storage
+   localStorage.setItem("numberOfGraphs", JSON.stringify(graphs));
+   localStorage.setItem("graphsShown", JSON.stringify(graphsShown));
+   localStorage.setItem("axes", JSON.stringify(axes));
+}
+
+function storeAndPlot(dataObj)
+{
+   console.log(dataObj);
+
+    //get symbols, dates, an data
+   symbols = dataObj.aoss_tower_symbols;
+
+   dates = dataObj.aoss_tower_stamps;
+
+    for(dateItr = 0; dateItr < dates.length; dateItr++)
+    {
+      dates[dateItr] = dates[dateItr].replace("T", " ");
+      dates[dateItr] = dates[dateItr].substring(0, dates[dateItr].length - 1);
+    }
+
+   data = dataObj.aoss_tower_data;
+
+   allData = new Array();
+
+    //get symbols
+   for (var i = 0; i < symbols.length; i++)
+   {
+      allData[symbols[i]] = [];
+   }
+
+   //put data based on key:array of values
+   for(var dataItr = 0; dataItr < data.length; dataItr++)
+   {
+      inData = data[dataItr];
+
+      for(inDataItr = 0; inDataItr < inData.length; inDataItr++)
+      {
+         value = inData[inDataItr];
+         symbol = symbols[inDataItr];
+         allData[symbol].push(value);
+      }
+   }
+
+   console.log(allData);
+
+    //convert air data from deg C to deg F
+   for(var i = 0; i < allData['air_temp'].length; i++)
+   {
+      airVal = allData['air_temp'][i];
+      newVal = (airVal + 32) * 9 / 5;
+      allData['air_temp'][i] = newVal;
+   }
+
+    //convert dew point from deg C to deg F
+   for(var i = 0; i < allData['dewpoint'].length; i++)
+   {
+      dewVal = allData['dewpoint'][i];
+      newVal = (dewVal + 32) * 9 / 5;
+      allData['dewpoint'][i] = newVal;
+   }
+
+   //save all data
+   temp = allData['air_temp'];
+   dewPt = allData["dewpoint"];
+   wind_speed = allData["wind_speed"];
+   wind_dir = allData["wind_direction"];
+
+   pressure = allData["pressure"];
+   accum_precip = allData["accum_precip"];
+   solar_flux = allData["solar_flux"];
+
+    //plot data
+   plotData(dates, temp, dewPt, pressure, wind_speed, wind_dir, accum_precip, solar_flux);
+}
+
+   $.ajax(
+      {
+         //type: 'GET',
+         url: url,
+
+         jsonp: "callback",
+         dataType: "jsonp",
+         success: function(dataObj)
+         {
+            dataObj = dataObj.aoss;
+
+            //console.log("in here");
+            storeAndPlot(dataObj);
+            localStorage.setItem("status", "static");
+         }
+      });
+
+
+</script>
+
+</body>
+</html>
\ No newline at end of file

water.html

+<!doctype html>
+<html>
+<head>
+		<meta charset="utf-8">
+		<title>QuickLook Demo Using Wind Depth Data</title>
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.css" type="text/css">
+</head>
+<body>
+
+<h1>Testing</h1>
+
+<p>Start Date: <input id="Start-date-picker" type="text" onChange="fetchAndPlotData()"/>
+</p>	
+
+<div id="graph" style="width: 1200px; height: 600px;">
+	<!-- plot goes here -->
+</div>	
+
+<div id="graph2" style="width: 1200px; height: 600px">
+
+</div>	
+
+<!-- Plotly.js -->
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+<!-- jQuery.js -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+
+<!-- Bootstrap -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.4/js/bootstrap-select.min.js"></script>
+
+<!-- jQueryUI.js -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.js"></script>
+
+<!-- Timepicker -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.js"></script>
+
+<script>
+function getStartDate()
+{
+	var startDate = $('#Start-date-picker').datepicker('getDate');
+	return startDate;
+}
+
+function getEndDate()
+{
+    var endDate = $('#Start-date-picker').datepicker('getDate', '+1d');
+    endDate.setDate(endDate.getDate()+1);
+    return endDate;
+}
+
+function unpackAndPack(dataObj)
+{
+    var mendotaData = dataObj.mendota;
+
+    var waterData = mendotaData.mendota_buoy_data;
+    var symbols = mendotaData.mendota_buoy_symbols;
+    var stamps = mendotaData.mendota_buoy_stamps;
+
+    console.log(waterData);
+    console.log(symbols);
+    console.log(stamps);
+
+    var transpose = new Array();
+
+    depth = [0, -.5, -1, -1.5, -2, -3,-4,-5,-6,-7,-8,-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,-20];
+
+    for(date = 0; date < stamps.length; date++)
+    {
+        stamps[date] = stamps[date].replace('T', " ");
+        stamps[date] = stamps[date].replace('Z', '');
+    }
+
+    //plot(stamps, depth, waterData);
+
+    //transpose
+    for(var depthItr = 0; depthItr < symbols.length; depthItr ++)
+    {
+        var row = new Array();
+        for(var stampItr = 0; stampItr < stamps.length; stampItr++)
+        {
+            row.push(waterData[stampItr][depthItr]);
+        }
+
+        transpose.push(row);
+    }
+
+    console.log(transpose);
+
+    plot(stamps, depth, transpose);
+}
+
+function fetchData(url)
+{
+	var result = null;
+
+	$.ajax(
+		    {
+				//type: 'GET',
+				url: url,
+
+				jsonp: "callback",
+				dataType: "jsonp",
+				success: function(dataObj)
+				{
+					console.log(dataObj);
+					result = dataObj;
+
+					packageData = unpackAndPack(dataObj);
+		        }
+		    });
+}
+
+
+function fetchAndPlotData()
+{
+    var startDate = getStartDate();
+    var endDate = getEndDate();
+
+    startDate = startDate.toISOString();
+    endDate = endDate.toISOString();
+    console.log(startDate);	
+    console.log(endDate);
+
+    url = 'http://0.0.0.0:5000/data/jsonp?site=mendota&inst=buoy&symbols=wt_1:wt_2:wt_3:wt_4:wt_5:wt_6:wt_7:wt_8:wt_9:wt_10:wt_11:wt_12:wt_13:wt_14:wt_15:wt_16:wt_17'
+
+    url += ':wt_18:wt_19:wt_20:wt_21:wt_22:wt_23&begin=' + startDate + '&end=' + endDate;
+
+    console.log(url);
+
+    getJson = fetchData(url);
+}
+
+function createText(dates, depth, z, str, units)
+{
+	//console.log(z);
+	//console.log(dates.length);
+	//console.log(alt.length);
+
+	text = []
+
+	for(var depthItr = 0; depthItr < depth.length; depthItr++)
+	{
+        row = []
+
+		for(var datesItr = 0; datesItr < dates.length; datesItr++)
+		{
+			coors = [];
+
+			var string = 'Time: ' + dates[datesItr].toString() + ' hrs<br>';
+			string += 'Depth: ' + depth[depthItr].toString() + ' m<br>';
+
+            if(z[depthItr][datesItr] == undefined)
+            {
+            	string += str;
+            }
+
+            else
+            {
+				string += str + z[depthItr][datesItr] + units;
+			}	
+
+			coors.push(string);
+			//coors.push('Altitude: ' + alt[altItr].toString() + ' km');
+			//coors.push('Wind Speed: ' + speed[altItr][datesItr] + ' m/s');
+
+			row.push(coors);
+		}
+
+		text.push(row);
+	}
+
+	return text;
+}
+
+function plot(dates, depth, temp)
+{
+		//colorscalevalue = 
+		//[
+		//	[0,  '#0018cc'],
+		//	[5,  '#191970'],
+		//	[10, '#3fe51a'],
+		//	[15, '#f9fb09'],
+		//	[20, '#ff0027'],
+		//	[25, '#a200ff']
+		//],
+
+		var data = 
+		[
+			{
+				x: dates,
+				y: depth,
+				z: temp,
+				zmin: 0,
+				zmax: 27,
+				type: 'contour',
+				colorbar:
+				{
+					title: 'Temperature deg. C',
+					titleside: 'right',
+					nticks : 10,
+					tick0 : 3,
+					dtick : 3
+
+					//tickvals: [3,6,9,12,15,18,21,24,27,30]
+				},
+				contours:
+				{
+				//	size: 6
+					//coloring: 'heatmap'
+					coloring: 'line'
+				},
+				line:
+				{
+					width: 0
+				},
+				colorscale: 'Jet',
+				showscale: true,
+				text: createText(dates, depth, temp, 'please', 'work')
+				//hoverinfo: 'text'
+			},
+			 
+		],
+
+		layout = 
+		{
+			title: 'Mendota Buoy Water Temperature',
+			annotations: [],
+			hovermode: 'closest',
+			xaxis: {
+						zeroline: false,
+						title: 'Time (UTC)',
+						showline: false//,
+						//hoverformat: '0.2f s'
+				   },
+			yaxis: {
+						zeroline: false,
+						title: 'depth (m)',
+						showline: false,
+						//range: [1, 1.5]
+				   }	   
+		},
+
+		toolbar = 
+		{
+			'showLink': false,
+			'displaylogo': false
+
+		};
+
+
+	Plotly.newPlot('graph', data, layout, toolbar);//data, layout);
+	//Plotly.newPlot('graph', data, layout, {'showLink': false});
+
+	var myPlot = document.getElementById('graph');
+	console.log(myPlot.data);
+}
+
+function main()
+{
+	$(function()  {
+    		$("#Start-date-picker").datepicker();
+    	});
+}
+
+$(document).ready(main());
+
+
+
+</script>
+
+</body>
+</html>
\ No newline at end of file