diff --git a/index1.html b/index1.html
index c9ff29d..388fcd9 100644
--- a/index1.html
+++ b/index1.html
@@ -27,10 +27,12 @@
          border: 1px solid black;
          border-left-width: 0;
       }
+
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
@@ -38,31 +40,11 @@
       var feedIdOrApiKey = 4231;
       var channelName = "PM2_5";
 
+      var plotManager;
       window.grapherLoad = function() {
-         var plotManager = new org.bodytrack.grapher.PlotManager("date_axis");
-
-         var datasource = function(level, offset, successCallback) {
-            superagent
-                  .get(ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles/" + level + "." + offset)
-                  .end(function(err, res) {
-                          if (err) {
-                             return console.log("Error: " + res.body);
-                          }
-
-                          switch (res.status) {
-                             case 200:
-                                return successCallback(JSON.stringify(res.body.data));
-                             case 401:
-                                return console.log("Unauthorized");
-                             case 403:
-                                return console.log("Forbidden");
-                             default:
-                                return console.log("Error: " + res.body);
-                          }
-                       });
-         };
-
-         plotManager.addDataSeriesPlot("my_plot", datasource, "plot_container", "y_axis");
+         plotManager = new org.bodytrack.grapher.PlotManager("date_axis");
+         var datasource = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles";
+         plotManager.addDataSeriesPlot("my-plot", datasource, "plot_container", "y_axis");
       };
    </script>
 </head>
@@ -89,4 +71,4 @@
    </table>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index10.html b/index10.html
index 039344e..4c820fe 100644
--- a/index10.html
+++ b/index10.html
@@ -47,8 +47,9 @@
       }
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
@@ -93,6 +94,7 @@
                        });
          };
 
+         var datasource = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles";
          var minValue = 0;
          var maxValue = 20;
 
@@ -215,4 +217,4 @@
    </table>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index2.html b/index2.html
index 6a74084..afffb43 100644
--- a/index2.html
+++ b/index2.html
@@ -5,6 +5,7 @@
    <title>Plot Manager</title>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
+
       .date_axis {
          height: 42px;
          z-index: 2;
@@ -29,8 +30,9 @@
       }
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js" type="text/javascript"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
@@ -38,11 +40,12 @@
       var feedIdOrApiKey = 4231;
       var channelName = "PM2_5";
 
+      var plotManager;
       window.grapherLoad = function() {
          var maxTimeSecs = Date.now() / 1000;
          var minTimeSecs = maxTimeSecs - 7 * 24 * 60 * 60;
 
-         var plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
+         plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
 
          plotManager.setWidthCalculator(function() {
             return $(window).width()         // window width
@@ -51,31 +54,12 @@
                    - 3;                      // grapher and Y axis borders
          });
 
-         var datasource = function(level, offset, successCallback) {
-            superagent
-                  .get(ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles/" + level + "." + offset)
-                  .end(function(err, res) {
-                          if (err) {
-                             return console.log("Error: " + res.body);
-                          }
-
-                          switch (res.status) {
-                             case 200:
-                                return successCallback(JSON.stringify(res.body.data));
-                             case 401:
-                                return console.log("Unauthorized");
-                             case 403:
-                                return console.log("Forbidden");
-                             default:
-                                return console.log("Error: " + res.body);
-                          }
-                       });
-         };
+         var datasource = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles";
 
          var minValue = 0;
          var maxValue = 20;
 
-         plotManager.addDataSeriesPlot("my_plot", datasource, "plot_container", "y_axis", minValue, maxValue);
+         plotManager.addDataSeriesPlot("my-plot", datasource, "plot_container", "y_axis", minValue, maxValue);
 
          // configure width selection radio buttons to change the PlotManager's width
          $(".plot_width_selector").click(function() {
@@ -125,6 +109,13 @@
       </label>
    </div>
 </div>
+<!--
+<div id="grapher">
+  <div id="date-axis"></div>
+  <div id="y-axis"></div>
+  <div id="plot-container"></div>
+</div>
+-->
 <div id="grapher_container" class="noselect">
    <table id="grapher" border="0" cellpadding="0" cellspacing="0">
       <tr>
@@ -144,4 +135,4 @@
    </table>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index3.html b/index3.html
index 831a83c..3f23f9e 100644
--- a/index3.html
+++ b/index3.html
@@ -29,8 +29,9 @@
       }
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
@@ -38,11 +39,13 @@
       var feedIdOrApiKey = 4231;
       var channelName = "PM2_5";
 
+      var plotManager;
       window.grapherLoad = function() {
          var maxTimeSecs = Date.now() / 1000;
          var minTimeSecs = maxTimeSecs - 7 * 24 * 60 * 60;
 
-         var plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
+         var datasource = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles";
+         plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
 
          plotManager.setWillAutoResizeWidth(true, function() {
             return $(window).width()         // window width
@@ -51,26 +54,6 @@
                    - 3;                      // grapher and Y axis borders
          });
 
-         var datasource = function(level, offset, successCallback) {
-            superagent
-                  .get(ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles/" + level + "." + offset)
-                  .end(function(err, res) {
-                          if (err) {
-                             return console.log("Error: " + res.body);
-                          }
-
-                          switch (res.status) {
-                             case 200:
-                                return successCallback(JSON.stringify(res.body.data));
-                             case 401:
-                                return console.log("Unauthorized");
-                             case 403:
-                                return console.log("Forbidden");
-                             default:
-                                return console.log("Error: " + res.body);
-                          }
-                       });
-         };
 
          var minValue = 0;
          var maxValue = 20;
@@ -109,4 +92,4 @@
 </div>
 <input type="checkbox" id="will_auto_resize" value="true" checked="checked"><label for="will_auto_resize">Auto-resize</label>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index4.html b/index4.html
index d474e8f..caacd1f 100644
--- a/index4.html
+++ b/index4.html
@@ -29,8 +29,9 @@
       }
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
@@ -38,11 +39,13 @@
       var feedIdOrApiKey = 4231;
       var channelName = "PM2_5";
 
+      var plotManager;
+
       window.grapherLoad = function() {
          var maxTimeSecs = Date.now() / 1000;
          var minTimeSecs = maxTimeSecs - 7 * 24 * 60 * 60;
 
-         var plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
+         plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
 
          plotManager.setWillAutoResizeWidth(true, function() {
             return $(window).width()         // window width
@@ -51,26 +54,7 @@
                    - 3;                      // grapher and Y axis borders
          });
 
-         var datasource = function(level, offset, successCallback) {
-            superagent
-                  .get(ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles/" + level + "." + offset)
-                  .end(function(err, res) {
-                          if (err) {
-                             return console.log("Error: " + res.body);
-                          }
-
-                          switch (res.status) {
-                             case 200:
-                                return successCallback(JSON.stringify(res.body.data));
-                             case 401:
-                                return console.log("Unauthorized");
-                             case 403:
-                                return console.log("Forbidden");
-                             default:
-                                return console.log("Error: " + res.body);
-                          }
-                       });
-         };
+         var datasource = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles";
 
          var minValue = 0;
          var maxValue = 20;
@@ -140,4 +124,4 @@
 <input type="checkbox" id="is_date_axis_range_constrained" value="true"><label for="is_date_axis_range_constrained">Constrain date axis range to the past 7 days</label><br>
 <input type="checkbox" id="is_y_axis_range_constrained" value="true"><label for="is_y_axis_range_constrained">Constrain Y axis range to [0, 20]</label>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index5.html b/index5.html
index a7cdc5e..60758cb 100644
--- a/index5.html
+++ b/index5.html
@@ -42,17 +42,20 @@
       }
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
 
+      var plotManager;
+
       window.grapherLoad = function() {
          var maxTimeSecs = Date.now() / 1000;
          var minTimeSecs = maxTimeSecs - 7 * 24 * 60 * 60;
 
-         var plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
+         plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
 
          plotManager.setWillAutoResizeWidth(true, function() {
             return $(window).width()                                                      // window width
@@ -62,31 +65,15 @@
                    - 3;                                                                   // grapher and Y axis borders
          });
 
-         var createDatasource = function(feedIdOrApiKey, channelName) {
-            return function(level, offset, successCallback) {
-               superagent
-                     .get(ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles/" + level + "." + offset)
-                     .end(function(err, res) {
-                             if (err) {
-                                return console.log("Error: " + res.body);
-                             }
-
-                             switch (res.status) {
-                                case 200:
-                                   return successCallback(JSON.stringify(res.body.data));
-                                case 401:
-                                   return console.log("Unauthorized");
-                                case 403:
-                                   return console.log("Forbidden");
-                                default:
-                                   return console.log("Error: " + res.body);
-                             }
-                          });
-            };
-         };
+         var feedIdOrApiKey = 2401;
+         var channelName1 = "PM2_5";
+         var channelName2 = "OZONE";
+
+         var datasource1 = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName1 + "/tiles";
+         var datasource2 = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName2 + "/tiles";
 
-         plotManager.addDataSeriesPlot("plot1", createDatasource(2401, "PM2_5"), "plot_container1", "y_axis1", 0, 20);
-         plotManager.addDataSeriesPlot("plot2", createDatasource(2401, "OZONE"), "plot_container2", "y_axis2", 0, 50);
+         plotManager.addDataSeriesPlot("plot1", datasource1, "plot_container1", "y_axis1", 0, 20);
+         plotManager.addDataSeriesPlot("plot2", datasource2, "plot_container2", "y_axis2", 0, 50);
 
          var positionLabels = function() {
             // define a function for positioning a label next to its axis
@@ -152,4 +139,4 @@
    </table>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index6.html b/index6.html
index e4e25e4..d62f58d 100644
--- a/index6.html
+++ b/index6.html
@@ -42,17 +42,19 @@
       }
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
 
+      var plotManager;
       window.grapherLoad = function() {
          var maxTimeSecs = Date.now() / 1000;
          var minTimeSecs = maxTimeSecs - 7 * 24 * 60 * 60;
 
-         var plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
+         plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
 
          plotManager.setWillAutoResizeWidth(true, function() {
             return $(window).width()               // window width
@@ -62,29 +64,6 @@
                    - 3;                            // grapher and Y axis borders
          });
 
-         var createDatasource = function(feedIdOrApiKey, channelName) {
-            return function(level, offset, successCallback) {
-               superagent
-                     .get(ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles/" + level + "." + offset)
-                     .end(function(err, res) {
-                             if (err) {
-                                return console.log("Error: " + res.body);
-                             }
-
-                             switch (res.status) {
-                                case 200:
-                                   return successCallback(JSON.stringify(res.body.data));
-                                case 401:
-                                   return console.log("Unauthorized");
-                                case 403:
-                                   return console.log("Forbidden");
-                                default:
-                                   return console.log("Error: " + res.body);
-                             }
-                          });
-            };
-         };
-
          var style = {
             "styles" : [
                { "type" : "line", "lineWidth" : 1, "show" : true, "color" : "red" },
@@ -122,11 +101,20 @@
             }
          };
 
+         var feedIdOrApiKey1 = 2401;
+         var feedIdOrApiKey2 = 4231;
+         var channelName1 = "PM2_5";
+         var channelName2 = "PM2_5";
+
+         var datasource1 = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey1 + "/channels/" + channelName1 + "/tiles";
+         var datasource2 = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey2 + "/channels/" + channelName2 + "/tiles";
+
+
          // NOTE: I use two different methods for adding a DataSeriesPlot here, only to illustrate the shorthand
          // functionality of getPlotContainer().  When called with no arguments, it simply returns the first
          // PlotContainer found.  In this case, it's identical to plotManager.getPlotContainer('plot_container')
-         plotManager.addDataSeriesPlot("plot1", createDatasource(2401, "PM2_5"), "plot_container", "y_axis", 0, 40, style);
-         plotManager.getPlotContainer().addDataSeriesPlot("plot2", createDatasource(4231, "PM2_5"), "y_axis");
+         plotManager.addDataSeriesPlot("plot1", datasource1, "plot_container", "y_axis", 0, 40, style);
+         plotManager.getPlotContainer().addDataSeriesPlot("plot2", datasource2, "y_axis");
 
          var positionLabels = function() {
             // define a function for positioning a label next to its axis
@@ -181,4 +169,4 @@
    </table>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index7.html b/index7.html
index 58c64f1..eefb605 100644
--- a/index7.html
+++ b/index7.html
@@ -29,17 +29,19 @@
       }
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
+      var plotManager;
 
       window.grapherLoad = function() {
          var maxTimeSecs = Date.now() / 1000;
          var minTimeSecs = maxTimeSecs - 7 * 24 * 60 * 60;
 
-         var plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
+         plotManager = new org.bodytrack.grapher.PlotManager("date_axis", minTimeSecs, maxTimeSecs);
 
          plotManager.setWillAutoResizeWidth(true, function() {
             return $(window).width()         // window width
@@ -49,29 +51,6 @@
                    - 4;                      // grapher and Y axis borders
          });
 
-         var createDatasource = function(feedIdOrApiKey, channelName) {
-            return function(level, offset, successCallback) {
-               superagent
-                     .get(ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles/" + level + "." + offset)
-                     .end(function(err, res) {
-                             if (err) {
-                                return console.log("Error: " + res.body);
-                             }
-
-                             switch (res.status) {
-                                case 200:
-                                   return successCallback(JSON.stringify(res.body.data));
-                                case 401:
-                                   return console.log("Unauthorized");
-                                case 403:
-                                   return console.log("Forbidden");
-                                default:
-                                   return console.log("Error: " + res.body);
-                             }
-                          });
-            };
-         };
-
          var style = {
                "styles" : [
                   { "type" : "line", "lineWidth" : 1, "show" : true, "color" : "#009900" },
@@ -109,8 +88,17 @@
                }
             };
 
-         plotManager.addDataSeriesPlot("plot1", createDatasource(2401, "PM2_5"), "plot_container", "y_axis1", 0, 20, style);
-         plotManager.addDataSeriesPlot("plot2", createDatasource(4231, "PM2_5"), "plot_container", "y_axis2", 0, 40);
+            var feedIdOrApiKey1 = 2401;
+            var feedIdOrApiKey2 = 4231;
+            var channelName1 = "PM2_5";
+            var channelName2 = "PM2_5";
+
+            var datasource1 = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey1 + "/channels/" + channelName1 + "/tiles";
+            var datasource2 = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey2 + "/channels/" + channelName2 + "/tiles";
+
+
+         plotManager.addDataSeriesPlot("plot1", datasource1, "plot_container", "y_axis1", 0, 20, style);
+         plotManager.addDataSeriesPlot("plot2", datasource2, "plot_container", "y_axis2", 0, 40);
       };
    </script>
 </head>
@@ -140,4 +128,4 @@
    </table>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index8.html b/index8.html
index 8138f1c..1e7aa3a 100644
--- a/index8.html
+++ b/index8.html
@@ -57,35 +57,13 @@
 
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
 
-      var createDatasource = function(feedIdOrApiKey, channelName) {
-         return function(level, offset, successCallback) {
-            superagent
-                  .get(ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles/" + level + "." + offset)
-                  .end(function(err, res) {
-                          if (err) {
-                             return console.log("Error: " + res.body);
-                          }
-
-                          switch (res.status) {
-                             case 200:
-                                return successCallback(JSON.stringify(res.body.data));
-                             case 401:
-                                return console.log("Unauthorized");
-                             case 403:
-                                return console.log("Forbidden");
-                             default:
-                                return console.log("Error: " + res.body);
-                          }
-                       });
-         };
-      };
-
       window.grapherLoad = function() {
          var maxTimeSecs = Date.now() / 1000;
          var minTimeSecs = maxTimeSecs - 7 * 24 * 60 * 60;
@@ -100,9 +78,13 @@
                    - 3;                            // grapher and Y axis borders
          });
 
+         var feedIdOrApiKey = 2401;
+         var channelName = "PM2_5";
+         var datasource = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles";
+
 
          // Default to adding the PM 2.5 channel
-         plotManager.addDataSeriesPlot("plot", createDatasource(2401, "PM2_5"), "plot_container", "y_axis", 0, 30);
+         plotManager.addDataSeriesPlot("plot", datasource, "plot_container", "y_axis", 0, 30);
 
          var positionLabels = function() {
             // define a function for positioning a label next to its axis
@@ -143,7 +125,8 @@
                   plotManager.getPlotContainer('plot_container').removePlot('plot');
 
                   // add the new plot
-                  plotManager.addDataSeriesPlot("plot", createDatasource(2401, channelName), "plot_container", "y_axis", yMin, yMax);
+                  var datasource = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles";
+                  plotManager.addDataSeriesPlot("plot", datasource, "plot_container", "y_axis", yMin, yMax);
 
                   // set the label text
                   $("#y_axis_label").text($(this).text());
@@ -185,4 +168,4 @@
    <div id="channel_link_2" class="channel_link">Ozone</div>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index9.html b/index9.html
index 81b0385..4dc9d8c 100644
--- a/index9.html
+++ b/index9.html
@@ -29,8 +29,9 @@
       }
    </style>
    <script src="lib/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
+   <script src="js/jquery.mousewheel.min.js"></script>
    <script src="lib/superagent/superagent.js" type="text/javascript"></script>
-   <script src="lib/bodytrack-grapher/org/bodytrack/grapher/grapher2.nocache.js" type="text/javascript"></script>
+   <script src="js/grapher.min.js"></script>
    <script src="js/org/bodytrack/grapher/PlotManager.js" type="text/javascript"></script>
    <script type="text/javascript">
       var ESDR_API_ROOT_URL = 'https://esdr.cmucreatelab.org/api/v1';
@@ -72,6 +73,10 @@
                        });
          };
 
+         var feedIdOrApiKey = 4231;
+         var channelName = "PM2_5";
+         var datasource = ESDR_API_ROOT_URL + "/feeds/" + feedIdOrApiKey + "/channels/" + channelName + "/tiles";
+
          var minValue = 0;
          var maxValue = 20;
 
@@ -80,6 +85,7 @@
 
          var dataPointListener = function(dataPoint) {
             if (dataPoint) {
+                console.log(dataPoint);
                $("#sample_value_and_time").html(dataPoint.valueString + " &mu;g/m<sup>3</sup> at " + dataPoint.dateString).show();
             }
             else {
@@ -153,4 +159,4 @@
    </table>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/js/grapher.min.js b/js/grapher.min.js
new file mode 100644
index 0000000..202dcf2
--- /dev/null
+++ b/js/grapher.min.js
@@ -0,0 +1,143 @@
+Math.log2=Math.log2||function(a){return Math.log(a)/Math.LN2};Math.log10=Math.log10||function(a){return Math.log(a)/Math.LN10};"use strict";var cr=cr||{};cr.Vector2=function(a,b){this._x=a;this._y=b};cr.Vector2.prototype.scale=function(a){return new cr.Vector2(this._x*a,this._y*a)};cr.Vector2.prototype.add=function(a){return new cr.Vector2(this._x+a._x,this._y+a._y)};cr.Vector2.prototype.subtract=function(a){return new cr.Vector2(this._x-a._x,this._y-a._y)};
+cr.Vector2.prototype.distanceSquared=function(a){return Math.pow(this._x-a._x,2)+Math.pow(this._y-a._y,2)};cr.Vector2.prototype.distance=function(a){return Math.sqrt(this.distanceSquared(a))};"use strict";cr=cr||{};cr.Basis=function(a,b){this.x=a;this.y=b};cr.Basis.YAxisBasis=new cr.Basis(new cr.Vector2(1,0),new cr.Vector2(0,-1));cr.Basis.XAxisBasis=new cr.Basis(new cr.Vector2(0,-1),new cr.Vector2(1,0));"use strict";cr=cr||{};
+cr.LabelFormatter=function(){this._days="Sun Mon Tue Wed Thu Fri Sat".split(" ");this._verboseDays="Sunday Monday Tuesday Wednesday Thursday Friday Saturday".split(" ");this._months="Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" ");this._verboseMonths="January February March April May June July August September October November December".split(" ")};cr.LabelFormatter.prototype.format=function(a){return a};cr.TimeLabelFormatter=function(){cr.LabelFormatter.call(this)};
+cr.TimeLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.TimeLabelFormatter.prototype.format=function(a){var b=Math.floor(a+5E-7);a=Math.round(1E6*(a-b));var c=new Date(1E3*b),b=String("00"+c.getHours()).slice(-2)+":"+String("00"+c.getMinutes()).slice(-2),c=c.getSeconds();if(0!=c||0!=a)b+=":"+c,0!=a&&(b+="."+a);return b};cr.VerboseDateLabelFormatter=function(){cr.LabelFormatter.call(this);this.dayFormatter=new cr.VerboseDayLabelFormatter;this.monthFormatter=new cr.VerboseMonthLabelFormatter(!0)};
+cr.VerboseDateLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.VerboseDateLabelFormatter.prototype.format=function(a){return this.dayFormatter.format(a)+" "+this.monthFormatter.format(a)};cr.DateLabelFormatter=function(){cr.LabelFormatter.call(this);this.dayFormatter=new cr.DayLabelFormatter;this.monthFormatter=new cr.MonthLabelFormatter(!0)};cr.DateLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);
+cr.DateLabelFormatter.prototype.format=function(a){return this.dayFormatter.format(a)+" "+this.monthFormatter.format(a)};cr.DateNumberLabelFormatter=function(){cr.LabelFormatter.call(this)};cr.DateNumberLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.DateNumberLabelFormatter.prototype.format=function(a){return(new Date(Math.round(1E3*a))).getDate()};cr.DayLabelFormatter=function(){cr.LabelFormatter.call(this);this.dateNumberFormatter=new cr.DateNumberLabelFormatter};
+cr.DayLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.DayLabelFormatter.prototype.format=function(a){var b=new Date(Math.round(1E3*a));return this._days[b.getDay()]+" "+this.dateNumberFormatter.format(a)};cr.VerboseDayLabelFormatter=function(){cr.LabelFormatter.call(this)};cr.VerboseDayLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);
+cr.VerboseDayLabelFormatter.prototype.format=function(a){a=new Date(Math.round(1E3*a));return this._verboseDays[a.getDay()]+" "+a.getDate()};cr.MonthLabelFormatter=function(a){cr.LabelFormatter.call(this);this.includeYear=a;this.YearLabelFormatter=new cr.YearLabelFormatter};cr.MonthLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);
+cr.MonthLabelFormatter.prototype.format=function(a){var b=new Date(Math.round(1E3*a));return this._months[b.getMonth()]+(this.includeYear?" "+this.YearLabelFormatter.format(a):"")};cr.VerboseMonthLabelFormatter=function(a){cr.LabelFormatter.call(this);this.includeYear=a;this.YearLabelFormatter=new cr.YearLabelFormatter};cr.VerboseMonthLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);
+cr.VerboseMonthLabelFormatter.prototype.format=function(a){var b=new Date(Math.round(1E3*a));return this._verboseMonths[b.getMonth()]+(this.includeYear?" "+this.YearLabelFormatter.format(a):"")};cr.YearLabelFormatter=function(){cr.LabelFormatter.call(this)};cr.YearLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.YearLabelFormatter.prototype.format=function(a){return(new Date(Math.round(1E3*a))).getYear()+1900};cr.YearSmallLabelFormatter=function(){cr.LabelFormatter.call(this)};
+cr.YearSmallLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.YearSmallLabelFormatter.prototype.format=function(a){a=(new Date(Math.round(1E3*a))).getYear()%100;0>a&&(a+=100);return(10>a?"'0":"'")+a};cr.DecadeLabelFormatter=function(){cr.LabelFormatter.call(this)};cr.DecadeLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.DecadeLabelFormatter.prototype.format=function(a){a=((new Date(Math.round(1E3*a))).getYear()+1900)/10*10;return a+" - "+(a+9)};
+cr.DecadeSmallLabelFormatter=function(){cr.LabelFormatter.call(this)};cr.DecadeSmallLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.DecadeSmallLabelFormatter.prototype.format=function(a){a=(new Date(Math.round(1E3*a))).getYear()%100;0>a&&(a+=100);a=a/10*10;return(0==a?"'0":"'")+a+"s"};cr.CenturyLabelFormatter=function(){cr.LabelFormatter.call(this)};cr.CenturyLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);
+cr.CenturyLabelFormatter.prototype.format=function(a){a=((new Date(Math.round(1E3*a))).getYear()+1900)/100*100;return a+" - "+(a+99)};cr.CenturySmallLabelFormatter=function(){cr.LabelFormatter.call(this)};cr.CenturySmallLabelFormatter.prototype=Object.create(cr.LabelFormatter.prototype);cr.CenturySmallLabelFormatter.prototype.format=function(a){return((new Date(Math.round(1E3*a))).getYear()+1900)/100*100+"s"};"use strict";
+var secondsInHour=3600,secondsInDay=24*secondsInHour,secondsInWeek=7*secondsInDay,secondsInYear=31556926,secondsInDecade=10*secondsInYear,secondsInCentury=10*secondsInDecade,secondsInMonth=Math.round(secondsInYear/12),cr=cr||{};cr.TickGenerator=function(a,b){this._tickSize=a;this._offset=b;this._currentTick=0};cr.TickGenerator.prototype.nextTick=function(a){if(a)for(this._min=a,this._currentTick=this.closestTick(a-this._tickSize);this._currentTick<a;)this.advanceTick();else this.advanceTick();return this._currentTick};
+var foocount=0;cr.TickGenerator.prototype.advanceTick=function(){this._prevTick=this._currentTick;this._currentTick=this.closestTick(this._currentTick+this._tickSize);if(this._currentTick<=this._prevTick){var a=Math.max(Math.abs(this._prevTick)/Math.pow(2,50),Number.MIN_VALUE);this._currentTick=this._prevTick+a}};cr.TickGenerator.prototype.closestTick=function(a){return Math.round((a-this._offset)/this._tickSize)*this._tickSize+this._offset};
+cr.TickGenerator.closestDay=function(a){a=new Date(1E3*a);12<=a.getHours()+a.getMinutes()/30+a.getSeconds()/1800&&(a.setHours(23),a.setMinutes(59),a.setSeconds(59),a.setTime(a.getTime()+432E5));a.setHours(0);a.setMinutes(0);a.setSeconds(0);return Math.floor(a.getTime()/1E3+1E-10)};cr.DayTickGenerator=function(a,b){cr.TickGenerator.call(this,a,b)};cr.DayTickGenerator.prototype=Object.create(cr.TickGenerator.prototype);cr.DayTickGenerator.prototype.closestTick=function(a){return cr.TickGenerator.closestDay(a)};
+cr.MonthTickGenerator=function(a,b){cr.TickGenerator.call(this,secondsInMonth*a,b);this._tickSizeMonths=a};cr.MonthTickGenerator.prototype=Object.create(cr.TickGenerator.prototype);cr.MonthTickGenerator.prototype.closestTick=function(a){a=new Date(1E3*a);a=12*a.getYear()+a.getMonth()+a.getDate()*secondsInDay/secondsInMonth;a=Math.round(a/this._tickSizeMonths)*this._tickSizeMonths;var b=Math.floor(a/12);return Math.round((new Date(b+1900,a-12*b,1)).getTime()/1E3)};
+cr.YearTickGenerator=function(a,b){cr.MonthTickGenerator.call(this,12*a,b)};cr.YearTickGenerator.prototype=Object.create(cr.MonthTickGenerator.prototype);cr.HourTickGenerator=function(a){cr.TickGenerator.call(this,secondsInHour*a,0);this._tickSizeHours=a};cr.HourTickGenerator.prototype=Object.create(cr.TickGenerator.prototype);
+cr.HourTickGenerator.prototype.closestTick=function(a){var b=new Date(1E3*a),c=b.getHours()+b.getMinutes()/30+b.getSeconds()/1800,d=Math.round(c/this._tickSizeHours)*this._tickSizeHours;if(24==d)return cr.TickGenerator.closestDay(a+(24-c)*secondsInHour);b.setHours(d);b.setMinutes(0);b.setSeconds(0);return Math.floor(b.getTime()/1E3+1E-10)};"use strict";cr=cr||{};cr.IterableTickGenerator=function(a,b,c){this._gen=a;this._maxValue=c;this._minValue=b;this._currTick=0;this._nextTick=a.nextTick(b)};
+cr.IterableTickGenerator.prototype.hasNext=function(){return this._nextTick<=this._maxValue};cr.IterableTickGenerator.prototype.next=function(){if(!this.hasNext())return!1;this._currTick=this._nextTick;this._nextTick=this._gen.nextTick();return this._currTick};"use strict";cr=cr||{};
+cr.GraphAxis=function(a,b,c,d,e,f){this._min=b;this._max=c;this._basis=d;this.isXAxis=e;this._initDiv(a);this._initCanvas();this.majorTickMinSpacingPixels=30;a=e?this._canvas.height:this._canvas.width;this.majorTickWidthPixels=Math.floor(a/5);this.minorTickMinSpacingPixels=10;this.minorTickWidthPixels=Math.floor(a/13.33);this.hasMinRange=!1;this.minRange=-1E100;this.hasMaxRange=!1;this.maxRange=1E100;this._begin;this._length;this._scale;this._resolutionScale=window.devicePixelRatio||1;this.clampToRange();
+this.resize();this.lastMouse=null;$("#"+this._canvas.id).mousedown(this,this.mousedown);$("#"+this._canvas.id).mousemove(this,this.mousemove);$("#"+this._canvas.id).mouseup(this,this.mouseup);$("#"+this._canvas.id).on("mousewheel",this,this.mousewheel);this.lastTouch=null;this.touchUtils=new cr.TouchUtils;$("#"+this._canvas.id).bind("touchstart",this,this.touchstart);$("#"+this._canvas.id).bind("touchmove",this,this.touchmove);$("#"+this._canvas.id).bind("touchend",this,this.touchend);$("#"+this._canvas.id).bind("touchcancel",
+this,this.touchend);null==f&&(this.grapher=__grapher__);this.axisChangeListeners=[]};cr.GraphAxis.prototype.mousedown=function(a){a.data.lastMouse=a;return!1};
+cr.GraphAxis.prototype.mousemove=function(a){var b=a.data;if(a.which){if(b.lastMouse){if(b.isXAxis)if(b.cursorX){var c=b.project1D(b.cursorX)-10,d=b.project1D(b.cursorX)+10,e=Math.floor(b._div.clientHeight/2),f=b._div.clientHeight;c<=a.offsetX&&d>=a.offsetX&&e<=a.offsetY&&f>=a.offsetY?(b.setCursorPosition(b.cursorX+(a.clientX-b.lastMouse.clientX)/(b._canvas.width/b._resolutionScale/(b._max-b._min))),b.grapher.scheduleUpdate()):b.translatePixels(a.clientX-b.lastMouse.clientX)}else b.translatePixels(a.clientX-
+b.lastMouse.clientX);else b.translatePixels(b.lastMouse.clientY-a.clientY);b.lastMouse=a}return!1}b.mouseup(a)};cr.GraphAxis.prototype.mouseup=function(a){a=a.data;a.lastMouse=null;a.publishAxisChangeEvent()};cr.GraphAxis.prototype.mousewheel=function(a){var b=a.data;b.isXAxis?b.zoomAboutX(a.clientX,Math.pow(1.0005,a.originalEvent.deltaY)):b.zoomAboutY(a.clientY,Math.pow(1.0005,a.originalEvent.deltaY));return!1};
+cr.GraphAxis.prototype.touchstart=function(a){a.data.lastTouch=a.originalEvent.touches;return!1};
+cr.GraphAxis.prototype.touchmove=function(a){var b=a.data;a=a.originalEvent.touches;if(b.lastTouch&&a.length==b.lastTouch.length){var c=b.touchUtils.centroid(a).clientX-b.touchUtils.centroid(b.lastTouch).clientX,d=b.touchUtils.centroid(b.lastTouch).clientY-b.touchUtils.centroid(a).clientY;b.isXAxis?b.translatePixels(c):b.translatePixels(d);b.isXAxis?b.touchUtils.isXPinch(a)&&b.touchUtils.isXPinch(b.lastTouch)&&b.zoomAboutX(b.touchUtils.centroid(a).clientX,b.touchUtils.xSpan(a)/b.touchUtils.xSpan(b.lastTouch)):
+b.touchUtils.isYPinch(a)&&b.touchUtils.isYPinch(b.lastTouch)&&b.zoomAboutY(b.touchUtils.centroid(a).clientY,b.touchUtils.ySpan(a)/b.touchUtils.ySpan(b.lastTouch))}b.lastTouch=b.touchUtils.copyTouches(a);return!1};cr.GraphAxis.prototype.touchend=function(a){a.data.lastTouch=null;return!1};
+cr.GraphAxis.prototype.translatePixels=function(a){var b=this.isXAxis?this._canvas.width/this._resolutionScale/(this._max-this._min):this._canvas.height/this._resolutionScale/(this._max-this._min);this._min-=a/b;this._max-=a/b;this.limitView()};cr.GraphAxis.prototype._initDiv=function(a){this._div=a};
+cr.GraphAxis.prototype._initCanvas=function(){this._canvas=document.createElement("canvas");this._canvas.setAttribute("id",this.isXAxis?this._div.id+"-x-axis-canvas":this._div.id+"y-axis-canvas");this._canvas.style.width=this._div.clientWidth+"px";this._canvas.style.height=this._div.clientHeight+"px";this._canvas.width=this._div.clientWidth;this._canvas.height=this._div.clientHeight;this._canvas.style.position="absolute";this._div.appendChild(this._canvas);this._ctx=this._canvas.getContext("2d")};
+cr.GraphAxis.prototype.resize=function(){this.height=this._div.clientHeight;this.width=this._div.clientWidth;this._canvas.style.width=this._div.clientWidth+"px";this._canvas.style.height=this._div.clientHeight+"px";this._canvas.height=this._div.clientHeight*this._resolutionScale;this._canvas.width=this._div.clientWidth*this._resolutionScale;this._ctx.scale(1,1);this._ctx.scale(this._resolutionScale,this._resolutionScale);this.layout()};
+cr.GraphAxis.prototype.layout=function(){var a;a=this.isXAxis?this.width:this.height;this._begin=new cr.Vector2(0,this.height);this._length=a;this.rescale()};cr.GraphAxis.prototype.uncheckedTranslate=function(a){this._min+=a;this._max+=a};
+cr.GraphAxis.prototype.clampToRange=function(){this.uncheckedTranslate(Math.max(0,this.minRange-this._min));this.uncheckedTranslate(Math.min(0,this.maxRange-this._max));if(this._min==Number.NEGATIVE_INFINITY||isNaN(this._min))this._min=Number.MIN_VALUE;if(this._max==Number.POSITIVE_INFINITY||isNaN(this._max))this._max=Number.MAX_VALUE;this.hasMinRange&&(this._min=Math.max(this._min,this.minRange));this.hasMaxRange&&(this._max=Math.min(this._max,this.maxRange))};
+cr.GraphAxis.prototype.rescale=function(){this._scale=this._length/(this._max-this._min)};
+cr.GraphAxis.prototype.paint=function(){this._ctx.clearRect(0,0,this._canvas.width,this.height);this._ctx.beginPath();var a=this.project2D(this._min),b=this.project2D(this._max);this._ctx.moveTo(a._x,a._y);this._ctx.lineTo(b._x,b._y);a=this.computeTickSize(this.majorTickMinSpacingPixels,1);this.renderTicks(0,a,this.majorTickWidthPixels,!0);a=this.computeTickSize(this.minorTickMinSpacingPixels,1);this.renderTicks(0,a,this.minorTickWidthPixels);this._ctx.stroke()};
+cr.GraphAxis.prototype.project1D=function(a){return(a-this._min)*this._scale};cr.GraphAxis.prototype.project2D=function(a){return this._begin.add(this._basis.y.scale(this.project1D(a)))};cr.GraphAxis.prototype.computeTickSize=function(a,b){var c=a/this._length*(this._max-this._min)/(b||1),d=c/Math.pow(10,Math.floor(Math.log10(c)));return(5<d?10:2<d?5:1<d?2:1)/d*c};
+cr.GraphAxis.prototype.renderTicks=function(a,b,c,d){var e=this.setupText()+a+c;b=new cr.TickGenerator(b,0);b=new cr.IterableTickGenerator(b,this._min,this._max);for(var f=b.next();!1!==f;)this.renderTick(f,a+c),d&&this.renderTickLabel(f,e),f=b.next()};cr.GraphAxis.prototype.renderTick=function(a,b){var c,d;c=this.project2D(a);d=c.add(this._basis.x.scale(b));this._ctx.moveTo(c._x,c._y);this._ctx.lineTo(d._x,d._y)};
+cr.GraphAxis.prototype.renderTickLabel=function(a,b){var c=a,d=Math.abs(a),e="";1E3>d||(1E6>d?(a/=1E3,e="k"):1E9>d&&1E3!=d/1E6?(a/=1E6,e="M"):1E12>d&&1E3!=d/1E9?(a/=1E9,e="G"):1E15>d&&1E3!=d/1E12?(a/=1E12,e="T"):(a/=1E15,e="P"));d=a.toFixed(4);d=d.replace(/\.?0+$/g,"")+e;c=this.project2D(c).add(this._basis.x.scale(b));this._ctx.fillText(d,c._x,c._y)};
+cr.GraphAxis.prototype.zoomAboutY=function(a,b){var c=this._max-this._min;void 0<c/b&&(b=c/NaN);c=this.pixelToY(a);this._min-=c;this._max-=c;this._min/=b;this._max/=b;this._min+=c;this._max+=c;this.limitView()};cr.GraphAxis.prototype.zoomAboutX=function(a,b){var c=this._max-this._min;void 0<c/b&&(b=c/NaN);c=this.pixelToX(a);this._min-=c;this._max-=c;this._min/=b;this._max/=b;this._min+=c;this._max+=c;this.limitView()};
+cr.GraphAxis.prototype.limitView=function(){this._max-this._min>this.maxRange-this.minRange?(this._max=this.maxRange,this._min=this.minRange):this._min<this.minRange?(this._max+=this.minRange-this._min,this._min=this.minRange):this._max>this.maxRange&&(this._min-=this._max-this.maxRange,this._max=this.maxRange);this.publishAxisChangeEvent();this.grapher.scheduleUpdate()};cr.GraphAxis.prototype.pixelToX=function(a){return a/(this._canvas.width/this._resolutionScale/(this._max-this._min))- -this._min};
+cr.GraphAxis.prototype.xToPixel=function(a){return a*(this._canvas.width/this._resolutionScale/(this._max-this._min)- -this._min)};cr.GraphAxis.prototype.pixelToY=function(a){return a/(this._canvas.height/this._resolutionScale/(this._min-this._max))- -this._max};
+cr.GraphAxis.prototype.setupText=function(){var a=0;Math.abs(this._basis.x._y)>Math.abs(this._basis.y._y)?(this._ctx.textAlign="center",this._ctx.textBaseline="top",a=Math.floor(this.height/2.66)):(this._ctx.textAlign="left",this._ctx.textBaseline="middle",a=3);return a};cr.GraphAxis.prototype.setRange=function(a,b){a<b&&(this._min=a,this._max=b)};cr.GraphAxis.prototype.setBounds=function(a){this.isXAxis?this.setRange(a.xmin,a.xmax):this.setRange(a.ymin,a.ymax)};
+cr.GraphAxis.prototype.update=function(a){a&&this.setBounds(a);this.clampToRange();this.rescale();this.paint()};cr.GraphAxis.prototype.setSize=function(a,b){this._div.style.width=a+"px";this._div.style.height=b+"px";this.resize();this.grapher.resize();this.publishAxisChangeEvent()};cr.GraphAxis.prototype.setMaxRange=function(a,b){this.minRange=a;this.maxRange=b;this.hasMinRange=this.hasMaxRange=!0;this.publishAxisChangeEvent();this.update()};cr.GraphAxis.prototype.getId=function(){return this._div.id};
+cr.GraphAxis.prototype.addAxisChangeListener=function(a){this.axisChangeListeners.push(a)};cr.GraphAxis.prototype.removeAxisChangeListener=function(a){for(var b=0;b<this.axisChangeListeners.length&&this.axisChangeListeners[b]!=a;b++);b<this.axisChangeListeners.length&&this.axisChangeListeners.splice(b,1)};
+cr.GraphAxis.prototype.publishAxisChangeEvent=function(){for(var a=0;a<this.axisChangeListeners.length;a++){var b=new cr.DateLabelFormatter,c=new cr.TimeLabelFormatter,b={min:this._min,max:this._max,cursorPosition:this.cursorX,cursorPositionString:b.format(this.cursorX)+", "+c.format(this.cursorX),eventId:-1};this.axisChangeListeners[a](b)}};"use strict";cr=cr||{};
+cr.TimeGraphAxis=function(a,b,c,d,e){cr.GraphAxis.call(this,a,b,c,d,e);this._secondsInHour=3600;this._secondsInDay=24*this._secondsInHour;this._secondsInWeek=7*this._secondsInDay;this._secondsInYear=31556926;this._secondsInDecade=10*this._secondsInYear;this._secondsInCentury=10*this._secondsInDecade;this._secondsInMonth=Math.round(this._secondsInYear/12);this._timeTickSizes=[[1,5,15,30],[60,300,900,1800],[3600,10800,21600,43200],[this._secondsInDay],[this._secondsInWeek],[this._secondsInMonth,3*this._secondsInMonth,
+6*this._secondsInMonth],[this._secondsInYear]];this._minRange=-21474836400;this._maxRange=21474836400;this._hasMinRange=this._hasMaxRange=!0;this._days="Sun Mon Tue Wed Thu Fri Sat".split(" ");this._verboseDays="Sunday Monday Tuesday Wednesday Thursday Friday Saturday".split(" ");this._months="Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" ");this._verboseMonths="January February March April May June July August September October November December".split(" ");this.grapher.timeGraphAxis=
+this;this.showCursor=!1;this.cursorX=null};cr.TimeGraphAxis.prototype=Object.create(cr.GraphAxis.prototype);cr.TimeGraphAxis.prototype._initDiv=function(a){this._div=a};
+cr.TimeGraphAxis.prototype.paint=function(){this._ctx.clearRect(0,0,this.width,this.height);this._ctx.beginPath();var a=this.project2D(this._min),b=this.project2D(this._max);this._ctx.moveTo(a._x,a._y);this._ctx.lineTo(b._x,b._y);a=this.project2D(this._min);b=this.project2D(this._max);this._ctx.moveTo(a._x,a._y/2);this._ctx.lineTo(b._x,b._y/2);var c=this.computeTimeTickSize(50),d=this.computeTimeTickSize(10),a=this.height/2,b=this._secondsInDay,e=this.computeTickWidth(b),f=this._secondsInMonth,g=
+this.computeTickWidth(f),h=this._secondsInYear,l=this.computeTickWidth(h),k=this._secondsInDecade,m=this.computeTickWidth(k),n=this._secondsInCentury,p=this.computeTickWidth(n);80<=e?(a=120<=e?new cr.VerboseDateLabelFormatter:new cr.DateLabelFormatter,this.renderTicksRangeLabelInline(this.height/2,b,this.createDateTickGenerator(b),this.height,a),d<=43200+1E-10&&(this.renderTicks(0,c,this.createDateTickGenerator(c),this.majorTickWidthPixels,null,null),this.renderLabels(0,c,this.createDateTickGenerator(c),
+0,new cr.TimeLabelFormatter),a=this.computeTimeMinorTickSize(5,c),this.renderTicks(0,a,this.createDateTickGenerator(a),this.minorTickWidthPixels,null,null))):150<=g?(this.renderTicks(0,b,this.createDateTickGenerator(b),this.majorTickWidthPixels,null,null),h=null,k=new cr.VerboseMonthLabelFormatter(!0),40<=e?h=new cr.DayLabelFormatter:15<=e&&(h=new cr.DateNumberLabelFormatter),this.renderRangeLabelInline(0,b,this.createDateTickGenerator(b),0,h),this.renderTicksRangeLabelInline(a,f,this.createDateTickGenerator(f),
+this.height,k)):80<=l?(this.renderTicks(0,f,this.createDateTickGenerator(f),this.majorTickWidthPixels,null,null),k=null,55<=g?k=new cr.VerboseMonthLabelFormatter(!1):20<=g&&(k=new cr.MonthLabelFormatter(!1)),this.renderRangeLabelInline(0,f,this.createDateTickGenerator(f),0,k),this.renderTicksRangeLabelInline(a,h,this.createDateTickGenerator(h),this.height,new cr.YearLabelFormatter)):150<=m?(console.log("decadeMajorTickWidth >= 150"),this.renderTicks(0,h,this.createDateTickGenerator(h),majorTickWidthPixels,
+null,null),b=null,30<=l?(console.log("yearMajorTickWidth >= 30"),b=new cr.YearLabelFormatter):15<=l&&(console.log("yearMajorTickWidth >= 15"),b=new cr.YearSmallLabelFormatter),this.renderRangeLabelInline(0,h,this.createDateTickGenerator(h),0,b),this.renderTicksRangeLabelInline(a,k,this.createDateTickGenerator(k),this.height,new cr.DecadeLabelFormatter)):(console.log("else"),this.renderTicks(0,k,this.createDateTickGenerator(k),this.majorTickWidthPixels,null,null),b=null,65<=m?(console.log("decadeMajorTickWidth >= 65"),
+b=new cr.DecadeLabelFormatter):25<=m&&(console.log("decadeMajorTickWidth >= 25"),b=new cr.DecadeSmallLabelFormatter),this.renderRangeLabelInline(0,k,this.createDateTickGenerator(k),0,b),b=new cr.CenturySmallLabelFormatter,65<=p&&(console.log("centuryMajorTickWidth >= 65"),b=new cr.CenturyLabelFormatter),this.renderTicksRangeLabelInline(a,n,this.createDateTickGenerator(n),this.height,b));this._ctx.stroke();this.cursorX&&(this._ctx.fillStyle="red",this._ctx.beginPath(),this._ctx.moveTo(this.project1D(this.cursorX),
+this._div.clientHeight),this._ctx.lineTo(this.project1D(this.cursorX)+10,Math.floor(this._div.clientHeight/2)),this._ctx.lineTo(this.project1D(this.cursorX)-10,Math.floor(this._div.clientHeight/2)),this._ctx.fill(),this._ctx.fillStyle="black")};
+cr.TimeGraphAxis.prototype.computeTimeTickSize=function(a){var b=a/this._length*(this._max-this._min);if(1>b)return this.computeTickSize(a);for(var c=0;c<this._timeTickSizes.length;c++)for(var d=0;d<this._timeTickSizes[c].length;d++)if(this._timeTickSizes[c][d]>=b)return this._timeTickSizes[c][d];return computeTickSize(a,this._secondsInYear)*this._secondsInYear};
+cr.TimeGraphAxis.prototype.computeTimeMinorTickSize=function(a,b){if(b<=1+1E-10)return this.computeTickSize(a);for(var c=0;c<this._timeTickSizes.length;c++)for(var d=0;d<this._timeTickSizes[c].length;d++)if(b<=this._timeTickSizes[c][d])return Math.max(0==d?this._timeTickSizes[c-1][0]:this._timeTickSizes[c][0],this.computeTimeTickSize(a));return this._computeTimeTickSize(a)};
+cr.TimeGraphAxis.prototype.renderTicks=function(a,b,c,d,e,f){null==c&&(c=new cr.TickGenerator(b,0));b=null==e?0:this.setupText()+a+d;c=new cr.IterableTickGenerator(c,this._min,this._max);for(var g=c.next();!1!==g;)this.renderTick(g,a+d),null!=e&&this.renderTickLabelWithFormatter(g,b,e,f),g=c.next()};
+cr.TimeGraphAxis.prototype.renderTickLabelWithFormatter=function(a,b,c,d){c=c.format(a);if(null!=d){var e=this._ctx.measureText(c).width,f=this.project2D(a).add(this.basis.x.scale(b))._x;0>this.width-e-f&&(c=d.format(a))}this.renderTickLabel(a,b,c)};cr.TimeGraphAxis.prototype.renderTickLabel=function(a,b,c){a=this.project2D(a).add(this._basis.x.scale(b));this._ctx.fillText(c,a._x,a._y)};cr.TimeGraphAxis.prototype.computeTickWidth=function(a){return this.project2D(a).distance(this.project2D(0))};
+cr.TimeGraphAxis.prototype.createDateTickGenerator=function(a){var b=Math.round(a/this._secondsInHour);if(1>=b)return null;if(24>b)return new cr.HourTickGenerator(b);if(1==Math.round(a/this._secondsInDay))return new cr.DayTickGenerator(this._secondsInDay,0);if(1==Math.round(a/this._secondsInWeek))return new cr.WeekTickGenerator;b=Math.round(a/this._secondsInMonth);if(12>b)return new cr.MonthTickGenerator(b,0);a=Math.round(a/this._secondsInYear);return new cr.YearTickGenerator(a)};var bar;
+cr.TimeGraphAxis.prototype.renderRangeLabelInline=function(a,b,c,d,e){if(null!=e){null==c&&(c=new cr.TickGenerator(b,0));"undefined"==typeof bar&&(bar=c);a=this.setupText()+a;var f=c.nextTick(this._min);if(f>this._max)this.renderTickLabelWithFormatter((this._min+this._max)/2,a,e,null);else for(f=c.nextTick(this._min-b);;){d=c.nextTick();if(d>this._max+b)break;var g=d;f<this._min&&(f=this._min);g>this._max&&(g=this._max);this.renderTickLabelWithinBounds((f+g)/2,f,g,a,e);f=d}}};
+cr.TimeGraphAxis.prototype.renderTickLabelWithinBounds=function(a,b,c,d,e){var f=e.format(a);if(Math.abs(this._basis.x._x)<Math.abs(this._basis.x._y)){e=this._ctx.measureText(f).width;var g=this.project2D(a)._x,h=this.project2D(b)._x,l=this.project2D(c)._x;if(!(e>=l-h)){var k=g;"center"==this._ctx.textAlign?(g+=e/2,k-e/2<=h?(this._ctx.textAlign="left",renderTickLabel(b,d,f),this._ctx.textAlign="center"):g>=l?(this._ctx.textAlign="right",renderTickLabel(c,d,f),this._ctx.textAlign="center"):this.renderTickLabel(a,
+d,f)):this.renderTickLabel(a,d,f)}}else this.renderTickLabel(a,d,e(a))};var foo,fooTickSize;
+cr.TimeGraphAxis.prototype.renderTicksRangeLabelInline=function(a,b,c,d,e){null==c&&(c=new cr.TickGenerator(b,0));"undefined"==typeof foo&&(foo=c);"undefined"==typeof fooTickSize&&(fooTickSize=b);var f=this.setupText()+a,g=c.nextTick(this._min);if(g>this._max)this.renderTickLabelWithFormatter((this._min+this._max)/2,f,e,null);else for(g=c.nextTick(this._min-b);;){this.renderTick(g,d+a);var h=c.nextTick();if(h>this._max+b)break;var l=h;g<this._min&&(g=this._min);l>this._max&&(l=this._max);this.renderTickLabelWithinBounds((g+
+l)/2,g,l,f,e);g=h}};cr.TimeGraphAxis.prototype.renderLabels=function(a,b,c,d,e){null==c&&(c=new cr.TickGenerator(b,0));a=null==e?0:this.setupText()+a+d;c=new cr.IterableTickGenerator(c,this._min,this._max);for(b=c.next();!1!==b;)this.renderTickLabelWithFormatter(b,a,e,null),b=c.next()};cr.TimeGraphAxis.prototype.setCursorPosition=function(a){a!=this.cursorX&&(this.cursorX=a);this.publishAxisChangeEvent()};cr.TimeGraphAxis.prototype.getCursorPosition=function(){return this.cursorX};
+function Glb(a){this.gl=a;this._shaderCache={};this._programCache={}}Glb.prototype._shaderFromSource=function(a,b){var c=this._shaderCache[b];c||(c=this._shaderCache[b]={});var d=c[a];if(!d&&(d=c[a]=this.gl.createShader(a),this.gl.shaderSource(d,b),this.gl.compileShader(d),!this.gl.getShaderParameter(d,this.gl.COMPILE_STATUS)))throw Error("Compiling shader, "+this.gl.getShaderInfoLog(d));return d};
+Glb.prototype.programFromSources=function(a,b){var c=this._programCache[a];c||(c=this._programCache[a]={});var d=c[b];if(!d&&(console.log("Creating shader program"),d=c[b]=this.gl.createProgram(),this.gl.attachShader(d,this._shaderFromSource(this.gl.VERTEX_SHADER,a)),this.gl.attachShader(d,this._shaderFromSource(this.gl.FRAGMENT_SHADER,b)),this.gl.linkProgram(d),!this.gl.getProgramParameter(d,this.gl.LINK_STATUS)))throw Error("Linking shader program, "+this.gl.getProgramInfoLog(d));this._addAttribsAndUniformsToProgram(d);
+return d};Glb.prototype._addAttribsAndUniformsToProgram=function(a){if(0==this.gl.getProgramParameter(a,this.gl.ACTIVE_ATTRIBUTES))throw Error("Program has no active attributes");for(var b=this.gl.getProgramParameter(a,this.gl.ACTIVE_ATTRIBUTES)-1;0<=b;b--){var c=this.gl.getActiveAttrib(a,b).name;a[c]=this.gl.getAttribLocation(a,c)}for(b=this.gl.getProgramParameter(a,this.gl.ACTIVE_UNIFORMS)-1;0<=b;b--)c=this.gl.getActiveUniform(a,b).name,a[c]=this.gl.getUniformLocation(a,c)};
+Glb.prototype.createBuffer=function(a){var b=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,b);this.gl.bufferData(this.gl.ARRAY_BUFFER,a,this.gl.STATIC_DRAW);return b};function TileIdx(a,b){this.l=a;this.o=b;var c,d;c=0>a?"-"+("00"+a.toString().split("-")[1]).substr(-3):("00"+a).substr(-3);d=0>b?"-"+("00000000000000000000"+b.toString().split("-")[1]).substr(-19):("00000000000000000000"+b).substr(-19);this.key=c+d}
+TileIdx.prototype.parent=function(){return new TileIdx(this.l+1,this.o>>1)};TileIdx.prototype.toString=function(){return this.l+"."+this.o};"use strict";function TileView(a){this._createTileCallback=a.createTile;this._deleteTileCallback=a.deleteTile;this._tiles={};this._updateTileCallback=a.updateTile;this._zoomlock=a.zoomlock;this._cache=a.cache||!1;this._tilecache={};this._readyList=[];console.log(this.toString())}TileView.prototype.toString=function(){return"TileView: "};
+TileView.prototype._computeLevel=function(a){a=a.max-a.min;return 0>=a?Number.MIN_VALUE:Math.floor(Math.log2(a/512))};TileView.prototype._computeOffset=function(a,b){var c=512*Math.pow(2,b);return Math.floor(a/c)};TileView.prototype._tileidxAt=function(a,b){return new TileIdx(a,b)};TileView.prototype._computeVisibleTileRange=function(a,b){var c=this._tileidxAt(a,this._computeOffset(b.min,a)),d=this._tileidxAt(a,this._computeOffset(b.max,a));return{min:c,max:d}};
+TileView.prototype._isTileVisible=function(a,b){var c=this._computeVisibleTileRange(a.l,b);return c.min.o<=a.o&&a.o<=c.max.o};TileView.prototype._addTileidx=function(a){this._tiles[a.key]||(this._tiles[a.key]=this._createTileCallback(a),this._tiles[a.key].index=a);return this._tiles[a.key]};TileView.prototype._deleteTile=function(a){this._tiles[a.index.key]&&(a.delete(),delete this._tiles[a.index.key])};
+TileView.prototype._destroy=function(){for(var a=Object.keys(this._tiles),b=0;b<a.length;b++){var c=a[b];this._deleteTile(this._tiles[c]);delete this._tiles[c]}};TileView.prototype.tileInfo=function(){for(var a=[],b=Object.keys(this._tiles).sort(),c=0;c<b.length;c++)a.push(b[c].toString());return"tileInfo: "+a.join(" ")};TileView.prototype._findReadyAncestor=function(a){for(var b=0;5>b;){a=a.parent();if(null==a)return null;if(this._tiles[a.key]&&this._tiles[a.key].isReady())return a;b+=1}};
+TileView.prototype._findFirstAncestorIn=function(a,b){for(;;){a=a.parent();if(null==a)return null;if(a.key in b)return a}};
+TileView.prototype.setView=function(a){for(var b={},c={},d=this._computeLevel(a),e=this._computeVisibleTileRange(d,a),f=e.min.o;f<=e.max.o;f++){var g=new TileIdx(d,f);g.key in this._tiles||(this._tiles[g.key]=this._addTileidx(g),c[g.key]=!0);b[g.key]=!0;this._tiles[g.key].isReady()||(g=this._findReadyAncestor(g),null!=g&&(b[g.key]=!0))}var e=[],h;for(h in this._tiles)f=this._tiles[h]._tileidx,f.l<d&&this._isTileVisible(f,a)&&this._tiles[f.key].isReady()&&e.push(f);e=e.sort();for(a=0;a<e.length;a++)f=
+e[a],h=this._findFirstAncestorIn(f,b),null==h||this._tiles[h.key].isReady()||(b[f.key]=!0);d=Object.keys(this._tiles).sort();e=[];for(a=0;a<d.length;a++)h=d[a],f=this._tiles[h],b[h]?(g="",c[h]&&(g+="+"),f.isReady()||(g+="("),g+=f.index.toString(),f.isReady()||(g+=")"),e.push(g)):(this._deleteTile(this._tiles[h]),delete this._tiles[h]);e=e.join(" ");this._lastStatus&&e.replace(/[\-\+]/g,"")==this._lastStatus.replace(/[\-\+]/g,"")||(console.log("setView: "+e),this._lastStatus=e);this._needsUpdate=!1;
+for(a=0;a<d.length;a++)if(h=d[a],(f=this._tiles[h])&&!f.isReady()){this._needsUpdate=!0;break}};TileView.prototype.update=function(a){for(var b=Object.keys(this._tiles).sort(),c=[],d=0;d<b.length;d++)c.push(this._tiles[b[d]]);this._updateTileCallback(c,a)};"use strict";
+function DataStoreTile(a,b,c){this.glb=a;this.gl=a.gl;this._tileidx=b;this._url=c;this._ready=!1;this.program=a.programFromSources(cr.Shaders.TileVertexShader,cr.Shaders.TileFragmentShader);this.pointProgram=a.programFromSources(cr.Shaders.PointVertexShader,cr.Shaders.PointFragmentShader);this.offset=0;this._resolutionScale=window.devicePixelRatio||1;this._load()}
+DataStoreTile.prototype._load=function(){var a=this,b=new XMLHttpRequest;b.open("GET",a._url);b.onload=function(){var b=JSON.parse(this.responseText),b=a._parseJSON(b);a._setData(b)};b.send()};DataStoreTile.prototype._parseJSON=function(a){var b=[];0<a.data.data.length&&(this.offset=a.data.data[0][0]);for(var c=0;c<a.data.data.length;c++)b.push(a.data.data[c][0]-this.offset),b.push(a.data.data[c][1]),b.push(a.data.data[c][2]),b.push(a.data.data[c][3]);return new Float32Array(b)};
+DataStoreTile.prototype._setData=function(a){var b=this.gl;this._pointCount=a.length/4;this._data=a;this._arrayBuffer=b.createBuffer();b.bindBuffer(b.ARRAY_BUFFER,this._arrayBuffer);b.bufferData(b.ARRAY_BUFFER,this._data,b.STATIC_DRAW);a=b.getAttribLocation(this.program,"a_position");b.enableVertexAttribArray(a);b.vertexAttribPointer(a,2,b.FLOAT,!1,16,0);this._ready=!0};DataStoreTile.prototype.isReady=function(){return this._ready};
+DataStoreTile.prototype.delete=function(){console.log("delete: "+this._tileidx.toString())};
+DataStoreTile.prototype.draw=function(a){var b=this.gl;if(this._ready){b.lineWidth(1);b.useProgram(this.program);var c=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),d=2/(a.xmax-a.xmin),e=(-a.xmin+this.offset)*d-1,f=2/(a.ymax-a.ymin);a=-a.ymin*f-1;c[0]=d;c[12]=e;c[5]=f;c[13]=a;d=b.getUniformLocation(this.program,"u_pMatrix");b.uniformMatrix4fv(d,!1,c);b.bindBuffer(b.ARRAY_BUFFER,this._arrayBuffer);d=b.getAttribLocation(this.program,"a_position");b.enableVertexAttribArray(d);b.vertexAttribPointer(d,
+2,b.FLOAT,!1,16,0);d=b.getUniformLocation(this.program,"u_color");b.uniform4f(d,0,0,0,1);b.drawArrays(b.LINE_STRIP,0,this._pointCount);b.useProgram(this.pointProgram);d=b.getUniformLocation(this.pointProgram,"u_pMatrix");b.uniformMatrix4fv(d,!1,c);b.bindBuffer(b.ARRAY_BUFFER,this._arrayBuffer);d=b.getAttribLocation(this.pointProgram,"a_position");b.enableVertexAttribArray(d);b.vertexAttribPointer(d,2,b.FLOAT,!1,16,0);d=b.getUniformLocation(this.pointProgram,"u_color");b.uniform4f(d,0,0,0,1);c=b.getUniformLocation(this.pointProgram,
+"u_size");b.uniform1f(c,4*this._resolutionScale);b.drawArrays(b.POINTS,0,this._pointCount)}};DataStoreTile.update=function(a,b){for(var c=0;c<a.length;c++)a[c].draw(b)};"use strict";function CanvasTile(a,b,c){this.ctx=a;this.canvas2d=a.canvas;this._tileidx=b;this._url=c;this._ready=!1;this._resolutionScale=window.devicePixelRatio||1;this._load()}
+CanvasTile.prototype._load=function(){function a(){var a=-1;"Microsoft Internet Explorer"==navigator.appName&&null!=/MSIE ([0-9]{1,}[.0-9]{0,})/.exec(navigator.userAgent)&&(a=parseFloat(RegExp.$1));return a}var b=this;if(XDomainRequest&&10>a()){var c=new window.XDomainRequest;c.onprogress=function(){};c.ontimeout=function(){};c.onload=function(){var a=JSON.parse(this.responseText),a=b._parseJSON(a);b._setData(a)};c.onerror=function(){};c.open("GET",b._url,!0)}else c=new XMLHttpRequest,c.open("GET",
+b._url),c.onload=function(){var a=JSON.parse(this.responseText),a=b._parseJSON(a);b._setData(a)};c.send()};CanvasTile.prototype._parseJSON=function(a){for(var b=[],c=0;c<a.data.data.length;c++)for(var d=0;d<a.data.data[c].length;d++)b.push(a.data.data[c][d]);return b};CanvasTile.prototype._setData=function(a){this._pointCount=a.length/4;this._data=a;this._ready=!0};CanvasTile.prototype.isReady=function(){return this._ready};CanvasTile.prototype.delete=function(){console.log("delete: "+this._tileidx.toString())};
+CanvasTile.prototype.draw=function(a){if(this._ready){for(var b=0;b<=4*this._pointCount;b+=2)this.ctx.beginPath(),this.ctx.strokeStyle="black",this.ctx.lineWidth=1,this.ctx.moveTo(a.xScale*(this._data[2*b+0]+a.xOffset),a.yScale*(this._data[2*b+1]+a.yOffset)),this.ctx.lineTo(a.xScale*(this._data[2*b+4]+a.xOffset),a.yScale*(this._data[2*b+5]+a.yOffset)),this.ctx.stroke();for(b=0;b<=4*this._pointCount;b+=4)this.ctx.beginPath(),this.ctx.fillStyle="black",this.ctx.arc(a.xScale*(this._data[b+0]+a.xOffset),
+a.yScale*(this._data[b+1]+a.yOffset),2*this._resolutionScale,0,2*Math.PI,!0),this.ctx.fill()}};CanvasTile.update=function(a,b){for(var c=0;c<a.length;c++)a[c].draw(b)};"use strict";
+function DataStoreTileLayer(a,b,c){this.glb=b;this.ctx=c;this._rootUrl=a;var d=this;this._tileView=new TileView({createTile:function(e,f){var g=a+"/"+e.l+"."+e.o;return d.glb&&d.usewebgl?new DataStoreTile(b,e,g):new CanvasTile(c,e,g)},deleteTile:function(a){},updateTile:d.glb&&d.useWebgl?DataStoreTile.update:CanvasTile.update});this.destroy=function(){this._tileView._destroy()}}
+DataStoreTileLayer.prototype.draw=function(a){this.glb&&this.usewebgl?this.drawWebgl(a):this.drawCanvas(a);this._needsUpdate=this._tileView._needsUpdate};DataStoreTileLayer.prototype.drawWebgl=function(a){var b=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),c=2/(a.xmax-a.xmin),d=-a.xmin*c-1,e=2/(a.ymax-a.ymin),f=-a.ymin*e-1;b[0]=c;b[12]=d;b[5]=e;b[13]=f;this._tileView.setView({min:a.xmin,max:a.xmax});this._tileView.update(a)};
+DataStoreTileLayer.prototype.drawCanvas=function(a){var b={};b.xOffset=-a.xmin;b.xScale=this.ctx.canvas.width/(a.xmax-a.xmin);b.yOffset=-a.ymax;b.yScale=this.ctx.canvas.height/(a.ymin-a.ymax);this._tileView.setView({min:a.xmin,max:a.xmax});this._tileView.update(b)};
+DataStoreTileLayer.prototype.search=function(a){for(var b=Object.keys(this._tileView._tiles).sort(),c=0;c<b.length;c++){var d=this._tileView._tiles[b[c]].offset||0,e=this._tileView._tiles[b[c]]._data;if(e)for(var f=0;f<e.length;f+=4)if(a.xmin<=e[f]+d&&a.xmax>=e[f]+d&&a.ymin<=e[f+1]&&a.ymax>=e[f+1])return{x:e[f]+d,y:e[f+1],tile:this._tileView._tiles[b[c]]}}return null};
+DataStoreTileLayer.prototype.searchByX=function(a){for(var b=Object.keys(this._tileView._tiles).sort(),c=0;c<b.length;c++){var d=this._tileView._tiles[b[c]].offset||0,e=this._tileView._tiles[b[c]]._data;if(e)for(var f=0;f<e.length;f+=4)if(e[f]+d>=a.xmin&&e[f]+d<=a.xmax)return{x:e[f]+d,y:e[f+1]}}return null};"use strict";cr=cr||{};cr.Shaders=cr.Shaders||{};cr.Shaders.TileFragmentShader="  precision highp float;\n  uniform vec4 u_color;\n  void main(void) {\n    gl_FragColor = u_color;\n  }";
+cr.Shaders.TileVertexShader="  attribute vec3 a_position;\n  uniform mat4 u_pMatrix;\n  void main(void) {\n    gl_Position = u_pMatrix * vec4(a_position, 1.0);\n  }";cr.Shaders.PointFragmentShader="  precision highp float;\n  uniform vec4 u_color;\n  void main(void) {\n    float dist = length(gl_PointCoord.xy - vec2(.5,.5));\n    float alpha = (dist > .5) ? .0 : 1.;\n    gl_FragColor = u_color * alpha;\n  }";cr.Shaders.PointVertexShader="  attribute vec3 a_position;\n  uniform float u_size;\n  uniform mat4 u_pMatrix;\n  void main(void) {\n    gl_Position = u_pMatrix * vec4(a_position, 1.0);\n    gl_PointSize = u_size;\n  }";
+"use strict";cr=cr||{};cr.TouchUtils=function(){};cr.TouchUtils.prototype.copyTouches=function(a){for(var b=[],c=0;c<a.length;c++)b.push({clientX:a[c].clientX,clientY:a[c].clientY});return b};cr.TouchUtils.prototype.centroid=function(a){for(var b={clientX:0,clientY:0},c=0;c<a.length;c++)b.clientX+=a[c].clientX,b.clientY+=a[c].clientY;b.clientX/=a.length;b.clientY/=a.length;return b};cr.TouchUtils.prototype.xSpan=function(a){return Math.abs(a[0].clientX-a[1].clientX)};
+cr.TouchUtils.prototype.ySpan=function(a){return Math.abs(a[0].clientY-a[1].clientY)};cr.TouchUtils.prototype.isXPinch=function(a){return 2==a.length&&this.xSpan(a)>this.ySpan(a)};cr.TouchUtils.prototype.isYPinch=function(a){return 2==a.length&&this.ySpan(a)>this.xSpan(a)};"use strict";cr=cr||{};
+cr.Plot=function(a,b,c){this.point=null;this.id="plot-"+b.getId()+"-"+c.getId();this.xAxis=b;this.yAxis=c;this.url=a;this.view={};this.bounds={xmin:Number.MAX_VALUE,xmax:-Number.MAX_VALUE,ymin:Number.MAX_VALUE,ymax:-Number.MAX_VALUE};this.view={xmin:this.xAxis._min,xmax:this.xAxis._max,ymin:this.yAxis._min,ymax:this.yAxis._max};this.dataPointListeners=[];this._resolutionScale=window.devicePixelRatio||1};
+cr.Plot.prototype.limitView=function(){this.view.xmax-vthis.iew.xmin>this.bounds.xmax-this.bounds.xmin?(this.view.xmax=this.bounds.xmax,this.view.xmin=this.bounds.xmin):this.view.xmin<this.bounds.xmin?(this.view.xmax+=this.bounds.xmin-this.view.xmin,this.view.xmin=this.bounds.xmin):this.view.xmax>this.bounds.xmax&&(this.view.xmin-=this.view.xmax-this.bounds.xmax,this.view.xmax=this.bounds.xmax)};
+cr.Plot.prototype._resize=function(){var a=this.div.clientWidth*this._resolutionScale,b=this.div.clientWidthHeight*this._resolutionScale;if(this.canvas2d.width!=a||this.canvas2d.height!=b)this.highlight._highlight.width=this.canvas2d.width=this.canvas3d.width=a,this.highlight._highlight.height=this.canvas2d.height=this.canvas3d.height=b,console.log("Resized canvas to "+this.canvas2d.width+" x "+this.canvas2d.height)};
+cr.Plot.prototype.drawCursorAndHighlight=function(a){var b={};b.xOffset=-a.xmin;b.xScale=this.canvas2d.width/(a.xmax-a.xmin);b.yOffset=-a.ymax;b.yScale=this.canvas2d.height/(a.ymin-a.ymax);this.showCursor&&this.cursor.draw(b);this.highlight._ctx.clearRect(0,0,plot.canvas2d.width,plot.canvas2d.height);this.showHighlightLine&&this.highlight.drawLine(b,a);this.showHighlightPoint&&this.highlight.drawPoint(b,a);this.showHighlightMOPoint&&this.highlight.drawMOPoint(b,a)};cr.Plot.prototype.getId=function(){return this.id};
+cr.Plot.prototype.getView=function(){return{xmin:this.xAxis._min,xmax:this.xAxis._max,ymin:this.yAxis._min,ymax:this.yAxis._max}};cr.Plot.prototype.update=function(){this.tlayer.draw(this.getView());this._needsUpdate=this.tlayer._needsUpdate};cr.Plot.prototype.addDataPointListener=function(a){this.dataPointListeners.push(a)};
+cr.Plot.prototype.removeDataPointListener=function(a){for(var b=0;b<this.dataPointListeners.length&&this.dataPointListeners[b]!=a;b++);b<this.dataPointListeners.length&&this.dataPointListeners.splice(b,1)};cr.Plot.prototype.getClosestDataPointToTimeWithinWindow=function(a,b,c){var d=null;if(a=this.tlayer.searchByX({xmin:a-b,xmax:a+c}))d=new cr.DateLabelFormatter,b=new cr.TimeLabelFormatter,d={date:a.x,value:a.y,dateString:d.format(a.x)+", "+b.format(a.x),valueString:a.y.toFixed(1),comment:null};return d};
+"use strict";cr=cr||{};
+cr.SeriesPlotContainer=function(a,b,c){this.div=document.getElementById(a);this.div.style.border="1px solid black";this.highlight={};this.highlightedPoints=[];this.cursorX=null;this._resolutionScale=window.devicePixelRatio||1;this._plots={};if(c)for(a=0;a<c.length;a++)this.addPlot(c[a]);this._initCanvases();try{console.log("Using webgl..."),this.gl=this.canvas3d.getContext("experimental-webgl"),this.glb=new Glb(this.gl),this.pointProgram=this.glb.programFromSources(cr.Shaders.PointVertexShader,cr.Shaders.PointFragmentShader),
+this.lineProgram=this.glb.programFromSources(cr.Shaders.TileVertexShader,cr.Shaders.TileFragmentShader),this.usewebgl=!0}catch(d){this.glb=this.gl=null,this.usewebgl=!1,console.log("experimental-webgl unsupported")}null==this.grapher&&(this.grapher=__grapher__);this.grapher.addPlotContainer(this);this.lastTouch=null;this.touchUtils=new cr.TouchUtils;$("#"+this.canvas2d.id).bind("touchstart",this,this.touchstart);$("#"+this.canvas2d.id).bind("touchmove",this,this.touchmove);$("#"+this.canvas2d.id).bind("touchend",
+this,this.touchend);$("#"+this.canvas2d.id).bind("touchcancel",this,this.touchend);$("#"+this.canvas3d.id).bind("touchstart",this,this.touchstart);$("#"+this.canvas3d.id).bind("touchmove",this,this.touchmove);$("#"+this.canvas3d.id).bind("touchend",this,this.touchend);$("#"+this.canvas3d.id).bind("touchcancel",this,this.touchend);this.resize()};cr.SeriesPlotContainer.prototype.getXAxis=function(){var a=Object.keys(this._plots);return 0==a.length?null:this._plots[a[0]].xAxis};
+cr.SeriesPlotContainer.prototype.getId=function(){return this.div.id};
+cr.SeriesPlotContainer.prototype._initCanvases=function(){this.canvas3d=document.createElement("canvas");this.canvas3d.setAttribute("id",this.div.id+"-canvas3d");this.canvas3d.style.width=this.div.style.width;this.canvas3d.style.height=this.div.style.height;this.canvas3d.style.position="absolute";this.div.appendChild(this.canvas3d);this.canvas2d=document.createElement("canvas");this.canvas2d.setAttribute("id",this.div.id+"-canvas2d");this.canvas2d.style.width=this.div.style.width;this.canvas2d.style.height=
+this.div.style.height;this.canvas2d.style.position="absolute";this.div.appendChild(this.canvas2d);this.ctx=this.canvas2d.getContext("2d");$("#"+this.canvas2d.id).mousedown(this,this.mousedown);$("#"+this.canvas2d.id).mousemove(this,this.mousemove);$("#"+this.canvas2d.id).mouseup(this,this.mouseup);$("#"+this.canvas2d.id).on("mousewheel",this,this.mousewheel);$("#"+this.canvas3d.id).mousedown(this,this.mousedown);$("#"+this.canvas3d.id).mousemove(this,this.mousemove);$("#"+this.canvas3d.id).mouseup(this,
+this.mouseup);$("#"+this.canvas3d.id).on("mousewheel",this,this.mousewheel);this.lastMouse=null};
+cr.SeriesPlotContainer.prototype.mousedown=function(a){var b=a.data;b.lastMouse=a;var c=a.clientX-a.currentTarget.offsetParent.offsetLeft-5,d=a.clientX-a.currentTarget.offsetParent.offsetLeft+5,e=a.clientY-a.currentTarget.offsetParent.offsetTop+5;a=a.clientY-a.currentTarget.offsetParent.offsetTop-5;for(var f=Object.keys(b._plots),g=0;g<f.length;g++){var h=f[g],l=b._plots[h],k={};k.xmin=l.xAxis.pixelToX(c);k.xmax=l.xAxis.pixelToX(d);k.ymin=l.yAxis.pixelToY(e);k.ymax=l.yAxis.pixelToY(a);if(k=l.tlayer.search(k))l.xAxis.setCursorPosition(k.x),
+b.highlight.line=k,b.highlight.plotKey=h,b.grapher.scheduleUpdate()}return!1};
+cr.SeriesPlotContainer.prototype.mousemove=function(a){var b=a.data;if(a.which){if(b.lastMouse){g=Object.keys(b._plots);for(h=0;h<g.length;h++)l=g[h],k=b._plots[l],k.xAxis.translatePixels(a.clientX-b.lastMouse.clientX),k.yAxis.translatePixels(b.lastMouse.clientY-a.clientY);b.lastMouse=a}return!1}for(var c=a.clientX-a.currentTarget.offsetParent.offsetLeft-5,d=a.clientX-a.currentTarget.offsetParent.offsetLeft+5,e=a.clientY-a.currentTarget.offsetParent.offsetTop+5,f=a.clientY-a.currentTarget.offsetParent.offsetTop-
+5,g=Object.keys(b._plots),h=0;h<g.length;h++){var l=g[h],k=b._plots[l],m={};m.xmin=k.xAxis.pixelToX(c);m.xmax=k.xAxis.pixelToX(d);m.ymin=k.yAxis.pixelToY(e);m.ymax=k.yAxis.pixelToY(f);if(m=k.tlayer.search(m)){b.mouseoverHighlightPoint={point:m,key:l};b.grapher.scheduleUpdate();for(h=0;h<k.dataPointListeners.length;h++)c=new cr.DateLabelFormatter,d=new cr.TimeLabelFormatter,c={date:m.x,value:m.y,dateString:c.format(m.x)+", "+d.format(m.x),valueString:m.y.toFixed(1),comment:null},k.dataPointListeners[h](c);
+break}else b.mouseoverHighlightPoint&&(b.mouseoverHighlightPoint=null,b.grapher.scheduleUpdate())}b.mouseup(a)};cr.SeriesPlotContainer.prototype.mouseup=function(a){a.data.lastMouse=null};cr.SeriesPlotContainer.prototype.mousewheel=function(a){for(var b=a.data,c=Object.keys(b._plots),d=0;d<c.length;d++){var e=b._plots[c[d]];e.xAxis.zoomAboutX(a.clientX,Math.pow(1.0005,a.originalEvent.deltaY));e.yAxis.zoomAboutY(a.clientY,Math.pow(1.0005,a.originalEvent.deltaY))}return!1};
+cr.SeriesPlotContainer.prototype.touchstart=function(a){var b=a.data;b.lastTouch=a.originalEvent.touches;var c=b.touchUtils.centroid(b.lastTouch),d=c.clientX-a.currentTarget.offsetParent.offsetLeft-15,e=c.clientX-a.currentTarget.offsetParent.offsetLeft+15,f=c.clientY-a.currentTarget.offsetParent.offsetTop+10;a=c.clientY-a.currentTarget.offsetParent.offsetTop-10;for(var c=Object.keys(b._plots),g=0;g<c.length;g++){var h=c[g],l=b._plots[h],k={};k.xmin=l.xAxis.pixelToX(d);k.xmax=l.xAxis.pixelToX(e);k.ymin=
+l.yAxis.pixelToY(f);k.ymax=l.yAxis.pixelToY(a);if(k=l.tlayer.search(k))l.xAxis.setCursorPosition(k.x),b.highlight.line=k,b.highlight.plotKey=h,b.grapher.scheduleUpdate()}return!1};
+cr.SeriesPlotContainer.prototype.touchmove=function(a){var b=a.data;a=a.originalEvent.touches;if(b.lastTouch&&a.length==b.lastTouch.length){var c=b.touchUtils.centroid(a).clientX-b.touchUtils.centroid(b.lastTouch).clientX,d=b.touchUtils.centroid(b.lastTouch).clientY-b.touchUtils.centroid(a).clientY,e=b.getXAxis();e.translatePixels(c);b.touchUtils.isXPinch(a)&&b.touchUtils.isXPinch(b.lastTouch)&&e.zoomAboutX(b.touchUtils.centroid(a).clientX,b.touchUtils.xSpan(a)/b.touchUtils.xSpan(b.lastTouch));for(var f in b._plots)c=
+b._plots[f],c.yAxis.translatePixels(d),b.touchUtils.isYPinch(a)&&b.touchUtils.isYPinch(b.lastTouch)&&c.yAxis.zoomAboutY(b.touchUtils.centroid(a).clientY,b.touchUtils.ySpan(a)/b.touchUtils.ySpan(b.lastTouch))}b.lastTouch=b.touchUtils.copyTouches(a);return!1};cr.SeriesPlotContainer.prototype.touchend=function(a){a.data.lastTouch=null;return!1};
+cr.SeriesPlotContainer.prototype.update=function(){this.usewebgl||this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);this.drawHighlight();for(var a in this._plots)this._plots[a].update(),this._plots[a].yAxis.update();this._needsUpdate=!1;for(a in this._plots)if(this._plots[a]._needsUpdate){this._needsUpdate=!0;break}this.drawHighlightPoints();this.drawMouseoverHighlightPoint()};
+cr.SeriesPlotContainer.prototype.drawHighlightWebgl=function(){var a=this.getXAxis(),b=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),c=2/(a._max-a._min),d=-a._min*c-1,a=this.gl;a.lineWidth(2*this._resolutionScale);a.useProgram(this.lineProgram);var e=a.getUniformLocation(this.lineProgram,"u_pMatrix");a.uniformMatrix4fv(e,!1,b);b=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,b);a.bufferData(a.ARRAY_BUFFER,new Float32Array([this.cursorX*c+d,1,this.cursorX*c+d,-1]),a.STATIC_DRAW);c=a.getAttribLocation(this.lineProgram,
+"a_position");a.enableVertexAttribArray(c);a.vertexAttribPointer(c,2,a.FLOAT,!1,0,0);c=a.getUniformLocation(this.lineProgram,"u_color");a.uniform4f(c,1,0,0,1);a.drawArrays(a.LINES,0,2)};
+cr.SeriesPlotContainer.prototype.drawHighlightCanvas=function(){var a=this.getXAxis();this.ctx.beginPath();this.ctx.lineWidth=2*this._resolutionScale;this.ctx.strokeStyle="rgb(255,0,0)";var b=this.ctx.canvas.width/(a._max-a._min),a=-a._min;this.ctx.moveTo(b*(this.cursorX+a),0);this.ctx.lineTo(b*(this.cursorX+a),this.ctx.canvas.height);this.ctx.stroke()};
+cr.SeriesPlotContainer.prototype.drawHighlight=function(){var a=this.getXAxis();a.cursorX&&(this.cursorX!=a.cursorX&&(this.cursorX=a.cursorX,this.setHighlightPoints()),this.usewebgl?this.drawHighlightWebgl():this.drawHighlightCanvas())};
+cr.SeriesPlotContainer.prototype.setHighlightPoints=function(){this.highlightedPoints=[];var a=this.getXAxis(),a=a.pixelToX(2)-a.pixelToX(0),b;for(b in this._plots){var c=this._plots[b].tlayer.searchByX({xmin:this.cursorX-a,xmax:this.cursorX+a});c&&this.highlightedPoints.push({point:c,key:b})}};
+cr.SeriesPlotContainer.prototype.drawHighlightPointsWebgl=function(){for(var a=this.getXAxis(),b=[],c=2/(a._max-a._min),a=-a._min*c-1,d=0;d<this.highlightedPoints.length;d++){var e=this.highlightedPoints[d],f=this._plots[e.key].getView(),g=2/(f.ymax-f.ymin),f=-f.ymin*g-1;b.push(e.point.x*c+a);b.push(e.point.y*g+f)}c=this.gl;c.useProgram(this.pointProgram);a=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);d=c.getUniformLocation(this.pointProgram,"u_pMatrix");c.uniformMatrix4fv(d,!1,a);a=c.createBuffer();
+c.bindBuffer(c.ARRAY_BUFFER,a);c.bufferData(c.ARRAY_BUFFER,new Float32Array(b),c.STATIC_DRAW);a=c.getAttribLocation(this.pointProgram,"a_position");c.enableVertexAttribArray(a);c.vertexAttribPointer(a,2,c.FLOAT,!1,0,0);a=c.getUniformLocation(this.pointProgram,"u_color");c.uniform4f(a,1,0,0,1);c.drawArrays(c.POINTS,0,b.length/2)};
+cr.SeriesPlotContainer.prototype.drawHighlightPointsCanvas=function(){for(var a=this.getXAxis(),b=[],c=-a._min,a=this.ctx.canvas.width/(a._max-a._min),d=0;d<this.highlightedPoints.length;d++){var e=this.highlightedPoints[d],f=this._plots[e.key].getView();b.push({x:a*(e.point.x+c),y:this.ctx.canvas.height/(f.ymin-f.ymax)*(e.point.y+-f.ymax)})}for(d=0;d<b.length;d++)this.ctx.beginPath(),this.ctx.fillStyle="red",this.ctx.arc(b[d].x,b[d].y,2*this._resolutionScale,0,2*Math.PI,!0),this.ctx.fill()};
+cr.SeriesPlotContainer.prototype.drawHighlightPoints=function(){this.getXAxis().cursorX&&(this.usewebgl?this.drawHighlightPointsWebgl():this.drawHighlightPointsCanvas())};
+cr.SeriesPlotContainer.prototype.drawMouseoverHighlightPointWebgl=function(){var a=this.getXAxis();if(this.mouseoverHighlightPoint){var b=[],c=this.mouseoverHighlightPoint,d=this._plots[c.key].getView(),e=2/(a._max-a._min),f=2/(d.ymax-d.ymin),d=-d.ymin*f-1;b.push(c.point.x*e+(-a._min*e-1));b.push(c.point.y*f+d);a=this.gl;a.useProgram(this.pointProgram);c=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);e=a.getUniformLocation(this.pointProgram,"u_pMatrix");a.uniformMatrix4fv(e,!1,c);c=a.createBuffer();
+a.bindBuffer(a.ARRAY_BUFFER,c);a.bufferData(a.ARRAY_BUFFER,new Float32Array(b),a.STATIC_DRAW);c=a.getAttribLocation(this.pointProgram,"a_position");a.enableVertexAttribArray(c);a.vertexAttribPointer(c,2,a.FLOAT,!1,0,0);c=a.getUniformLocation(this.pointProgram,"u_color");a.uniform4f(c,1,0,0,1);a.drawArrays(a.POINTS,0,b.length/2)}};cr.SeriesPlotContainer.prototype.drawMouseoverHighlightPointCanvas=function(){console.log("drawMouseoverHighlightPointCanvas");console.log("TODO...")};
+cr.SeriesPlotContainer.prototype.drawMouseoverHighlightPoint=function(){this.getXAxis();this.usewebgl?this.drawMouseoverHighlightPointWebgl():this.drawMouseoverHighlightPointCanvas()};
+cr.SeriesPlotContainer.prototype.resize=function(){var a=this.div.clientWidth*this._resolutionScale,b=this.div.clientHeight*this._resolutionScale;if(this.canvas2d.width!=a||this.canvas2d.height!=b)this.canvas2d.width=this.canvas3d.width=a,this.canvas2d.height=this.canvas3d.height=b,this.canvas3d.style.width=this.div.style.width,this.canvas3d.style.height=this.div.style.height,this.canvas2d.style.width=this.div.style.width,this.canvas2d.style.height=this.div.style.height;this.usewebgl&&this.gl.viewport(0,
+0,this.canvas3d.width,this.canvas3d.height)};cr.SeriesPlotContainer.prototype._resize=function(){var a=this.div.clientWidth*this._resolutionScale,b=this.div.clientHeight*this._resolutionScale;if(this.canvas2d.width!=a||this.canvas2d.height!=b)this.canvas2d.width=this.canvas3d.width=a,this.canvas2d.height=this.canvas3d.height=b};
+cr.SeriesPlotContainer.prototype.addPlot=function(a){this._plots[a.getId()]=a;this._plots[a.getId()].tlayer=new DataStoreTileLayer(a.url,this.glb,this.ctx);this._plots[a.getId()].tlayer.usewebgl=this.usewebgl};cr.SeriesPlotContainer.prototype.removePlot=function(a){delete this._plots[a.getId()]};cr.SeriesPlotContainer.prototype.setSize=function(a,b){this.div.style.width=a+"px";this.div.style.height=b+"px";this.resize()};"use strict";cr=cr||{};
+cr.Grapher=function(){this._isAdded=!0;this._isAnimated=!1;this.plotContainer=this.timeGraphAxis=this._requestAnimationFrameId=this._updateHandler=null;this.plotContainers={};this._requestUpdateFunction=function(a,b){return function(){b.apply(a)}}(this,this._update);this.bounds={xmin:Number.MAX_VALUE,xmax:-Number.MAX_VALUE,ymin:Number.MAX_VALUE,ymax:-Number.MAX_VALUE};this.view={xmin:this.bounds.xmin,xmax:this.bounds.xmax,ymin:this.bounds.ymin,ymax:this.bounds.ymax};this.lastMouse;this.lastTouch};
+cr.Grapher.prototype.addPlotContainer=function(a){this.plotContainer=a;this.plotContainers[a.div.id]=a};cr.Grapher.prototype._requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){return window.setTimeout(a,1E3/60)};
+cr.Grapher.prototype._cancelAnimFrame=window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame||function(a){};cr.Grapher.prototype.setAnimate=function(a){if(this._isAnimated=!!a)console.log("scheduling update"),this.scheduleUpdate()};cr.Grapher.prototype.isAnimated=function(){return this._isAnimated};
+cr.Grapher.prototype._update=function(){this._requestAnimationFrameId=null;if(this._isAdded){this._isAnimated&&this.scheduleUpdate();this._needsResize&&this._resizeHandler&&(this._needsResize=!1,this._resizeHandler());this.timeGraphAxis&&this.timeGraphAxis.update();if(this.plotContainers)for(var a=Object.keys(this.plotContainers),b=0;b<a.length;b++)this.plotContainers[a[b]].update(),this.plotContainer._needsUpdate&&this.scheduleUpdate();this._updateHandler&&this._updateHandler()}};
+cr.Grapher.prototype.scheduleUpdate=function(){this._isAdded&&!this._requestAnimationFrameId&&(this._requestAnimationFrameId=this._requestAnimFrame.call(window,this._requestUpdateFunction))};cr.Grapher.prototype.resize=function(){console.log("resize");this.timeGraphAxis&&this.timeGraphAxis.resize();this.plotContainer&&this.plotContainer.resize();if(this.plotContainers)for(var a=Object.keys(this.plotContainers),b=0;b<a.length;b++)this.plotContainers[a[b]].resize();this.scheduleUpdate()};
+cr.Grapher.prototype.update=function(){this._update()};
+var __grapher__=new cr.Grapher,DateAxis=function(a,b){return new cr.TimeGraphAxis(document.getElementById(a),null,null,cr.Basis.XAxisBasis,!0)},NumberAxis=function(a,b,c){var d;c=c||{min:Number.MIN_VALUE,max:Number.MAX_VALUE};"vertical"==b?(b=cr.Basis.YAxisBasis,d=!1):(b=cr.Basis.XAxisBasis,d=!0);return new cr.GraphAxis(document.getElementById(a),c.min,c.max,b,d)},DataSeriesPlot=function(a,b,c,d){return new cr.Plot(a,b,c)},PlotContainer=function(a,b,c){return new cr.SeriesPlotContainer(a,b,c)},SequenceNumber=
+function(){};SequenceNumber.getNext=function(){console.log("SequenceNumber is deprecated");return 1};document.addEventListener("DOMContentLoaded",function(){var a=a||window.parent;a.grapherLoad&&a.grapherLoad()},!1);
diff --git a/js/jquery.mousewheel.min.js b/js/jquery.mousewheel.min.js
new file mode 100644
index 0000000..bb7f43f
--- /dev/null
+++ b/js/jquery.mousewheel.min.js
@@ -0,0 +1,8 @@
+/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Version: 3.1.12
+ *
+ * Requires: jQuery 1.2.2+
+ */
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
\ No newline at end of file
diff --git a/js/org/bodytrack/grapher/PlotManager.js b/js/org/bodytrack/grapher/PlotManager.js
index 7282368..2ae27de 100644
--- a/js/org/bodytrack/grapher/PlotManager.js
+++ b/js/org/bodytrack/grapher/PlotManager.js
@@ -316,6 +316,7 @@ if (!window['$']) {
          var element = $("#" + elementId);
          element.width(width);
          wrappedAxis.setSize(width, element.height(), SequenceNumber.getNext());
+
       };
 
       /**
@@ -334,6 +335,7 @@ if (!window['$']) {
          // Tell the DateAxis instance the size of its container div
          var dateAxisElement = $("#" + elementId);
          wrappedAxis.setSize(dateAxisElement.width(), dateAxisElement.height(), SequenceNumber.getNext());
+
       })();
    };
 
@@ -463,6 +465,7 @@ if (!window['$']) {
          var element = $("#" + elementId);
          element.height(height);
          wrappedAxis.setSize(element.width(), height, SequenceNumber.getNext());
+
       };
 
       var padRange = function(range) {
@@ -783,9 +786,9 @@ if (!window['$']) {
             throw new Error("The plotId must be unique to the PlotContainer.")
          }
 
-         if (typeof datasource !== 'function') {
-            throw new Error("The datasource must be a function.")
-         }
+         //if (typeof datasource !== 'function') {
+        //    throw new Error("The datasource must be a function.")
+         //}
 
          if (!isNumberOrString(yAxisElementId)) {
             throw new Error("The yAxisElementId must be a number or a string.")
@@ -897,6 +900,7 @@ if (!window['$']) {
          var element = $("#" + elementId);
          element.width(width);
          wrappedPlotContainer.setSize(width, element.height(), SequenceNumber.getNext());
+
       };
 
       /**
@@ -919,7 +923,6 @@ if (!window['$']) {
       // the "constructor"
       (function() {
          wrappedPlotContainer = new PlotContainer(elementId, false, []);
-
          // set the width to be the same width as its DateAxis
          self.setWidth(dateAxis.getWidth());
       })();
@@ -1194,4 +1197,4 @@ if (!window['$']) {
          $(window).resize(updateWidth);
       })();
    };
-})();
\ No newline at end of file
+})();