HighchartsThingSpeak

Highcharts and ThingSpeak working together

by Mr.ToR

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/export-csv/master/export-csv.js"></script>
 <body style="                      //background-color: #1a2a3c;">
    <div id="chart-container" style="height: 600px;"><br>
      Chart loading, please wait...<br>
    </div>
    <div id="below chart">
        

        
        <button style="width: 89px; margin-top: -18px;" value="Hide All"
        name="Hide All Button"
        onclick="HideAll();">Hide
        All</button><button style="width: 162px; margin-top: -18px;" value="Load More Data"
        name="Load More Data"
        onclick="loadOneChannel();">Load
        More Historical Data </button>
      <select id="Channel Select">
      </select>
      <select id="Loads">
        <option value="1">1 Load</option>
        <option value="2">2 Loads</option>
        <option value="3">3 Loads</option>
        <option value="4">4 Loads</option>
        <option value="5" selected="selected">5 Loads</option>
        <option value="6">6 Loads</option>
        <option value="7">7 Loads</option>
        <option value="8">8 Loads</option>
        <option value="9">9 Loads</option>
        <option value="10">10 Loads</option>
        <option value="15">15 Loads</option>
        <option value="20">20 Loads</option>
        <option value="25">25 Loads</option>
        <option value="30">30 Loads</option>
        <option value="40">40 Loads</option>
        <option value="50">50 Loads</option>
      </select>
        <!--
       -->
         
      <input id="Update" name="Update" type="checkbox" checked="checked"><span style="font-family: Lucida Grande;font-size:11px; color: #dddddd;">Update
        Chart</span> <!-- <span id="Latency" style="font-family: Lucida Grande;">(Latency)</span>...

JavaScript

// Webpage Javascript to chart multiple ThingSpeak channels on two axis with navigator, load historical data, and export cvs data.
      // Public Domain, by turgo.
      //  The charting library is called HighStock.  It is awesome!  HighSoft, the owners say, 
      //   "Do you want to use Highstock for a personal or non-profit project? Then you can use Highchcarts for 
      //   free under the  Creative Commons Attribution-NonCommercial 3.0 License. "
var dynamicChart;
var channelsLoaded = 0;
// put your ThingSpeak Channel#, Channel Name, and API keys here.
// fieldList shows which field you want to load, and which axis to display that field on, 
// the 'T' Temperature left axis, or the 'O' Other right axis.
var channelKeys =[];
channelKeys.push({channelNumber:5683, name:'Sam Rogers Solar System',key:'XXXXXXXXXXXXXXXX'
,fieldList:[
    {field:3,axis:'T',suffix:'°F'}
    ,{field:5,axis:'T',suffix:'°F'}
    ,{field:2,axis:'Q',suffix:'A'}
    ]});
/*    
channelKeys.push({channelNumber:9, name:'Hans my_house',key:'XXXXXXXXXXXXXXXX'
,fieldList:[
    {field:2,axis:'T',suffix:'°C'}
    ]});
*/    
 
 
// user's timezone offset
var myOffset = new Date().getTimezoneOffset();
//var myOffset = -180;

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

      // Hide all series, via 'Hide All' button.  Then user can click on serries name in legent to show series of interest.      
function HideAll(){
  for (var index=0; index<dynamicChart.series.length; index++)  // iterate through each series
  { 
    if...