-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhighcharts-test.html
109 lines (104 loc) · 3.26 KB
/
highcharts-test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Index</title>
<script src="jquery-1.10.2.min.js"></script>
<script src="highcharts.js"></script>
<script>
var chart;
function initChart() {
Highcharts.setOptions({
lang: {
loading: 'Laden...',
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'October', 'November', 'Dezember'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dez'],
exportButtonTitle: "Exportieren",
printButtonTitle: "Ausdrucken",
rangeSelectorFrom: "Von:",
rangeSelectorTo: "An:",
rangeSelectorZoom: "Zeitrahmen:",
downloadPNG: 'Als PNG herunterladen',
downloadJPEG: 'Als JPEG herunterladen',
downloadPDF: 'Als PDF herunterladen',
downloadSVG: 'Als SVG herunterladen',
resetZoom: "Zoom zurücksetzen",
resetZoomTitle: "Zoom zurücksetzen",
thousandsSep: ".",
decimalPoint: ','
}
}
);
var options = {
plotOptions: {
series: {
animation: false
},
},
chart: {
type: 'spline',
renderTo: 'head-and-tail-by-time'
},
title: {
text: 'Entwicklung der Spitze und des Schlusses mit der Zeit'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'Position'
}
},
tooltip: {
formatter: function() {
var dateStr = Highcharts.dateFormat('%H:%M', new Date(this.x));
return dateStr + '<br/>' + '<span style="color:'+this.series.color+'">'+ this.series.name +'</span>: '+ this.y;
} }
};
chart = new Highcharts.Chart(options);
}
function convertData(data) {
newData = [];
console.log(data);
for (var i=0; i < data.length; i++) {
console.log(i);
newData.push( [ new Date(data[i][0]).getTime(), data[i][1] ] );
}
return newData;
}
$(function () {
initChart();
console.log("init");
$.getJSON( "head-pos-by-time.js", function( data ) {
console.log("here");
chart.addSeries({
name : 'Zugspitze',
color : 'green',
data: convertData(data)
})
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err )
})
$.getJSON( "tail-pos-by-time.js", function( data ) {
console.log("here");
chart.addSeries({
name : 'Zugschluss',
color : 'red',
data: convertData(data)
})
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err )
})
});
</script>
</head>
<body>
<div id="head-and-tail-by-time" style="width:100%; height:400px;"></div>
</body>
</html>