103 lines
2.9 KiB
Plaintext
103 lines
2.9 KiB
Plaintext
<%= javascript_include_tag 'rest' %>
|
|
|
|
<h2>
|
|
<%= link_to t(:channels), channels_path %> »
|
|
<%= link_to channel_path(@channel.id) do %> <%= t(:channel) %> <%= @channel.id %><% end %> »
|
|
<%= t(:charts) %>
|
|
</h2>
|
|
|
|
<%= render :partial => 'config',
|
|
:locals => {
|
|
:title => t(:chart_example),
|
|
:src => "https://api.thingspeak.com/channels/3/charts/1",
|
|
:options => '×cale=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> |