117 lines
3.9 KiB
Plaintext
117 lines
3.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://api.thingspeak.com/javascripts/highcharts<%= '-android' if get_header_value('user_agent').upcase.index('ANDROID') %>.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function() {
|
|
// blank array for holding chart data
|
|
var chartData = [];
|
|
// variable for the date string
|
|
var d;
|
|
// variable for the data point
|
|
var p;
|
|
// variable for the local date in milliseconds
|
|
var localDate;
|
|
// users timezone offset
|
|
var myOffset = new Date().getTimezoneOffset();
|
|
|
|
// 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
|
|
if (data == '-1') {
|
|
$('#chart-container').append('<%= t(:chart_no_access) %>');
|
|
}
|
|
|
|
// iterate through each feed
|
|
$.each(data.feeds, function() {
|
|
p = this.field<%= params[:id] %>;
|
|
// if a numerical value exists add it
|
|
if (!isNaN(parseInt(p))) {
|
|
// get the date as a string
|
|
d = this.created_at;
|
|
|
|
// add 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
|
|
localDate = 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);
|
|
chartData.push([localDate, parseFloat(p)]);
|
|
}
|
|
});
|
|
|
|
// specify the chart options
|
|
var chartOptions = {
|
|
chart: {
|
|
renderTo: 'chart-container',
|
|
defaultSeriesType: '<%= params[:type] ? "#{params[:type]}" : "line" %>',
|
|
backgroundColor: '<%= params[:bgcolor] || "#ffffff" %>'
|
|
},
|
|
title: {
|
|
text: ''
|
|
},
|
|
plotOptions: {
|
|
line: {
|
|
color: '<%= params[:color] || "#d62020" %>'
|
|
},
|
|
bar: {
|
|
color: '<%= params[:color] || "#d62020" %>'
|
|
},
|
|
column: {
|
|
color: '<%= params[:color] || "#d62020" %>'
|
|
},
|
|
series: {
|
|
marker: {
|
|
radius: 3
|
|
},
|
|
animation: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
// reformat the tooltips so that local times are displayed
|
|
formatter: function() {
|
|
var d = new Date(this.x + (myOffset*60000));
|
|
return this.series.name + ':<b>' + this.y + '</b><br/>' + d.toDateString() + '<br/>' + d.toTimeString().replace(/\(.*\)/, "");
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
title: {
|
|
text: ''
|
|
}
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: ''
|
|
}
|
|
},
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
series: [{
|
|
name: data.channel.field<%= params[:id] %>
|
|
}]
|
|
};
|
|
|
|
// add the data to the chart
|
|
chartOptions.series[0].data = chartData;
|
|
|
|
// 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 %>;
|
|
|
|
// draw the chart
|
|
new Highcharts.Chart(chartOptions);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body style='background-color: <%= params[:bgcolor] ? params[:bgcolor] : 'white' %>;'>
|
|
<div id="chart-container" style="width: <%= params[:width] ? params[:width].to_i - 25 : @width.to_i - 25 %>px; height: <%= params[:height] ? params[:height].to_i - 25 : @height.to_i - 25 %>px;"></div>
|
|
</body>
|
|
</html> |