...
options: {
-...
-plugins: {
-streaming: {
-onRefresh: function(chart) {
-chart.data.datasets.forEach(function(dataset) {
-dataset.data.push({
-x: Date.now(),
-y: Math.random()
+scales: {
+xAxes: [{
+...
+realtime: {
+onRefresh: function(chart) {
+chart.data.datasets.forEach(function(dataset) {
+dataset.data.push({
+x: Date.now(),
+y: Math.random()
+});
});
-});
+}
}
-}
-}
-...
+...
@@ -137,13 +137,13 @@
...
options: {
-...
-plugins: {
-streaming: {
+scales: {
+xAxes: [{
...
-delay: 2000
-}
-...
+realtime: {
+...
+delay: 2000
+...
@@ -317,19 +317,21 @@
label: 'Dataset 2'
}];
options: any = {
-...
-plugins: {
-streaming: {
-onRefresh: function(chart: any) {
-chart.data.datasets.forEach(function(dataset: any) {
-dataset.data.push({
-x: Date.now(),
-y: Math.random()
+scales: {
+xAxes: [{
+...
+realtime: {
+onRefresh: function(chart: any) {
+chart.data.datasets.forEach(function(dataset: any) {
+dataset.data.push({
+x: Date.now(),
+y: Math.random()
+});
});
-});
-},
-delay: 2000
-}
+},
+delay: 2000
+}
+}]
}
};
}
@@ -437,19 +439,21 @@}]
}}
options={{
-...
-plugins: {
-streaming: {
-onRefresh: function(chart) {
-chart.data.datasets.forEach(function(dataset) {
-dataset.data.push({
-x: Date.now(),
-y: Math.random()
+scales: {
+xAxes: [{
+...
+realtime: {
+onRefresh: function(chart) {
+chart.data.datasets.forEach(function(dataset) {
+dataset.data.push({
+x: Date.now(),
+y: Math.random()
+});
});
-});
-},
-delay: 2000
-}
+},
+delay: 2000
+}
+}]
}
}}
/>
@@ -576,19 +580,21 @@backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
}, {
-...
-plugins: {
-streaming: {
-onRefresh: function(chart) {
-chart.data.datasets.forEach(function(dataset) {
-dataset.data.push({
-x: Date.now(),
-y: Math.random()
+scales: {
+xAxes: [{
+...
+realtime: {
+onRefresh: function(chart) {
+chart.data.datasets.forEach(function(dataset) {
+dataset.data.push({
+x: Date.now(),
+y: Math.random()
+});
});
-});
-},
-delay: 2000
-}
+},
+delay: 2000
+}
+}]
}
});
...
@@ -628,20 +634,20 @@...
options: {
-...
-plugins: {
-streaming: {
-onRefresh: function(chart) {
-chart.data.datasets.forEach(function(dataset) {
-dataset.data.push({
-x: Date.now(),
-y: Math.random()
+scales: {
+xAxes: [{
+...
+realtime: {
+onRefresh: function(chart) {
+chart.data.datasets.forEach(function(dataset) {
+dataset.data.push({
+x: Date.now(),
+y: Math.random()
+});
});
-});
+}
}
-}
-}
-...
+...
@@ -137,13 +137,13 @@
...
options: {
-...
-plugins: {
-streaming: {
+scales: {
+xAxes: [{
...
-delay: 2000
-}
-...
+realtime: {
+...
+delay: 2000
+...
@@ -317,19 +317,21 @@
label: 'Dataset 2'
}];
options: any = {
-...
-plugins: {
-streaming: {
-onRefresh: function(chart: any) {
-chart.data.datasets.forEach(function(dataset: any) {
-dataset.data.push({
-x: Date.now(),
-y: Math.random()
+scales: {
+xAxes: [{
+...
+realtime: {
+onRefresh: function(chart: any) {
+chart.data.datasets.forEach(function(dataset: any) {
+dataset.data.push({
+x: Date.now(),
+y: Math.random()
+});
});
-});
-},
-delay: 2000
-}
+},
+delay: 2000
+}
+}]
}
};
}
@@ -437,19 +439,21 @@}]
}}
options={{
-...
-plugins: {
-streaming: {
-onRefresh: function(chart) {
-chart.data.datasets.forEach(function(dataset) {
-dataset.data.push({
-x: Date.now(),
-y: Math.random()
+scales: {
+xAxes: [{
+...
+realtime: {
+onRefresh: function(chart) {
+chart.data.datasets.forEach(function(dataset) {
+dataset.data.push({
+x: Date.now(),
+y: Math.random()
+});
});
-});
-},
-delay: 2000
-}
+},
+delay: 2000
+}
+}]
}
}}
/>
@@ -576,19 +580,21 @@backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
}, {
-...
-plugins: {
-streaming: {
-onRefresh: function(chart) {
-chart.data.datasets.forEach(function(dataset) {
-dataset.data.push({
-x: Date.now(),
-y: Math.random()
+scales: {
+xAxes: [{
+...
+realtime: {
+onRefresh: function(chart) {
+chart.data.datasets.forEach(function(dataset) {
+dataset.data.push({
+x: Date.now(),
+y: Math.random()
+});
});
-});
-},
-delay: 2000
-}
+},
+delay: 2000
+}
+}]
}
});
...
@@ -628,20 +634,20 @@+ + + + +
+var chartColors = {
+ red: 'rgb(255, 99, 132)',
+ orange: 'rgb(255, 159, 64)',
+ yellow: 'rgb(255, 205, 86)',
+ green: 'rgb(75, 192, 192)',
+ blue: 'rgb(54, 162, 235)',
+ purple: 'rgb(153, 102, 255)',
+ grey: 'rgb(201, 203, 207)'
+};
+
+function randomScalingFactor() {
+ return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+}
+
+function onReceive(event) {
+ window.myChart.config.data.datasets[event.index].data.push({
+ x: event.timestamp,
+ y: event.value
+ });
+ window.myChart.update({
+ preservation: true
+ });
+}
+
+var timeoutIDs = [];
+
+function startFeed(index) {
+ var receive = function() {
+ onReceive({
+ index: index,
+ timestamp: Date.now(),
+ value: randomScalingFactor()
+ });
+ timeoutIDs[index] = setTimeout(receive, Math.random() * 1000 + 500);
+ }
+ timeoutIDs[index] = setTimeout(receive, Math.random() * 1000 + 500);
+}
+
+function stopFeed(index) {
+ clearTimeout(timeoutIDs[index]);
+}
+
+var color = Chart.helpers.color;
+var config = {
+ type: 'line',
+ data: {
+ datasets: [{
+ label: 'Dataset 1 (linear interpolation)',
+ backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
+ borderColor: chartColors.red,
+ fill: false,
+ lineTension: 0,
+ borderDash: [8, 4],
+ data: []
+ }, {
+ label: 'Dataset 2 (cubic interpolation)',
+ backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
+ borderColor: chartColors.blue,
+ fill: false,
+ cubicInterpolationMode: 'monotone',
+ data: []
+ }]
+ },
+ options: {
+ title: {
+ display: true,
+ text: 'Push data feed sample'
+ },
+ scales: {
+ xAxes: [{
+ type: 'realtime',
+ realtime: {
+ duration: 20000,
+ delay: 2000,
+ }
+ }],
+ yAxes: [{
+ scaleLabel: {
+ display: true,
+ labelString: 'value'
+ }
+ }]
+ },
+ tooltips: {
+ mode: 'nearest',
+ intersect: false
+ },
+ hover: {
+ mode: 'nearest',
+ intersect: false
+ }
+ }
+};
+
+window.onload = function() {
+ var ctx = document.getElementById('myChart').getContext('2d');
+ window.myChart = new Chart(ctx, config);
+ startFeed(0);
+ startFeed(1);
+};
+
+document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.forEach(function(dataObj) {
+ dataObj.y = randomScalingFactor();
+ });
+ });
+ window.myChart.update();
+});
+
+var colorNames = Object.keys(chartColors);
+document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];
+ var newColor = chartColors[colorName];
+ var newDataset = {
+ label: 'Dataset ' + (config.data.datasets.length + 1),
+ backgroundColor: color(newColor).alpha(0.5).rgbString(),
+ borderColor: newColor,
+ fill: false,
+ lineTension: 0,
+ data: []
+ };
+
+ config.data.datasets.push(newDataset);
+ window.myChart.update();
+ startFeed(config.data.datasets.length - 1);
+});
+
+document.getElementById('removeDataset').addEventListener('click', function() {
+ stopFeed(config.data.datasets.length - 1);
+ config.data.datasets.pop();
+ window.myChart.update();
+});
+
+document.getElementById('addData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.push({
+ x: Date.now(),
+ y: randomScalingFactor()
+ });
+ });
+ window.myChart.update();
+});
+ <head> + <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> + <script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.7.0/chartjs-plugin-streaming.min.js"></script> +</head> +<body> + <div> + <canvas id="myChart"></canvas> + </div> + <p> + <button id="randomizeData">Randomize Data</button> + <button id="addDataset">Add Dataset</button> + <button id="removeDataset">Remove Dataset</button> + <button id="addData">Add Data</button> + </p> +</body>+