plot-manager/index3.html at d037e84ecc71ff06bbab6a0c45206a10d0137a55 · BodyTrack/plot-manager · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <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;
         border: 1px solid black;
         border-bottom-width: 0;
      }

      .plot_container {
         position: relative;
         border: 1px solid black;
      }

      .plot_container > canvas:focus {
         outline: none;
      }

      .y_axis {
         position: relative;
         width: 42px;
         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="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 feedIdOrApiKey = 4231;
      var channelName = "PM2_5";

      var plotManager;
      window.grapherLoad = function() {
         var maxTimeSecs = Date.now() / 1000;
         var minTimeSecs = maxTimeSecs - 7 * 24 * 60 * 60;

         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
                   - $(".y_axis").width()    // Y axis width
                   - 20                      // left and right margins
                   - 3;                      // grapher and Y axis borders
         });


         var minValue = 0;
         var maxValue = 20;

         plotManager.addDataSeriesPlot("my_plot", datasource, "plot_container", "y_axis", minValue, maxValue);

         // configure checkbox
         $("#will_auto_resize").click(function() {
            plotManager.setWillAutoResizeWidth($("#will_auto_resize").prop("checked"));
         });
      };
   </script>
</head>
<body>
<p>
   An auto-resizing plot which also specifies initial visible ranges for the date axis and the Y axis. You can control
   whether auto-resizing is enabled by toggling the checkbox.
</p>
<div id="grapher_container" class="noselect">
   <table id="grapher" border="0" cellpadding="0" cellspacing="0">
      <tr>
         <td>
            <div id="date_axis" class="date_axis" style="width:400px;"></div>
         </td>
         <td></td>
      </tr>
      <tr>
         <td>
            <div id="plot_container" class="plot_container" style="width:400px;height:300px;"></div>
         </td>
         <td>
            <div id="y_axis" class="y_axis" style="height:300px"></div>
         </td>
      </tr>
   </table>
</div>
<input type="checkbox" id="will_auto_resize" value="true" checked="checked"><label for="will_auto_resize">Auto-resize</label>
</body>
</html>