From 8c0454287671cdaa1bff9b36fe30087ef6bec789 Mon Sep 17 00:00:00 2001
From: ioBridge <support@iobridge.com>
Date: Wed, 25 May 2011 17:09:56 -0400
Subject: [PATCH] updated charts page

---
 app/views/charts/show.html.erb | 239 +++++++++++++++++++--------------
 1 file changed, 137 insertions(+), 102 deletions(-)
diff --git a/app/views/charts/show.html.erb b/app/views/charts/show.html.erb
index 5e6c384..37175bd 100644
--- a/app/views/charts/show.html.erb
+++ b/app/views/charts/show.html.erb
@@ -1,119 +1,154 @@
 <!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();
+  <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="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">
+  
+    // 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);
+    }
 
-			// 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;
+    $(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;
 
-						// 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)]);
-					}
-				});
+      // 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" %>'
-					},
-					title: {
-						text: ''
-					},
-					plotOptions: {
-						line: {
-							color: '<%= params[:color] || "#d62020" %>'
-						},
-						bar: {
-							color: '<%= params[:color] || "#d62020" %>'
-						},
-						column: {
-							color: '<%= params[:color] || "#d62020" %>'
-						},
-						series: {
-							marker: {
-								radius: 3
-							},
-							animation: true,
+        // 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);
+                }
+              }
+            }
+          },
+          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' %>,
               borderWidth: 0
-						}
-					},
-					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] %>
-					}]
-				};
+            }
+          },
+          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(/\(.*\)/, "");
+            }
+          },
+          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;
+        // 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
-				new Highcharts.Chart(chartOptions);
+        // draw the chart
+        var dynamicChart = new Highcharts.Chart(chartOptions);
 
-			});
+      });
 
-		});
-	
-	</script>
+    });
+  
+  </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>
+  <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>
\ No newline at end of file
