Anzeige von Xively.com-Daten auf einer Webseite mit Hilfe von Highcharts und JQuery:
<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script>
Temperatur-Anzeige
<script> jQuery( document ).ready(function( $ ) { var feedid = "*****"; var key = "*****"; // Air Temperature $('#chart_air_temperature').highcharts({ chart: { type: 'gauge', alignTicks: false, plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, title: { text: 'Air Temperature' }, pane: { startAngle: -150, endAngle: 150 }, yAxis: [{ min: -20, max: 60, tickPosition: 'outside', minorTickPosition: 'outside', lineColor: '#339', tickColor: '#339', minorTickColor: '#339', offset: -20, labels: { distance: 12, rotation: 'auto' }, tickLength: 5, minorTickLength: 5, lineWidth: 2, endOnTick: true, plotBands: [ { color: 'lightblue', from: -20, to: 0, innerRadius: '30%', outerRadius: '40%' }, { color: 'lightgreen', from: 18, to: 25, innerRadius: '30%', outerRadius: '40%' }, { color: '#ff9999', from: 38, to: 60, innerRadius: '30%', outerRadius: '40%' }], }, { min: -20 * 1.8 + 32, max: 60 * 1.8 + 32, lineColor: '#933', tickColor: '#933', minorTickColor: '#933', tickLength: 5, minorTickLength: 5, lineWidth: 2, labels: { distance: -20, rotation: 'auto' }, offset: -30, endOnTick: false, }], series: [{ name: 'Air_Temperature', data: [0], // start value dataLabels: { formatter: function () { var c = this.y; var f = c * 1.8 + 32; return ''+c+'C/'+f+'F'; }, backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#DDD'], [1, '#FFF'] ] } }, tooltip: { valueSuffix: 'C' } }] }, function(chart) { setInterval(function() { $.getJSON('http://api.xively.com/v2/feeds/'+feedid+'/datastreams/Air_Temperature.json?key='+key, function(data) { var value = Math.round(data.current_value); var point = chart.series[0].points[0]; point.update(value); }); }, 3000); }); }); </script>
Anzeige der Lautstärke
<script> jQuery( document ).ready(function( $ ) { var feedid = "*****"; var key = "*****"; // Volume $('#chart_volume').highcharts({ chart: { type: 'gauge', plotBorderWidth: 1, plotBackgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#FFF4C6'], [0.3, '#FFFFFF'], [1, '#FFF4C6'] ] }, plotBackgroundImage: null, height: 200 }, title: { text: 'VU meter' }, pane: [{ startAngle: -45, endAngle: 45, background: null, center: ['50%', '145%'], size: 300 }], yAxis: [{ min: -20, max: 1000, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ color: '#C02316', from: 500, to: 1000, innerRadius: '100%', outerRadius: '105%' }], pane: 0, title: { text: 'VU Mono', y: -40 } },], plotOptions: { gauge: { dataLabels: { enabled: false }, dial: { radius: '100%' } } }, series: [{ data: [-20], yAxis: 0 }] }, // Let the music play function(chart) { setInterval(function() { $.getJSON('http://api.xively.com/v2/feeds/'+feedid+'/datastreams/Volume.json?key='+key, function(data) { var value = Math.round(data.current_value); // console.log(value); var point = chart.series[0].points[0]; point.update(value, false); chart.redraw(); }); }, 500); }); }); </script>