Anzeige von Xively-Daten mit Hilfe von Google-Charts „Gauge“:

<script src="https://www.google.com/jsapi?ext.js"></script>

<script>
var feedid = "*****";
var key = "*****";
var chart_data;

google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(initChart);

function loadData(chart, options, channel_name) {
    var p;     // variable for the data point
    jQuery.getJSON('https://api.xively.com/v2/feeds/'+feedid+'/datastreams/'+channel_name+'.json?&key='+key+'&callback=?', function(data) {
        p = data.current_value;
        if (p) {
            console.log(channel_name+': '+p);
            console.log(data);
            p = (p/1);
            chart_data.setValue(0, 0, data.unit.symbol);
            // chart_data.setValue(0, 0, channel_name);
            chart_data.setValue(0, 1, p);
            console.log(chart_data);
            chart.draw(chart_data, options);
        }
    });
}

function initChart() {
    chart_data = new google.visualization.DataTable();
    chart_data.addColumn('string', 'Label');
    chart_data.addColumn('number', 'Value');
    chart_data.addRows(1);

    // Air_Temperature
    chart_air_temperature = new google.visualization.Gauge(document.getElementById('chart_air_temperature'));
    options = {
        width: 200, height: 200,
        redColor: 'lightblue', redFrom: -20, redTo: 0,
        yellowColor: 'lightred', yellowFrom: 40, yellowTo: 60,
        greenColor: 'lightgreen', greenFrom: 18, greenTo: 25,
        min: -20, max: 60,
        majorTicks: [-20, -10, "0", 10, 20, 30, 40, 50, 60],
        minorTicks: 10,
        animation: {duration: 400, easing: 'out',},
    };
    loadData(chart_air_temperature, options, 'Air_Temperature');
    setInterval(function() { loadData(chart_air_temperature, options, 'Air_Temperature'); }, 15000);

    // Relative_Humidity
    chart_relative_humidity = new google.visualization.Gauge(document.getElementById('chart_relative_humidity'));
    options2 = {
        width: 200, height: 200,
        yellowColor: 'lightblue', yellowFrom: 0, yellowTo: 40,
        greenColor: 'lightgreen', greenFrom: 40, greenTo: 70,
        redColor: 'lightred', redFrom: 70, redTo: 100,
        min: 0, max: 100,
        majorTicks: ["0", 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        minorTicks: 5,
        animation: {duration: 400, easing: 'out',},
    };
    loadData(chart_relative_humidity, options2, 'Relative_Humidity');
    setInterval(function() { loadData(chart_relative_humidity, options2, 'Relative_Humidity'); }, 15000);
}
</script>