c_meyer
/
thingspeak
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

updated charts page

This commit is contained in:
ioBridge 2011-05-25 17:09:56 -04:00
parent 95710b30b6
commit 8c04542876
1 changed files with 137 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
app/views/charts/show.html.erb
View File

@ -1,119 +1,154 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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="http<%= 's' if @ssl %>://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" src="http<%= 's' if @ssl %>://api.thingspeak.com/javascripts/highcharts<%= '-android' if get_header_value('user_agent').upcase.index('ANDROID') %>.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { // user's timezone offset
// blank array for holding chart data var myOffset = new Date().getTimezoneOffset();
var chartData = [];
// variable for the date string // converts date format from JSON
var d; function getChartDate(d) {
// variable for the data point // get the data using javascript's date object (year, month, day, hour, minute, second)
var p; // months in javascript start at 0, so remember to subtract 1 when specifying the month
// variable for the local date in milliseconds // offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
var localDate; 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);
// users timezone offset }
var myOffset = new Date().getTimezoneOffset();
// get the data with a webservice call $(document).ready(function() {
$.getJSON('<%= "#{@domain}channels/#{params[:channel_id]}/field/#{params[:id]}.json?callback=?&offset=0#{@qs}" %>', function(data) { // blank array for holding chart data
// if no access var chartData = [];
if (data == '-1') { // variable for the local date in milliseconds
$('#chart-container').append('<%= t(:chart_no_access) %>'); var localDate;
} // variable for the last date added to the chart
var last_date;
// 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) // get the data with a webservice call
// months in javascript start at 0, so remember to subtract 1 when specifying the month $.getJSON('<%= "#{@domain}channels/#{params[:channel_id]}/field/#{params[:id]}.json?callback=?&offset=0#{@qs}" %>', function(data) {
// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct // if no access
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); if (data == '-1') {
chartData.push([localDate, parseFloat(p)]); $('#chart-container').append('<%= t(:chart_no_access) %>');
} }
});
// iterate through each feed
$.each(data.feeds, function() {
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); }
});
// specify the chart options // specify the chart options
var chartOptions = { var chartOptions = {
chart: { chart: {
renderTo: 'chart-container', renderTo: 'chart-container',
defaultSeriesType: '<%= params[:type] ? "#{params[:type]}" : "line" %>', defaultSeriesType: '<%= params[:type] ? "#{params[:type]}" : "line" %>',
backgroundColor: '<%= params[:bgcolor] || "#ffffff" %>' backgroundColor: '<%= params[:bgcolor] || "#ffffff" %>',
}, events: {
title: { load: function() {
text: '' if ('true' === '<%= params[:dynamic] %>') {
}, // push data every 15 seconds
plotOptions: { setInterval(function() {
line: {
color: '<%= params[:color] || "#d62020" %>' // get the data with a webservice call
}, $.getJSON('<%= "#{@domain}channels/#{params[:channel_id]}/feed/last.json?callback=?&offset=0&location=true" %>', function(data) {
bar: { // if data exists
color: '<%= params[:color] || "#d62020" %>' if (data && data.field<%= params[:id] %>) {
}, var p = new Highcharts.Point();
column: { // set the proper values
color: '<%= params[:color] || "#d62020" %>' var v = data.field<%= params[:id] %>;
}, p.x = getChartDate(data.created_at);
series: { p.y = parseFloat(v);
marker: { // add location if possible
radius: 3 if (data.location) { p.name = data.location; }
}, // get the last date if possible
animation: true, if (dynamicChart.series[0].data.length > 0) { last_date = dynamicChart.series[0].data[dynamicChart.series[0].data.length-1].x; }
// 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 %>) {
dynamicChart.series[0].addPoint(p, true, <%= (@push) ? 'true' : 'false' %>);
}
}
});
}, 15000);
}
}
}
},
title: {
text: ''
},
plotOptions: {
line: {
color: '<%= params[:color] || "#d62020" %>'
},
bar: {
color: '<%= params[:color] || "#d62020" %>'
},
column: {
color: '<%= params[:color] || "#d62020" %>'
},
series: {
marker: {
radius: 3
},
animation: true,
step: <%= params[:step] || 'false' %>, step: <%= params[:step] || 'false' %>,
borderWidth: 0 borderWidth: 0
} }
}, },
tooltip: { tooltip: {
// reformat the tooltips so that local times are displayed // reformat the tooltips so that local times are displayed
formatter: function() { formatter: function() {
var d = new Date(this.x + (myOffset*60000)); var d = new Date(this.x + (myOffset*60000));
return this.series.name + ':<b>' + this.y + '</b><br/>' + d.toDateString() + '<br/>' + d.toTimeString().replace(/\(.*\)/, ""); 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', xAxis: {
title: { type: 'datetime',
text: '' title: {
} text: ''
}, }
yAxis: { },
title: { yAxis: {
text: '' title: {
} text: ''
}, }
legend: { },
enabled: false legend: {
}, enabled: false
series: [{ },
name: data.channel.field<%= params[:id] %> series: [{
}] name: data.channel.field<%= params[:id] %>
}; }]
};
// add the data to the chart // add the data to the chart
chartOptions.series[0].data = chartData; chartOptions.series[0].data = chartData;
// set chart labels here so that decoding occurs properly // 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.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.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 %>; chartOptions.yAxis.title.text = <% if params[:yaxis] %>decodeURIComponent('<%= u(params[:yaxis]) %>')<% else %><%= "data.channel.field#{params[:id]}" %><% end %>;
// draw the chart // draw the chart
new Highcharts.Chart(chartOptions); var dynamicChart = new Highcharts.Chart(chartOptions);
}); });
}); });
</script> </script>
</head> </head>
<body style='background-color: <%= params[:bgcolor] ? params[:bgcolor] : 'white' %>;'> <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> <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> </body>
</html> </html>