Liniendiagramm 1

<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>

<div id="chart1" style="height: 300px;"></div>

<script>
jQuery(function() {
    feedid = '******';
    key = '******';
    channel = 'Air_Temperature';
    interval = 900;
    days = 7;

    start_date = new Date();
    start_date.setHours(start_date.getHours() - 24*days); 

    // load data from xively feed
	jQuery.getJSON('http://api.xively.com/v2/feeds/'+feedid+'/datastreams/'+channel+'.json?start='+start_date+'&interval='+interval+'?key='+key, function(data) {
        var xively_datapoints = data.datapoints;
        var chartdata = [];
        // convert data format from xively to highcharts
        for (i = 0; i < xively_datapoints.length; i++) {
            chartdata.push([
                Date.parse(xively_datapoints[i].at),
                parseFloat(xively_datapoints[i].value)
            ]);
        }

		// create the chart using highcharts line diagram
		jQuery('#chart1').highcharts('StockChart', {
			rangeSelector : { selected : 1 },
			 exporting: {
                    chartOptions:{
	                   yAxis: { labels: { style: { color: '#000', fontSize: '14px'} } }
		            }
             },
			series : [{
				name : channel,
				data : chartdata,
				tooltip: { valueDecimals: 2 }
			}]
		});
	});
});
</script>

Liniendiagramm 2

<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>

<div id="chart2" style="height: 300px;"></div>

<script>
jQuery(function() {
    feedid = '******';
    key = '*****';
    channel = 'Air_Temperature';
    interval = 900;
    days = 7;

    start_date = new Date();
    start_date.setHours(start_date.getHours() - 24*days); 

    // load data from xively feed
    jQuery.getJSON('http://api.xively.com/v2/feeds/'+feedid+'/datastreams/'+channel+'.json?start='+start_date+'&interval='+interval+'?key='+key, function(data) {
		var xively_datapoints = data.datapoints;
		var chartdata = [];
		// convert data format from xively to highcharts
		for (i = 0; i < xively_datapoints.length; i++) {
			chartdata.push([
				Date.parse(xively_datapoints[i].at),
				parseFloat(xively_datapoints[i].value)
			]);
		}
			// create the chart using highcharts line diagram
		jQuery('#chart2').highcharts({
			title: {
				text: 'Aktuelle Temperatur',
				x: -20
			},
			subtitle: {
				text: 'Quelle: Xively.com',
				x: -20
			},
                        xAxis: {
                          type: 'datetime',
                        },
			yAxis: {
				title: {
						text: 'Temperatur (C)',
				},
				plotLines: [{
						value: 0,
						width: 1,
						color: '#808080',
				}]
			},
			tooltip: {
				valueSuffix: 'C',
			},
			series: [{
				name: channel,
				data: chartdata,
				tooltip: { valueDecimals: 2 },
			}],
		});

	});
});