This repository has been archived by the owner on Dec 6, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
graph-frame.html
124 lines (113 loc) · 2.35 KB
/
graph-frame.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="assets/Chart.bundle.min.js"></script>
<script src="assets/hammer.min.js"></script>
<script src="assets/chartjs-plugin-zoom.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: #464646;
color: white;
cursor: move;
}
#chart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="chart"></canvas>
<script>
Chart.defaults.global.legend.display = false;
Chart.defaults.global.animation.duration = 0;
Chart.defaults.global.maintainAspectRatio = false;
var chart;
console.log("Chart init");
var messageSource, messageOrigin;
window.addEventListener('message', function(e) {
var messageSource = e.source;
var messageOrigin = e.origin;
var data = e.data;
if(data.type == "update") {
chart.data.datasets[0].data = data.data;
chart.update();
} else if(data.type == "reset") {
chart.resetZoom();
}
//messageSource.postMessage(data, messageOrigin);
});
createChart();
function createChart() {
chart = new Chart(document.querySelector("canvas"), {
type: 'line',
data: {
datasets: [{
label: 'Dataset',
borderWidth: 1,
borderColor: '#01D3FF',
//backgroundColor: 'rgba(255,255,255,0.2)',
pointRadius: 1,
steppedLine: true,
fill: false,
data: []
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'ss.SSS',
'second': 'mm:ss',
'minute': 'mm',
'hour': 'hh:mm A'
},
tooltipFormat: 'hh:mm:ss.SSS A'
},
position: 'bottom',
ticks: {
autoSkip: true,
maxRotation: 0,
fontColor: "gray"
},
gridLines: {
color: "gray",
zeroLineColor: "gray"
}
}],
yAxes: [{
ticks: {
autoSkip: true,
maxRotation: 0,
fontColor: "gray"
},
gridLines: {
color: "gray",
zeroLineColor: "gray"
}
}]
},
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy',
}
}
});
}
</script>
</body>
</html>