score:2
You should use 2.5.0 chartsjs
here it works : http://jsfiddle.net/kLg5ntou/93
var data = {
labels: ["0", "1", "2", "3", "4", "5", "6"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(95,186,88,0.7)",
strokeColor: "rgba(95,186,88,1)",
pointColor: "rgba(0,0,0,0)",
pointStrokeColor: "rgba(0,0,0,0)",
pointHighlightFill: "rgba(95,186,88,1)",
pointHighlightStroke: "rgba(95,186,88,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {type: 'line', data: data});
setInterval(function () {
chart.config.data.labels.push(Math.floor(Date.now() / 1000));
chart.config.data.datasets[0].data.push(Math.floor(10 + Math.random() * 80));
// limit to 10
chart.config.data.labels.shift();
chart.config.data.datasets[0].data.shift();
score:2
This code uses streaming plugin and works as expected.
http://jsfiddle.net/nagix/kvu0r6j2/
<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://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.5.0/dist/chartjs-plugin-streaming.min.js"></script>
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(95,186,88,0.7)",
borderColor: "rgba(95,186,88,1)",
pointBackgroundColor: "rgba(0,0,0,0)",
pointBorderColor: "rgba(0,0,0,0)",
pointHoverBackgroundColor: "rgba(95,186,88,1)",
pointHoverBorderColor: "rgba(95,186,88,1)",
data: []
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime'
}]
},
plugins: {
streaming: {
onRefresh: function(chart) {
chart.data.labels.push(Date.now());
chart.data.datasets[0].data.push(
Math.floor(10 + Math.random() * 80)
);
},
delay: 2000
}
}
}
});
Source: stackoverflow.com
Related Query
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- chart.js 2, animate right to left (not top-down)
- Draw a horizontal bar chart from right to left
- Remove additional white space on left and right side of Angular Chart
- How do I add padding on the right of tooltip, but not the left in Chart.js?
- Labels (category type) on left and right of bar chart using chart.js?
- Chart.js Polar Area Chart is not scale right
- How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?
- Chart.js line chart not showing point on top most value
- Chartjs: I only want left and right padding in pie chart
- Change Chartjs financial chart yaxis from left to right
- Chart.JS Chart top left corner is blocked by some visual nodejs
- how to not repeat code while creating multiple charts in chart js
- ReferenceError: Chart is not defined - chartjs
- Chart.js: bar chart first bar and last bar not displaying in full
- Chart.js same Y axis on left and right
- Chart.js responsive option - Chart not filling container
- show label in tooltip but not in x axis for chartjs line chart
- Html chart does not fit a small Android WebView
- Chart.js ng2-charts colors in pie chart not showing
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.JS Mixed Chart - Bars Not Showing
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Chart looks only grey, does not show the color - Chartjs,discordjs
- chartjs - top and bottom padding of a chart area
- Angular-chart.js - Make line chart does not curve
- angular-chartjs line chart TypeError: t.merge is not a function
- Chart.js line chart is not displaying
- Chart.js: width and height of a pie chart not respected
- Uncaught TypeError: Chart is not a constructor when using Chart.js
More Query from same tag
- How to hide the legend display for a specific chart?
- undefined labels piechart - chartjs
- Chart.js Scaling issue when initially loading the page
- How to set the gap between data items in a chartjs chart
- Cannot use npm module react-chartjs with React
- How to add a ChartPoint to a DataSet in Chart.js with TypeScript?
- angular-chart.js : issue with pointHoverBorderColor property for line chart
- Chart JS + Laravel - How to add 0 to array
- How to apply image on each bubble in chartjs?
- code works fine on jsfiddle but one function is not working on website
- Extend chart.js in PHP heredoc causes parse error
- ChartJS Scatter plot with JSON list variable not working
- ng2-chart with Angular 4: Can't bind to 'data' since it isn't a known property of 'canvas'
- ChartJs shows the wrong labels
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to catch an onClick event on bubble chart?
- How to remove a label in top of bar in chartjs chart
- Something similar to grace available in the latest chartJs for ChartJs 2.9.3
- Using Chart.js, how do I avoid having tooltips overlap?
- ChartJs php array into 'labels' and 'datasets'
- Disable background chart on chartjs
- JS count numbers between
- special characters in title of charts of Charts Js
- ChartJS 2 How to globally remove xAxis gridLines?
- Chartjs show seconds on the x axis and volume on the y
- Chart x axis displays in timestamp instead of dates Chart.js
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- How to move the x-axis values and line points to the middle of two x-axis lines using chartjs?
- Canvas doens't display in SAPUI5
- Django 1.11 - child template not inheriting from parent