-
Notifications
You must be signed in to change notification settings - Fork 2
/
plain.html
97 lines (83 loc) · 3.3 KB
/
plain.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Plain Charts</title>
<link rel="stylesheet" href="dist/chart.css">
<script src="dist/chart.js"></script>
</head>
<body>
<button id="dark-mode">Dark</button>
<button id="light-mode">Light</button>
<script>
var html = document.querySelector('html');
var chartsContainer = document.querySelector('#container');
document.getElementById('dark-mode').addEventListener('click', function handleChangeTheme() {
html.className = (html.className.replace(/\bdark\b/, '') + ' dark').replace(/\s+/, '');
document.dispatchEvent(new Event('darkmode'))
});
document.getElementById('light-mode').addEventListener('click', function handleChangeTheme() {
html.className = html.className.replace(/\bdark\b/, '');
document.dispatchEvent(new Event('darkmode'))
});
var xLen = 1460;
var colLen = 50;
var colors = ["#108BE3","#3497ED","#4BD964","#64ADED","#2373DB","#E8AF14","#FE3C30","#9ED448","#5FB641","#F5BD25","#F79E39","#E65850"];
function generateData(data, xLen, colLen) {
var origColLen = data.columns.length - 1;
var origXLen = data.columns[0].length - 1;
var k = 1;
for (var i = origColLen + 1; i <= colLen; i++) {
data.types['y' + (i - 1)] = data.types['y0'];
data.names['y' + (i - 1)] = 'Column ' + (i);
data.colors['y' + (i - 1)] = colors[i % colors.length];
data.columns[i] = data.columns[(i % origColLen) + 1].slice(0);
k *= 0.9;
data.columns[i][0] = 'y' + (i - 1);
for (var j = 1; j < data.columns[i].length; j++) {
data.columns[i][j] = Math.round(k * data.columns[i][j]);
}
}
for (var i = 0; i <= colLen; i++) {
for (var j = data.columns[i].length; j <= xLen; j++) {
if (i == 0) {
data.columns[i][j] = data.columns[i][j - 1] + (data.columns[i][2] - data.columns[i][1]);
} else {
data.columns[i][j] = data.columns[i][(j % origXLen) + 1];
}
}
}
return data;
}
fetch('assets/stage_2_data/1/overview.json').then(res => res.json()).then(chartData => {
chartData.x_on_zoom = (timestamp) => {
const response = fetch('assets/stage_2_data_extended/1/2018-04/07.json').then(res => res.json())
return response;
};
Graph.render(chartsContainer, chartData);
})
fetch('assets/stage_2_data/2/overview.json').then(res => res.json()).then(chartData => {
chartData.x_on_zoom = (timestamp) => {
const response = fetch('assets/stage_2_data_extended/2/2018-04/07.json').then(res => res.json())
return response;
};
Graph.render(chartsContainer, chartData);
})
fetch('assets/stage_2_data/3/overview.json').then(res => res.json()).then(chartData => {
chartData.x_on_zoom = (timestamp) => {
const response = fetch('assets/stage_2_data_extended/3/2018-04/07.json').then(res => res.json())
return response;
};
Graph.render(chartsContainer, chartData);
});
fetch('assets/stage_2_data/4/overview.json').then(res => res.json()).then(chartData => {
chartData.x_on_zoom = (timestamp) => {
const response = fetch('assets/stage_2_data_extended/4/2018-04/07.json').then(res => res.json())
return response;
};
Graph.render(chartsContainer, chartData);
});
fetch('assets/stage_2_data/5/overview.json').then(res => res.json()).then(chartData => Graph.render(chartsContainer, chartData))
</script>
</body>
</html>