update with changes from Production branch
This commit is contained in:
@ -1,126 +1,196 @@
|
||||
<% options = '×cale=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>
|
||||
<div id="chartOptions<%= index %>" class="chartOptions"><%= options %></div>
|
||||
|
||||
<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>
|
||||
<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><%= t(:chart_is_dynamic) %>:</td>
|
||||
<td>
|
||||
<select class="chart_options<%= index %>" id="dynamic_<%= index %>" >
|
||||
<option value=""></option>
|
||||
<option value="true">True</option>
|
||||
</select>
|
||||
</td>
|
||||
|
||||
<br class="CL" />
|
||||
</tr>
|
||||
|
||||
<iframe id="iframe<%= index %>" width="<%= width %>" height="<%= height %>" style="border: 1px solid #cccccc;" src="" default_src="<%= src %>"></iframe>
|
||||
<tr>
|
||||
<td><%= t(:days) %>:</td>
|
||||
<td><input type="text" class="chart_options<%= index %> shortfield" id="days_<%= index %>" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><%= t(:results) %>:</td>
|
||||
<td><input type="text" class="chart_options<%= index %> shortfield" id="results_<%= index %>" /></td>
|
||||
</tr>
|
||||
<% if displayconfig %>
|
||||
<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>
|
||||
<% end %>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<%= t(:chart_embed_code) %>:
|
||||
<br />
|
||||
<textarea id="embed<%= index %>" rows="5" cols="53"><iframe width="<%= width %>" height="<%= height %>" style="border: 1px solid #cccccc;" src="<%= src %>"></iframe></textarea>
|
||||
</div>
|
||||
</table>
|
||||
|
||||
<br /><br /><br />
|
||||
<table>
|
||||
<tr>
|
||||
<td><%= t(:timescale) %>:</td>
|
||||
<td>
|
||||
<select class="chart_options<%= index %> mutuallyexclusive<%= index %>" id="timescale_<%= index %>" >
|
||||
<option value=""></option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="60">60</option>
|
||||
<option value="240">240</option>
|
||||
<option value="720">720</option>
|
||||
<option value="1440">1440</option>
|
||||
</select>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><%= t(:average) %>:</td>
|
||||
<td>
|
||||
<select class="chart_options<%= index %> mutuallyexclusive<%= index %>" id="average_<%= index %>" >
|
||||
<option value=""></option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="60">60</option>
|
||||
<option value="240">240</option>
|
||||
<option value="720">720</option>
|
||||
<option value="1440">1440</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><%= t(:median) %>:</td>
|
||||
<td>
|
||||
<select class="chart_options<%= index %> mutuallyexclusive<%= index %>" id="median_<%= index %>" >
|
||||
<option value=""></option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="60">60</option>
|
||||
<option value="240">240</option>
|
||||
<option value="720">720</option>
|
||||
<option value="1440">1440</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><%= t(:sum) %>:</td>
|
||||
<td>
|
||||
<select class="chart_options<%= index %> mutuallyexclusive<%= index %>" id="sum_<%= index %>" >
|
||||
<option value=""></option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="60">60</option>
|
||||
<option value="240">240</option>
|
||||
<option value="720">720</option>
|
||||
<option value="1440">1440</option>
|
||||
</select>
|
||||
</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(:chart_min) %>: </td>
|
||||
<td><input type="text" class="chart_options<%= index %> shortfield" id="min_<%= index %>" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><%= t(:chart_max) %>: </td>
|
||||
<td><input type="text" class="chart_options<%= index %> shortfield" id="max_<%= index %>" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="button" id="button<%= index %>" value="<%= t(:chart_update) %>" /></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<% if displayconfig %>
|
||||
<%= render :partial => 'charts/display',
|
||||
:locals => {
|
||||
:index => index,
|
||||
:width => @width,
|
||||
:height => @height,
|
||||
:src => src,
|
||||
:options => options
|
||||
}
|
||||
%>
|
||||
<% end %>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
// set initial saved values
|
||||
$.each(('<%= options.gsub(/'/, "%27") if options %>'.split('&')), 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);
|
||||
}
|
||||
});
|
||||
var options = '<%= options.gsub(/'/, "%27") if options %>';
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
});
|
||||
$(document).ready(function() {
|
||||
// set initial saved values
|
||||
$.each((options.split('&')), setupChartForm(<%= index %> ));
|
||||
// draw initial chart with saved options
|
||||
var width = <%= (@width) ? @width : 450 %>;
|
||||
var height = <%= @height ? @height : 260 %>;
|
||||
updateChart(<%= index %>, false, width, height, <%= @channel.id %>);
|
||||
|
||||
// event to capture update button click
|
||||
$('#button<%= index %>').click(function() {
|
||||
updateChart(<%= index %>, true);
|
||||
});
|
||||
</script>
|
||||
});
|
||||
|
||||
// event to capture update button click
|
||||
$('#button<%= index %>').click(function() {
|
||||
var width = <%= (@width) ? @width : 450 %>;
|
||||
var height = <%= @height ? @height : 260 %>;
|
||||
updateChart(<%= index %>, true, width, height, <%= @channel.id %>);
|
||||
|
||||
});
|
||||
|
||||
|
||||
$('.mutuallyexclusive<%= index %>').change(function() {
|
||||
selectedValue = $(this).val();
|
||||
$('.mutuallyexclusive<%= index %>').each(function () {
|
||||
$(this).val("");
|
||||
});
|
||||
$(this).val(selectedValue);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
11
app/views/charts/_display.html.erb
Normal file
11
app/views/charts/_display.html.erb
Normal file
@ -0,0 +1,11 @@
|
||||
<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"><iframe width="<%= width %>" height="<%= height %>" style="border: 1px solid #cccccc;" src="<%= src %>"></iframe></textarea>
|
||||
|
||||
<br /><br /><br />
|
@ -1,104 +1,66 @@
|
||||
<script type="text/javascript" src="/javascripts/rest.js"></script>
|
||||
<div id="maincontent">
|
||||
<h2>
|
||||
<%= link_to t(:channels), channels_path %> »
|
||||
<%= link_to channel_path(@channel.id) do %> <%= t(:channel) %> <%= @channel.id %><% end %> »
|
||||
<%= t(:charts) %>
|
||||
</h2>
|
||||
|
||||
<% if !@channel.active? %>
|
||||
<%= render :partial => 'config',
|
||||
:locals => {
|
||||
:displayconfig => true,
|
||||
: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>
|
||||
<% end %>
|
||||
|
||||
<% @channel.attribute_names.each do |attr| %>
|
||||
<% if attr.index('field') and @channel[attr] and !@channel[attr].empty? %>
|
||||
|
||||
<%= render :partial => 'config',
|
||||
:locals => {
|
||||
:displayconfig => true,
|
||||
: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 %>
|
||||
</div>
|
||||
|
||||
<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 %>
|
||||
<div id="sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="helplink">(<a href="http://community.thingspeak.com/documentation/api/#charts"><%= t(:help_options) %></a>)</div>
|
||||
<h2><%= t(:help_charts) %></h2>
|
||||
<%= t(:help_charts_options) %>
|
||||
<br /><br />
|
||||
<%= t(:help_charts_embed) %>
|
||||
<br /><br />
|
||||
• <a href="http://community.thingspeak.com/tutorials/wordpress/how-to-embed-a-thingspeak-chart-on-your-wordpress-blog/">WordPress Tutorial</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
// if chrome/safari error occurs, reload page
|
||||
if ($('#title0').val() == '60' && $('#color0').val() == '10') {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
$(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>
|
||||
</script>
|
||||
|
@ -1,89 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="/javascripts/jquery-1.6.js"></script>
|
||||
<script type="text/javascript" src="/javascripts/highcharts<%= '-android' if get_header_value('user_agent').upcase.index('ANDROID') %>.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// user's timezone offset
|
||||
var myOffset = new Date().getTimezoneOffset();
|
||||
|
||||
// converts date format from JSON
|
||||
function getChartDate(d) {
|
||||
// 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);
|
||||
}
|
||||
<head>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
<%= javascript_include_tag 'application' %>
|
||||
|
||||
$(document).ready(function() {
|
||||
// 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;
|
||||
<script type="text/javascript">
|
||||
|
||||
// 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) %>');
|
||||
// user's timezone offset
|
||||
var myOffset = new Date().getTimezoneOffset();
|
||||
|
||||
// converts date format from JSON
|
||||
function getChartDate(d) {
|
||||
// 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);
|
||||
}
|
||||
|
||||
// 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
|
||||
var chartOptions = {
|
||||
$(document).ready(function() {
|
||||
// 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
|
||||
if (data == '-1') {
|
||||
$('#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
|
||||
var chartOptions = {
|
||||
chart: {
|
||||
renderTo: 'chart-container',
|
||||
defaultSeriesType: '<%= params[:type] ? "#{params[:type]}" : "line" %>',
|
||||
backgroundColor: '<%= params[:bgcolor] || "#ffffff" %>',
|
||||
events: {
|
||||
load: function() {
|
||||
if ('true' === '<%= params[:dynamic] %>') {
|
||||
// push data every 15 seconds
|
||||
setInterval(function() {
|
||||
|
||||
// get the data with a webservice call
|
||||
$.getJSON('<%= "#{@domain}channels/#{params[:channel_id]}/feed/last.json?callback=?&offset=0&location=true" %>', function(data) {
|
||||
// if data exists
|
||||
if (data && data.field<%= params[:id] %>) {
|
||||
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) { 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);
|
||||
|
||||
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] %>) {
|
||||
|
||||
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) {
|
||||
last_date = dynamicChart.series[0].data[dynamicChart.series[0].data.length-1].x;
|
||||
}
|
||||
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 ) {
|
||||
shift = true ;
|
||||
}
|
||||
// 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, shift);
|
||||
}
|
||||
else {
|
||||
dynamicChart.series[0].data[dynamicChart.series[0].data.length-1].update(p);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}, 15000);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
text: ''
|
||||
},
|
||||
plotOptions: {
|
||||
line: {
|
||||
@ -101,54 +139,59 @@
|
||||
},
|
||||
animation: true,
|
||||
step: <%= params[:step] || 'false' %>,
|
||||
borderWidth: 0
|
||||
borderWidth: 0,
|
||||
turboThreshold: 0
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
// 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(/\(.*\)/, "");
|
||||
}
|
||||
// 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(/\(.*\)/, "");
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
type: 'datetime',
|
||||
title: {
|
||||
text: 'test'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
title: {
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
exporting: {
|
||||
enabled: <%= (params[:export].present? && params[:export] == 'true') ? 'true' : 'false' %>
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: data.channel.field<%= params[:id] %>
|
||||
}]
|
||||
};
|
||||
name: data.channel.field<%= params[:id] %>
|
||||
}]
|
||||
};
|
||||
|
||||
// add the data to the chart
|
||||
chartOptions.series[0].data = chartData;
|
||||
// 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 %>;
|
||||
// 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
|
||||
var dynamicChart = new Highcharts.Chart(chartOptions);
|
||||
// draw the chart
|
||||
var dynamicChart = 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>
|
||||
|
||||
|
Reference in New Issue
Block a user