thingspeak/app/views/pages/export.html.erb

<h2>export test</h2>
<br>


<script type="text/javascript">

  // users 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);
  }

  $(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;

    // get the data with a webservice call
    $.getJSON('https://api.thingspeak.com/channels/9/field/1.json?callback=?&amp;results=15&amp;offset=0', function(data) {
      // if no access
      if (data == '-1') {
        $('#chart-container').append('This channel is not public.  To embed charts, the channel must be public or a read key must be specified.');
      }

      // iterate through each feed
      $.each(data.feeds, function() {
        p = this.field1;
        // if a numerical value exists add it
        if (!isNaN(parseInt(p))) {
          chartData.push([getChartDate(this.created_at), parseFloat(p)]);
        }
      });

      // specify the chart options
      var chartOptions = {
        chart: {
          renderTo: 'chart-container',
          defaultSeriesType: 'line',
          backgroundColor: '#ffffff'
        },
        title: {
          text: ''
        },
        plotOptions: {
          line: {
            color: '#d62020'
          },
          bar: {
            color: '#d62020'
          },
          column: {
            color: '#d62020'
          },
          series: {
            marker: {
              radius: 3
            },
            animation: true
          }
        },
        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.field1
        }]
      };

      // add the data to the chart
      chartOptions.series[0].data = chartData;

      // set chart labels here so that decoding occurs properly
      chartOptions.title.text = 'Dynamic Light Levels';
      chartOptions.xAxis.title.text = 'Time';
      chartOptions.yAxis.title.text = data.channel.field1;

      // draw the chart
      var dynamicChart = new Highcharts.Chart(chartOptions);

    });

  });

</script>

<br>

<div id="chart-container" style="width: 500px; height: 260px; padding-left: 20px; float: left;"></div>