Skip to content

Commit 8fb782e

Browse files
nagixnagix
committed
Add a push data feed sample chart
1 parent bc6a5d0 commit 8fb782e

File tree

2 files changed

+172
-0
lines changed

2 files changed

+172
-0
lines changed

‎samples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ <h2>
3838
<a href="./zoom.html">Zoom plugin</a><br />
3939
<a href="./financial.html">Financial chart</a><br />
4040
<a href="./interactions.html">Interactions</a><br />
41+
<a href="./push.html">Push data feed</a><br />
4142
</h2>
4243
</li>
4344
</ul>

‎samples/push.html‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>chartjs-plugin-streaming sample</title>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
8+
<script src="../dist/chartjs-plugin-streaming.js"></script>
9+
<style>
10+
canvas {
11+
-moz-user-select: none;
12+
-webkit-user-select: none;
13+
-ms-user-select: none;
14+
}
15+
.chart {
16+
margin: auto;
17+
width: 75%;
18+
}
19+
.text-center {
20+
text-align: center;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div class="chart">
27+
<canvas id="myChart"></canvas>
28+
</div>
29+
<div>
30+
<p class="text-center">
31+
<button id="randomizeData">Randomize Data</button>
32+
<button id="addDataset">Add Dataset</button>
33+
<button id="removeDataset">Remove Dataset</button>
34+
<button id="addData">Add Data</button>
35+
</p>
36+
</div>
37+
38+
<script>
39+
var chartColors = {
40+
red: 'rgb(255, 99, 132)',
41+
orange: 'rgb(255, 159, 64)',
42+
yellow: 'rgb(255, 205, 86)',
43+
green: 'rgb(75, 192, 192)',
44+
blue: 'rgb(54, 162, 235)',
45+
purple: 'rgb(153, 102, 255)',
46+
grey: 'rgb(201, 203, 207)'
47+
};
48+
49+
function randomScalingFactor() {
50+
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
51+
}
52+
53+
function onReceive(event) {
54+
window.myChart.config.data.datasets[event.index].data.push({
55+
x: event.timestamp,
56+
y: event.value
57+
});
58+
window.myChart.update({
59+
preservation: true
60+
});
61+
}
62+
63+
var color = Chart.helpers.color;
64+
var config = {
65+
type: 'line',
66+
data: {
67+
datasets: [{
68+
label: 'Dataset 1 (linear interpolation)',
69+
backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
70+
borderColor: chartColors.red,
71+
fill: false,
72+
lineTension: 0,
73+
borderDash: [8, 4],
74+
data: []
75+
}, {
76+
label: 'Dataset 2 (cubic interpolation)',
77+
backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
78+
borderColor: chartColors.blue,
79+
fill: false,
80+
cubicInterpolationMode: 'monotone',
81+
data: []
82+
}]
83+
},
84+
options: {
85+
title: {
86+
display: true,
87+
text: 'Push data feed sample'
88+
},
89+
scales: {
90+
xAxes: [{
91+
type: 'realtime',
92+
realtime: {
93+
duration: 20000,
94+
delay: 2000,
95+
}
96+
}],
97+
yAxes: [{
98+
scaleLabel: {
99+
display: true,
100+
labelString: 'value'
101+
}
102+
}]
103+
},
104+
tooltips: {
105+
mode: 'nearest',
106+
intersect: false
107+
},
108+
hover: {
109+
mode: 'nearest',
110+
intersect: false
111+
}
112+
}
113+
};
114+
115+
window.onload = function() {
116+
var ctx = document.getElementById('myChart').getContext('2d');
117+
window.myChart = new Chart(ctx, config);
118+
};
119+
120+
document.getElementById('randomizeData').addEventListener('click', function() {
121+
config.data.datasets.forEach(function(dataset) {
122+
dataset.data.forEach(function(dataObj) {
123+
dataObj.y = randomScalingFactor();
124+
});
125+
});
126+
window.myChart.update();
127+
});
128+
129+
var colorNames = Object.keys(chartColors);
130+
document.getElementById('addDataset').addEventListener('click', function() {
131+
var colorName = colorNames[config.data.datasets.length % colorNames.length];
132+
var newColor = chartColors[colorName];
133+
var newDataset = {
134+
label: 'Dataset ' + (config.data.datasets.length + 1),
135+
backgroundColor: color(newColor).alpha(0.5).rgbString(),
136+
borderColor: newColor,
137+
fill: false,
138+
lineTension: 0,
139+
data: []
140+
};
141+
142+
config.data.datasets.push(newDataset);
143+
window.myChart.update();
144+
});
145+
146+
document.getElementById('removeDataset').addEventListener('click', function() {
147+
config.data.datasets.pop();
148+
window.myChart.update();
149+
});
150+
151+
document.getElementById('addData').addEventListener('click', function() {
152+
onRefresh(window.myChart);
153+
window.myChart.update();
154+
});
155+
156+
[0, 1].forEach(function(index) {
157+
var receive = function() {
158+
onReceive({
159+
index: index,
160+
timestamp: Date.now(),
161+
value: randomScalingFactor()
162+
});
163+
setTimeout(receive, Math.random() * 1000 + 500);
164+
}
165+
setTimeout(receive, Math.random() * 1000 + 500);
166+
});
167+
168+
</script>
169+
</body>
170+
171+
</html>

0 commit comments

Comments
 (0)