117 lines
3.3 KiB
Plaintext
117 lines
3.3 KiB
Plaintext
|
<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=?&results=15&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>
|