add templates for plugins: Google gauge and multiline charts

2014-10-14 19:47:57 -04:00
parent f1b6f67323
commit ee05bbd102
17 changed files with 479 additions and 31 deletions
--- a/app/views/charts/multiple_series.html.erb
+++ b/app/views/charts/multiple_series.html.erb
@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html style="height: 100%;">
+  <head>
+    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script type="text/javascript" src="//thingspeak.com/highcharts-3.0.8.js"></script>
+    <script type="text/javascript" src="//thingspeak.com/exporting.js"></script>
+
+    <script type="text/javascript">
+      // variables for the first series
+      var series_1_channel_id = 9;
+      var series_1_field_number = 1;
+      var series_1_read_api_key = '';
+      var series_1_results = 10;
+      var series_1_color = '#d62020';
+
+      // variables for the second series
+      var series_2_channel_id = 9;
+      var series_2_field_number = 2;
+      var series_2_read_api_key = '';
+      var series_2_results = 10;
+      var series_2_color = '#00aaff';
+
+      // chart title
+      var chart_title = 'Light & Temperature';
+      // y axis title
+      var y_axis_title = 'Values';
+
+      // user's timezone offset
+      var my_offset = new Date().getTimezoneOffset();
+      // chart variable
+      var my_chart;
+
+      // when the document is ready
+      $(document).on('ready', function() {
+        // add a blank chart
+        addChart();
+        // add the first series
+        addSeries(series_1_channel_id, series_1_field_number, series_1_read_api_key, series_1_results, series_1_color);
+        // add the second series
+        addSeries(series_2_channel_id, series_2_field_number, series_2_read_api_key, series_2_results, series_2_color);
+      });
+
+      // add the base chart
+      function addChart() {
+        // variable for the local date in milliseconds
+        var localDate;
+
+        // specify the chart options
+        var chartOptions = {
+          chart: {
+            renderTo: 'chart-container',
+            defaultSeriesType: 'line',
+            backgroundColor: '#ffffff',
+            events: { }
+          },
+          title: { text: chart_title },
+          plotOptions: {
+            series: {
+              marker: { radius: 3 },
+              animation: true,
+              step: false,
+              borderWidth: 0,
+              turboThreshold: 0
+            }
+          },
+          tooltip: {
+            // reformat the tooltips so that local times are displayed
+            formatter: function() {
+              var d = new Date(this.x + (my_offset*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: 'Date' }
+          },
+          yAxis: { title: { text: y_axis_title } },
+          exporting: { enabled: false },
+          legend: { enabled: false },
+          credits: {
+            text: 'ThingSpeak.com',
+            href: 'https://thingspeak.com/',
+            style: { color: '#D62020' }
+          }
+        };
+
+        // draw the chart
+        my_chart = new Highcharts.Chart(chartOptions);
+      }
+
+      // add a series to the chart
+      function addSeries(channel_id, field_number, api_key, results, color) {
+        var field_name = 'field' + field_number;
+
+        // get the data with a webservice call
+        $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/fields/' + field_number + '.json?offset=0&round=2&results=' + results + '&api_key=' + api_key, function(data) {
+
+          // blank array for holding chart data
+          var chart_data = [];
+
+          // iterate through each feed
+          $.each(data.feeds, function() {
+            var point = new Highcharts.Point();
+            // set the proper values
+            var value = this[field_name];
+            point.x = getChartDate(this.created_at);
+            point.y = parseFloat(value);
+            // add location if possible
+            if (this.location) { point.name = this.location; }
+            // if a numerical value exists add it
+            if (!isNaN(parseInt(value))) { chart_data.push(point); }
+          });
+
+          // add the chart data
+          my_chart.addSeries({ data: chart_data, name: data.channel[field_name], color: color });
+        });
+      }
+
+      // 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)) - (my_offset * 60000);
+      }
+
+  </script>
+</head>
+<body style='background-color: white; height: 100%; margin: 0; padding: 0;'>
+  <div id="chart-container" style="width: 800px; height: 400px; display: block; position:absolute; bottom:0; top:0; left:0; right:0; margin: 5px 15px 15px 0; overflow: hidden;">
+    <%= image_tag 'ajax-loader.gif', :style => "position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;" %>
+  </div>
+</body>
+</html>
+