plot-manager/index5.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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;
      }

      .y_axis_label {
         position: absolute;
         text-align: center;
         font-size: 8pt;
         height: auto;
      }

      .rotate_90 {
         transform: rotate(90deg);
         -ms-transform: rotate(90deg);
         -webkit-transform: rotate(90deg);
      }
   </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 plotManager;

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

         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
                   - Math.max($("#y_axis_label1").height(), $("#y_axis_label2").height()) // the max height of the Y axis labels
                   - 3;                                                                   // grapher and Y axis borders
         });

         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", 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
            var positionLabel = function(labelElementId, yAxisElementId) {
               var yAxisElement = $("#" + yAxisElementId);
               var yAxisWidth = yAxisElement.width();
               var yAxisHeight = yAxisElement.height();

               var yAxisLabelElement = $("#" + labelElementId);
               yAxisLabelElement.width(yAxisElement.height()); // set the width == height since we're rotating
               var yAxisLabelHeight = yAxisLabelElement.height();

               // compute the position of the y-axis label
               var yAxisLabelLeft = Math.round(yAxisWidth + yAxisLabelHeight / 2 - yAxisHeight / 2 + 2);
               var yAxisLabelTop = Math.round(yAxisHeight / 2 - yAxisLabelHeight / 2);
               yAxisLabelElement.css("top", yAxisLabelTop + "px").css("left", yAxisLabelLeft + "px");
            };

            positionLabel('y_axis_label1', 'y_axis1');
            positionLabel('y_axis_label2', 'y_axis2');
         };

         // add a resize handler to position
         $(window).resize(positionLabels);

         // set the initial position of the labels
         positionLabels();
      };
   </script>
</head>
<body>
<p>
   Two auto-resizing plots in separate plot containers, with Y axis labels.
</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_container1" class="plot_container" style="width:400px;height:300px;"></div>
         </td>
         <td>
            <div id="y_axis1" class="y_axis" style="height:300px">
               <div id="y_axis_label1" class="rotate_90 y_axis_label">PM 2.5</div>
            </div>
         </td>
      </tr>
      <tr>
         <td>
            <div id="plot_container2" class="plot_container" style="width:400px;height:300px;border-top:0"></div>
         </td>
         <td>
            <div id="y_axis2" class="y_axis" style="height:300px;border-top:0">
               <div id="y_axis_label2" class="rotate_90 y_axis_label">Ozone</div>
            </div>
         </td>
      </tr>
   </table>
</div>
</body>
</html>