+ + + + +
+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 onRefresh(chart) {
+ chart.config.data.datasets.forEach(function(dataset) {
+ dataset.data.push({
+ x: Date.now(),
+ y: randomScalingFactor()
+ });
+ });
+}
+
+var color = Chart.helpers.color;
+var config = {
+ type: 'line',
+ data: {
+ datasets: [{
+ label: 'Dataset 1 (linear interpolation)',
+ backgroundColor: chartColors.red,
+ borderColor: chartColors.red,
+ fill: false,
+ lineTension: 0,
+ borderDash: [8, 4],
+ data: []
+ }, {
+ label: 'Dataset 2 (cubic interpolation)',
+ backgroundColor: chartColors.blue,
+ borderColor: chartColors.blue,
+ fill: false,
+ cubicInterpolationMode: 'monotone',
+ data: []
+ }]
+ },
+ options: {
+ title: {
+ display: true,
+ text: 'Data labels plugin sample'
+ },
+ scales: {
+ xAxes: [{
+ type: 'realtime'
+ }],
+ yAxes: [{
+ type: 'linear',
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'value'
+ }
+ }]
+ },
+ tooltips: {
+ mode: 'nearest',
+ intersect: false
+ },
+ hover: {
+ mode: 'nearest',
+ intersect: false
+ },
+ pan: {
+ enabled: true,
+ mode: 'x',
+ rangeMax: {
+ x: 4000
+ },
+ rangeMin: {
+ x: 0
+ }
+ },
+ zoom: {
+ enabled: true,
+ mode: 'x',
+ rangeMax: {
+ x: 20000
+ },
+ rangeMin: {
+ x: 1000
+ }
+ },
+ plugins: {
+ streaming: {
+ duration: 20000,
+ refresh: 1000,
+ delay: 2000,
+ onRefresh: onRefresh
+ }
+ }
+ }
+};
+
+window.onload = function() {
+ var ctx = document.getElementById('myChart').getContext('2d');
+ window.myChart = new Chart(ctx, config);
+};
+
+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: newColor,
+ borderColor: newColor,
+ fill: false,
+ lineTension: 0,
+ data: []
+ };
+
+ config.data.datasets.push(newDataset);
+ window.myChart.update();
+});
+
+document.getElementById('removeDataset').addEventListener('click', function() {
+ config.data.datasets.pop();
+ window.myChart.update();
+});
+
+document.getElementById('addData').addEventListener('click', function() {
+ onRefresh(window.myChart);
+ 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://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> + <script src="https://rawgit.com/chartjs/chartjs-plugin-zoom/master/chartjs-plugin-zoom.min.js"></script> + <script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.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>+