137 lines
5.1 KiB
Plaintext
137 lines
5.1 KiB
Plaintext
|
<!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 type="text/javascript" src="//thingspeak.com/highcharts-3.0.8.js"></script>
|
||
|
|
<script type="text/javascript" src="//thingspeak.com/exporting.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
// variables for the first series
|
||
|
|
var series_1_channel_id = 9;
|
||
|
|
var series_1_field_number = 1;
|
||
|
|
var series_1_read_api_key = '';
|
||
|
|
var series_1_results = 10;
|
||
|
|
var series_1_color = '#d62020';
|
||
|
|
|
||
|
|
// variables for the second series
|
||
|
|
var series_2_channel_id = 9;
|
||
|
|
var series_2_field_number = 2;
|
||
|
|
var series_2_read_api_key = '';
|
||
|
|
var series_2_results = 10;
|
||
|
|
var series_2_color = '#00aaff';
|
||
|
|
|
||
|
|
// chart title
|
||
|
|
var chart_title = 'Light & Temperature';
|
||
|
|
// y axis title
|
||
|
|
var y_axis_title = 'Values';
|
||
|
|
|
||
|
|
// 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();
|
||
|
|
// add the first series
|
||
|
|
addSeries(series_1_channel_id, series_1_field_number, series_1_read_api_key, series_1_results, series_1_color);
|
||
|
|
// add the second series
|
||
|
|
addSeries(series_2_channel_id, series_2_field_number, series_2_read_api_key, series_2_results, series_2_color);
|
||
|
|
});
|
||
|
|
|
||
|
|
// add the base chart
|
||
|
|
function addChart() {
|
||
|
|
// variable for the local date in milliseconds
|
||
|
|
var localDate;
|
||
|
|
|
||
|
|
// specify the chart options
|
||
|
|
var chartOptions = {
|
||
|
|
chart: {
|
||
|
|
renderTo: 'chart-container',
|
||
|
|
defaultSeriesType: 'line',
|
||
|
|
backgroundColor: '#ffffff',
|
||
|
|
events: { }
|
||
|
|
},
|
||
|
|
title: { text: chart_title },
|
||
|
|
plotOptions: {
|
||
|
|
series: {
|
||
|
|
marker: { radius: 3 },
|
||
|
|
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(/\(.*\)/, "");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'datetime',
|
||
|
|
title: { text: 'Date' }
|
||
|
|
},
|
||
|
|
yAxis: { title: { text: y_axis_title } },
|
||
|
|
exporting: { enabled: false },
|
||
|
|
legend: { enabled: false },
|
||
|
|
credits: {
|
||
|
|
text: 'ThingSpeak.com',
|
||
|
|
href: 'https://thingspeak.com/',
|
||
|
|
style: { color: '#D62020' }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// draw the chart
|
||
|
|
my_chart = new Highcharts.Chart(chartOptions);
|
||
|
|
}
|
||
|
|
|
||
|
|
// add a series to the chart
|
||
|
|
function addSeries(channel_id, field_number, api_key, results, 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&results=' + results + '&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
|
||
|
|
my_chart.addSeries({ data: chart_data, name: data.channel[field_name], color: color });
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// converts date format from JSON
|
||
|
|
function getChartDate(d) {
|
||
|
|
// get the data using javascript's date object (year, month, day, hour, minute, second)
|
||
|
|
// months in javascript start at 0, so remember to subtract 1 when specifying the month
|
||
|
|
// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
|
||
|
|
return Date.UTC(d.substring(0,4), d.substring(5,7)-1, d.substring(8,10), d.substring(11,13), d.substring(14,16), d.substring(17,19)) - (my_offset * 60000);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body style='background-color: white; height: 100%; margin: 0; padding: 0;'>
|
||
|
|
<div id="chart-container" style="width: 800px; height: 400px; display: block; position:absolute; bottom:0; top:0; left:0; right:0; margin: 5px 15px 15px 0; overflow: hidden;">
|
||
|
|
<%= image_tag 'ajax-loader.gif', :style => "position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;" %>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|