JavaScript
var prevY = 0;
var data = [];
var time = (new Date()).getTime(),
i;
// Getting first data, show as diagonals
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.round(Math.random() * 11)
});
}
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
},
lang: {
months: ['Jan.', 'Feb.', 'März', 'April', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
decimalPoint: ',',
thousandsSep: '.'
},
chart: {
zoomType: 'x'
},
scrollbar: {
enabled: true
},
navigation: {
buttonOptions: {
align: 'left'
}
},
navigator: {
enabled: true,
top: 388,
outlineColor: '#C0C0C0',
outlineWidth: 1
},
tooltip: {
enabled: true,
xDateFormat: '%d.%m.%Y %H:%M:%S'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
lineColor: '#EEEEEE',
tickColor: '#EEEEEE',
gridLineColor: '#EEEEEE',
minorGridLineColor: '#FFFFFF', // Zwischenlinien weiss, d.h. unsichtbar
gridLineWidth: 1,
minRange: 1 * 60 * 1000,
range: 3 * 60 * 1000,
labels: {
enabled: true
}
},
yAxis: {
lineColor: '#EEEEEE',
tickColor: '#EEEEEE',
gridLineColor: '#EEEEEE',
opposite: true, // y-Achse rechts
offset: 5,
lineWidth: 1,
tickWidth: 1,
tickInterval: 1,
minorGridLineColor: '#FFFFFF', // Zwischenlinien weiss, d.h. unsichtbar
minorTickInterval: 'auto',
minorGridLineWidth: 0,
minorTickColor: '#FFFFFF',
minorTickWidth: 1,
endOnTick: false,
title: {
...