КодПоказать
Код: Выделить всё
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="/highstock/js/jquery-1.8.2.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
var seriesOptions = [],
seriesCounter = 0,
names = ['кухня', 'гостиная', 'спальня', 'холл', 'кабинет'],
sensornames = ['KitchenArea.Temperature',
'Livingroom.Temperature',
'Bedroom.Temperature',
'HallArea.Temperature',
'OfficeRoom.Temperature'];
Highcharts.setOptions({
lang: {
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль',
'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
shortMonths: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл',
'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
weekdays: ['Вск', 'Пнд', 'Втр', 'Срд', 'Чтв', 'Птн', 'Сбт'],
rangeSelectorZoom: 'Маcштаб',
rangeSelectorFrom: 'От',
rangeSelectorTo: 'До',
thousandsSep: ' '
},
global: {
useUTC: false
}
});
// create the chart when all data is loaded
createChart = function () {
$('#container').highcharts('StockChart', {
rangeSelector: {
buttons: [{ type: 'hour', count: 1, text: '1h' },
{ type: 'day', count: 1, text: '1d' },
{ type: 'day', count: 2, text: '2d' },
{ type: 'week', count: 1, text: '1w' },
{ type: 'month', count: 1, text: '1m' },
{ type: 'month', count: 6, text: '6m' },
{ type: 'year', count: 1, text: '1y' },
{ type: 'all', text: 'All' }],
selected: 1 }, // Какая кнопка выбрана по умолчанию
title: { text : 'График температур в доме'},
legend: { enabled : true,
layout : 'horizontal',
align : 'center',
verticalAlign : 'top',
x : 0,
y : 20 },
xAxis: { maxZoom : 1 * 24 * 36000 },
yAxis: { title: { text: 'Температура (°C)' } },
series: seriesOptions
});
};
$.each(names, function (i, name) {
$.getJSON('/jsonp.php?name='+sensornames[i], function (data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
</script>
</head>
<body>
<script src="/highstock/js/highstock.js"></script>
<script src="/highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
