-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·251 lines (229 loc) · 7.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<style type="text/css">
body { background-color: white; height: 100%; margin: 0; padding: 0; }
#chart-container { width: 100%; height: 100%; display: block; position:absolute; bottom:0; top:0; left:0; right:0; margin: auto; overflow: hidden; }
</style>
<script type="text/javascript">
// variables for the first series
var series_1_channel_id = 89702;
var series_1_field_number = 1;
var series_1_read_api_key = 'JK9TGQ5BVODEBSS2';
var series_1_days = 3;
var series_1_color = '#d62020';
// variables for the second series
var series_2_channel_id = 89702;
var series_2_field_number = 2;
var series_2_read_api_key = 'JK9TGQ5BVODEBSS2';
var series_2_days = 3;
var series_2_color = '#00aaff';
// variables for the second series
var series_3_channel_id = 89702;
var series_3_field_number = 6;
var series_3_read_api_key = 'JK9TGQ5BVODEBSS2';
var series_3_days = 3;
var series_3_color = '#00ff00';
// variables for the second series
var series_4_channel_id = 89702;
var series_4_field_number = 7;
var series_4_read_api_key = 'JK9TGQ5BVODEBSS2';
var series_4_days = 3;
var series_4_color = '#000000';
// variables for the second series
var series_5_channel_id = 89702;
var series_5_field_number = 8;
var series_5_read_api_key = 'JK9TGQ5BVODEBSS2';
var series_5_days = 3;
var series_5_color = '#000000';
// chart title
var chart_title = 'Particulate matter';
// y axis title
var y_axis_title = 'ug/m3';
// user's timezone offset
var my_offset = new Date().getTimezoneOffset();
// chart variable
var my_chart;
// when the document is ready
$(document).on('ready', function() {
// add a blank chart
addChart();
addSeries(series_1_channel_id, series_1_field_number, series_1_read_api_key, series_1_days, series_1_color);
addSeries(series_2_channel_id, series_2_field_number, series_2_read_api_key, series_2_days, series_2_color);
addSeries(series_3_channel_id, series_3_field_number, series_3_read_api_key, series_3_days, series_3_color);
addSeries(series_4_channel_id, series_4_field_number, series_4_read_api_key, series_4_days, series_4_color);
addSeries(series_5_channel_id, series_5_field_number, series_5_read_api_key, series_5_days, series_5_color);
});
// add the base chart
function addChart() {
// variable for the local date in milliseconds
var localDate;
// specify the chart options
var chartOptions = {
chart: {
type: 'area',
renderTo: 'chart-container',
backgroundColor: '#ffffff',
events: { }
},
title: {
margin: 5,
text: chart_title
},
plotOptions: {
series: {
marker: { radius: 0 },
animation: true,
step: false,
borderWidth: 0,
turboThreshold: 0
},
tooltip: {
// reformat the tooltips so that local times are displayed
formatter: function() {
var d = new Date(this.x + (my_offset*60000));
var n = (this.point.name === undefined) ? '' : '<br>' + this.point.name;
return this.series.name + ':<b>' + this.y + '</b>' + n + '<br>' + d.toDateString() + '<br>' + d.toTimeString().replace(/\(.*\)/, "");
}
},
},
navigator: {
enabled: false,
margin: 10
},
rangeSelector: {
margin: 10,
height: 25,
inputEnabled: false,
allButtonsEnabled: true,
selected: 0,
buttons: [{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 14,
text: '14d'
}, {
type: 'all',
text: 'All'
}]
},
xAxis: {
ordinal: false,
type: 'datetime',
title: {
text: 'Date',
style: {
fontWeight: 'bold',
fontSize: '14px'
}
},
labels: {
style: {
fontSize: '14px'
}
},
gridLineWidth: 1,
gridLineDashStyle: 'Dot'
},
yAxis: {
title: {
text: y_axis_title,
style: {
fontWeight: 'bold',
fontSize: '14px'
}
},
labels: {
align: 'left',
x: 12,
y: 6,
style: {
fontSize: '14px'
}
},
lineWidth: 1,
tickWidth: 1,
tickPosition: 'outside',
showLastLabel: 'true',
gridLineDashStyle: 'Dot',
plotLines: [{
zIndex: 10,
value: 50,
color: '#0000ff',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'PM10 limit'
}
}, {
zIndex: 10,
value: 25,
color: '#8b0000',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'PM2.5 limit'
}
}]
},
exporting: { enabled: false },
legend: { enabled: true },
credits: {
text: 'ThingSpeak.com',
href: 'https://thingspeak.com/',
style: { color: '#D62020' }
}
};
// draw the chart
my_chart = new Highcharts.StockChart(chartOptions);
}
// add a series to the chart
function addSeries(channel_id, field_number, api_key, days, color) {
var field_name = 'field' + field_number;
// get the data with a webservice call
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/fields/' + field_number + '.json?offset=0&round=2&max=500&results=8000&average=&api_key=' + api_key, function(data) {
// blank array for holding chart data
var chart_data = [];
// iterate through each feed
$.each(data.feeds, function() {
var point = new Highcharts.Point();
// set the proper values
var value = this[field_name];
point.x = getChartDate(this.created_at);
point.y = parseFloat(value);
// add location if possible
if (this.location) { point.name = this.location; }
// if a numerical value exists add it
if (!isNaN(parseInt(value))) { chart_data.push(point); }
});
// add the chart data
if((field_number == 1) || (field_number == 2))
{
my_chart.addSeries({ type: 'area', data: chart_data, name: data.channel[field_name], color: color, zIndex: (2 - field_number), legendIndex: (2 - field_number) });
}
else
{
my_chart.addSeries({ type: 'line', data: chart_data, name: data.channel[field_name], color: color, zIndex: field_number, legendIndex: (10 - field_number) });
}
});
}
// converts date format from JSON
function getChartDate(d) {
// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
return Date.parse(d) - (my_offset * 60000);
}
</script>
</head>
<body>
<div id="chart-container">
<img alt="Ajax loader" src="//thingspeak.com/assets/loader-transparent.gif" style="position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;" />
</div>
</body>
</html>