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

initial checkin of full application

Browse Source
This commit is contained in:
ioBridge
2011-03-27 16:56:15 -04:00
parent a36868bc86
commit 740a1b338c
127 changed files with 13777 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
app/views/charts/_config.html.erb Normal file
View File

@ -0,0 +1,126 @@
<% options = '&timescale=10' if options.blank? %>
<div>
<h3><%= title %></h3>
<table class="FL MR60">
<tr>
<td><%= t(:title) %>:</td>
<td><input type="text" class="chart_options<%= index %>" id="title<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:chart_xaxis) %>:</td>
<td><input type="text" class="chart_options<%= index %>" id="xaxis<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:chart_yaxis) %>:</td>
<td><input type="text" class="chart_options<%= index %>" id="yaxis<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:chart_color) %>:</td>
<td><input type="text" class="chart_options<%= index %>" id="color<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:chart_background_color) %>:</td>
<td><input type="text" class="chart_options<%= index %>" id="bgcolor<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:chart_type) %>:</td>
<td>
<select class="chart_options<%= index %>" id="type<%= index %>">
<option>line</option>
<option>bar</option>
<option>column</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="button<%= index %>" value="<%= t(:chart_update) %>" /></td>
</tr>
</table>
<table>
<tr>
<td><%= t(:days) %>:</td>
<td><input type="text" class="chart_options<%= index %> shortfield" id="days<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:timescale) %>:</td>
<td><input type="text" class="chart_options<%= index %> shortfield" id="timescale<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:average) %>:</td>
<td><input type="text" class="chart_options<%= index %> shortfield" id="average<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:median) %>:</td>
<td><input type="text" class="chart_options<%= index %> shortfield" id="median<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:sum) %>:</td>
<td><input type="text" class="chart_options<%= index %> shortfield" id="sum<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:chart_round) %>:</td>
<td><input type="text" class="chart_options<%= index %> shortfield" id="round<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:width) %>:</td>
<td><input type="text" class="chart_options<%= index %> shortfield" id="width<%= index %>" /></td>
</tr>
<tr>
<td><%= t(:height) %>:</td>
<td><input type="text" class="chart_options<%= index %> shortfield" id="height<%= index %>" /></td>
</tr>
</table>
<br class="CL" />
<iframe id="iframe<%= index %>" width="<%= width %>" height="<%= height %>" style="border: 1px solid #cccccc;" src="" default_src="<%= src %>"></iframe>
<br /><br />
<%= t(:chart_embed_code) %>:
<br />
<textarea id="embed<%= index %>" rows="5" cols="53">&lt;iframe width="<%= width %>" height="<%= height %>" style="border: 1px solid #cccccc;" src="<%= src %>">&lt;/iframe></textarea>
</div>
<br /><br /><br />
<script type="text/javascript">
$(document).ready(function() {
// set initial saved values
$.each(('<%= options.gsub(/'/, "%27") if options %>'.split('&amp;')), function(index, value) {
if (value.length > 0) {
$('#' + value.split('=')[0] + '<%= index %>').val(decodeURIComponent(value.split('=')[1]));
}
});
// draw initial chart with saved options
updateChart(<%= index %>, false);
});
// event to capture unfocus of textbox
$('.chart_options<%= index %>').blur(function() {
// if value exists, update the chart
if ($(this).val().length > 0) {
updateChart(<%= index %>, true);
}
});
// event to capture enter key in textboxes
$('.chart_options<%= index %>').keyup(function(e) {
// if enter key
if (e.keyCode == 13) {
// if value exists, update the chart
if ($(this).val().length > 0) {
updateChart(<%= index %>, true);
}
}
});
// event to capture update button click
$('#button<%= index %>').click(function() {
updateChart(<%= index %>, true);
});
</script>

103
app/views/charts/index.html.erb Normal file
View File

@ -0,0 +1,103 @@
<%= javascript_include_tag 'rest' %>
<h2>
<%= link_to t(:channels), channels_path %> &raquo;
<%= link_to channel_path(@channel.id) do %> <%= t(:channel) %> <%= @channel.id %><% end %> &raquo;
<%= t(:charts) %>
</h2>
<%= render :partial => 'config',
:locals => {
:title => t(:chart_example),
:src => "https://api.thingspeak.com/channels/3/charts/1",
:options => '&timescale=60&round=2',
:index => 0,
:width => @width,
:height => @height
}
%>
<h3><%= t(:chart_owned) %></h3>
<% @channel.attribute_names.each do |attr| %>
<% if attr.index('field') and @channel[attr] and !@channel[attr].empty? %>
<%= render :partial => 'config',
:locals => {
:title => "#{@channel.name} - #{@channel[attr]}",
:src => "#{@domain}channels/#{@channel_id}/charts/#{attr[-1]}",
:options => @channel["options#{attr[-1]}"],
:index => attr[-1],
:width => @width,
:height => @height
}
%>
<% end %>
<% end %>
<script type="text/javascript">
$(document).ready(function() {
// if chrome/safari error occurs, reload page
if ($('#title0').val() == '60' && $('#color0').val() == '10') {
window.location.reload();
}
});
// update the chart with all the textbox values
function updateChart(index, postUpdate) {
// default width and height
var width = <%= @width %>;
var height = <%= @height %>;
// get old src
var src = $('#iframe' + index).attr('default_src').split('?')[0];
// if not a line chart, a timeslice should be present or set timescale=30
if ($('#type' + index).val() != 'line') {
if ($('#timescale' + index).val().length == 0 && $('#average' + index).val().length == 0 && $('#median' + index).val().length == 0 && $('#sum' + index).val().length == 0) {
$('#timescale' + index).val(30);
}
}
// add inputs to array
var inputs = [];
$('.chart_options' + index).each(function() {
var v = $(this).val();
var id = $(this).attr('id');
if (v.length > 0) { inputs.push([id.substring(0, id.length-1), v]); }
});
// create querystring
var qs = '';
while (inputs.length > 0) {
var p = inputs.pop();
if (p[0] == 'width') { width = parseInt(p[1]); }
if (p[0] == 'height') { height = parseInt(p[1]); }
// don't add type=line to querystring, it's the default value
if (!(p[0] == 'type' && p[1] == 'line')) {
qs += '&' + p[0] + '=' + encodeURIComponent(p[1]);
}
}
// if querystring exists, add it to src
if (qs.length > 0) { src += '?' + qs.substring(1); }
// save chart options to database
if (postUpdate && index > 0) {
$.update(
'/channels/<%= @channel_id %>/charts/' + index,
{ options: qs }
);
}
// set embed code
$('#embed' + index).val('<iframe width="' + width + '" height="' + height + '" style="border: 1px solid #cccccc;" src="' + src + '"></iframe>');
// set new src
$('#iframe' + index).attr('src', src);
$('#iframe' + index).attr('width', width);
$('#iframe' + index).attr('height', height);
}
</script>

117
app/views/charts/show.html.erb Normal file
View File

@ -0,0 +1,117 @@
<!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>