2011-03-27 22:56:15 +02:00
<!DOCTYPE html>
2014-04-22 04:03:42 +02:00
<html style="height: 100%;">
2014-02-17 18:05:39 +01:00
<head>
2014-03-22 18:21:45 +01:00
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2014-06-27 04:45:44 +02:00
<script type="text/javascript" src="//thingspeak.com/highcharts-3.0.8.js"></script>
<script type="text/javascript" src="//thingspeak.com/exporting.js"></script>
2014-02-17 18:05:39 +01:00
<%= javascript_include_tag 'application' %>
<script type="text/javascript">
// user's timezone offset
var myOffset = new Date().getTimezoneOffset();
// converts date format from JSON
function getChartDate(d) {
2014-03-22 18:21:45 +01:00
// 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)) - (myOffset * 60000);
2011-05-25 23:09:56 +02:00
}
2011-03-27 22:56:15 +02:00
2014-07-23 19:45:15 +02:00
$(document).on('page:load ready', function() {
2014-02-17 18:05:39 +01:00
// blank array for holding chart data
var chartData = [];
// variable for the local date in milliseconds
var localDate;
// variable for the last date added to the chart
var last_date;
// get the data with a webservice call
$.getJSON('<%= "#{@domain}channels/#{params[:channel_id]}/field/#{params[:id]}.json?callback=?&offset=0#{@qs}" %>', function(data) {
// if no access
2014-03-22 18:21:45 +01:00
if (data == '-1') { $('#chart-container').append('<%= t(:chart_no_access) %>'); }
2014-02-17 18:05:39 +01:00
// iterate through each feed
$.each(data.feeds, function() {
2014-03-22 18:21:45 +01:00
var p = new Highcharts.Point();
// set the proper values
var v = this.field<%= params[:id] %>;
p.x = getChartDate(this.created_at);
p.y = parseFloat(v);
// add location if possible
if (this.location) { p.name = this.location; }
// if a numerical value exists add it
if (!isNaN(parseInt(v))<% if params[:max] %> && p.y <= <%= params[:max]%><% end %><% if params[:min] %> && p.y >= <%= params[:min]%><% end %>) { chartData.push(p); }
});
2014-02-17 18:05:39 +01:00
// specify the chart options
var chartOptions = {
2014-03-22 18:21:45 +01:00
chart: {
renderTo: 'chart-container',
defaultSeriesType: '<%= params[:type] ? "#{params[:type]}" : "line" %>',
backgroundColor: '<%= params[:bgcolor] || "#ffffff" %>',
events: {
load: function() {
//if dynamic and no "timeslice" options are set
// GAK 02/16/2013 Let's try to add the last "average" slice if params[:average]
var url = '<%= "#{@domain}channels/#{params[:channel_id]}/feed/last.json?callback=?&offset=0&location=true#{@qs}" %>' ;
if ("<%= params[:average] %>".length > 0) {
url = '<%= "#{@domain}channels/#{params[:channel_id]}/feed/last_average.json?callback=?&offset=0&location=true&average=#{params[:average]}#{@qs}" %>' ;
} else if ("<%= params[:median] %>".length > 0) {
url = '<%= "#{@domain}channels/#{params[:channel_id]}/feed/last_median.json?callback=?&offset=0&location=true&median=#{params[:median]}#{@qs}" %>' ;
} else if ("<%= params[:sum] %>".length > 0) {
url = '<%= "#{@domain}channels/#{params[:channel_id]}/feed/last_sum.json?callback=?&offset=0&location=true&sum=#{params[:sum]}#{@qs}" %>' ;
}
if ('true' === '<%= params[:dynamic] %>' && ('<%= params[:timescale] %>'.length < 1)) {
// push data every 15 seconds
setInterval(function() {
// get the data with a webservice call if we're just getting the last channel
$.getJSON(url, function(data) {
// if data exists
if (data && data.field<%= params[:id] %>) {
2014-02-17 18:05:39 +01:00
var p = new Highcharts.Point();
// set the proper values
var v = data.field<%= params[:id] %>;
p.x = getChartDate(data.created_at);
p.y = parseFloat(v);
// add location if possible
if (data.location) { p.name = data.location; }
// get the last date if possible
if (dynamicChart.series[0].data.length > 0) {
2014-03-22 18:21:45 +01:00
last_date = dynamicChart.series[0].data[dynamicChart.series[0].data.length-1].x;
2014-02-17 18:05:39 +01:00
}
var shift = <%= (@push=='true') ? 'true' : 'false' %> ; //default for shift
//if push is requested in parameters
// then if results is and data.length is < results, shift = false
var results = <%= (@results) ? @results : 60 %>;
if ( results && dynamicChart.series[0].data.length+1 >= results ) {
2014-03-22 18:21:45 +01:00
shift = true ;
2014-02-17 18:05:39 +01:00
}
// if a numerical value exists and it is a new date, add it
if (!isNaN(parseInt(v)) && (p.x != last_date)<% if params[:max] %> && p.y <= <%= params[:max]%><% end %><% if params[:min] %> && p.y >= <%= params[:min]%><% end %>) {
2014-03-22 18:21:45 +01:00
dynamicChart.series[0].addPoint(p, true, shift);
2014-02-17 18:05:39 +01:00
}
else {
2014-03-22 18:21:45 +01:00
dynamicChart.series[0].data[dynamicChart.series[0].data.length-1].update(p);
2014-02-17 18:05:39 +01:00
}
2011-05-25 23:09:56 +02:00
}
2014-03-22 18:21:45 +01:00
});
2014-02-17 18:05:39 +01:00
2011-05-25 23:09:56 +02:00
}, 15000);
}
}
2014-02-17 18:05:39 +01:00
}
2011-05-25 23:09:56 +02:00
},
title: {
2014-02-17 18:05:39 +01:00
text: ''
2011-05-25 23:09:56 +02:00
},
plotOptions: {
line: {
color: '<%= params[:color] || "#d62020" %>'
},
bar: {
color: '<%= params[:color] || "#d62020" %>'
},
column: {
color: '<%= params[:color] || "#d62020" %>'
},
2014-04-04 05:08:00 +02:00
spline: {
color: '<%= params[:color] || "#d62020" %>'
},
2011-05-25 23:09:56 +02:00
series: {
marker: {
radius: 3
},
animation: true,
2011-05-25 22:58:44 +02:00
step: <%= params[:step] || 'false' %>,
2014-02-17 18:05:39 +01:00
borderWidth: 0,
turboThreshold: 0
2011-05-25 23:09:56 +02:00
}
},
tooltip: {
2014-02-17 18:05:39 +01:00
// reformat the tooltips so that local times are displayed
formatter: function() {
var d = new Date(this.x + (myOffset*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(/\(.*\)/, "");
}
2011-05-25 23:09:56 +02:00
},
xAxis: {
2014-02-17 18:05:39 +01:00
type: 'datetime',
title: {
text: 'test'
}
2011-05-25 23:09:56 +02:00
},
yAxis: {
2014-04-13 20:42:03 +02:00
title: {
text: ''
},
min: <%= params[:yaxismin].present? ? params[:yaxismin] : 'null '%>,
max: <%= params[:yaxismax].present? ? params[:yaxismax] : 'null' %>
2014-02-17 18:05:39 +01:00
},
exporting: {
enabled: <%= (params[:export].present? && params[:export] == 'true') ? 'true' : 'false' %>
2011-05-25 23:09:56 +02:00
},
legend: {
2014-02-17 18:05:39 +01:00
enabled: false
2011-05-25 23:09:56 +02:00
},
2014-06-27 04:45:44 +02:00
series: [
{ name: data.channel.field<%= params[:id] %> }
],
credits: {
text: 'ThingSpeak.com',
href: 'https://thingspeak.com/',
style: { color: '#D62020' }
}
};
2011-03-27 22:56:15 +02:00
2014-02-17 18:05:39 +01:00
// add the data to the chart
chartOptions.series[0].data = chartData;
2011-03-27 22:56:15 +02:00
2014-02-17 18:05:39 +01:00
// set chart labels here so that decoding occurs properly
chartOptions.title.text = <% if params[:title] %>decodeURIComponent('<%= u(params[:title]) %>')<% else %>data.channel.name<% end %>;
chartOptions.xAxis.title.text = <% if params[:xaxis] %>decodeURIComponent('<%= u(params[:xaxis]) %>')<% else %>'Date'<% end %>;
chartOptions.yAxis.title.text = <% if params[:yaxis] %>decodeURIComponent('<%= u(params[:yaxis]) %>')<% else %><%= "data.channel.field#{params[:id]}" %><% end %>;
2011-03-27 22:56:15 +02:00
2014-02-17 18:05:39 +01:00
// draw the chart
var dynamicChart = new Highcharts.Chart(chartOptions);
2014-10-02 19:59:11 +02:00
// end getJSON success
})
// chained to getjson, on error
.error(function() {
$('#chart-container').html('Invalid Channel.');
});
2011-03-27 22:56:15 +02:00
2014-03-22 18:21:45 +01:00
}); // end document.ready
2011-03-27 22:56:15 +02:00
2011-05-25 23:09:56 +02:00
</script>
2011-03-27 22:56:15 +02:00
</head>
2014-04-22 04:03:42 +02:00
<body style='background-color: <%= params[:bgcolor] ? params[:bgcolor] : 'white' %>; height: 100%; margin: 0; padding: 0;'>
2014-05-05 18:51:10 +02:00
<div id="chart-container" style="<%= @width_style %> <%= @height_style %> display: block; position:absolute; bottom:0; top:0; left:0; right:0; margin: 5px 15px 15px 0; overflow: hidden;">
2014-04-22 04:03:42 +02:00
<%= image_tag 'ajax-loader.gif', :style => "position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;" %>
2014-03-22 18:21:45 +01:00
</div>
2011-03-27 22:56:15 +02:00
</body>
2013-02-16 03:14:51 +01:00
</html>
2014-02-17 18:05:39 +01:00
