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
- Y-Axis with different colors
- Vue-Chartjs onComplete custom labels - prevent blinking
- stepsize x-axe with time string labels
- Horizontal xAxis labels in Chart.js
- ChartJS - Adding legend title into tooltip title
- How can I remove the grid line in the background of the line chart?
- How can i get my chartjs to show up graphically?
- Puppeteer with Chart.js
- Chart.js : straight lines and curves lines in the same graph
- What can I do to ensure that my charts diagram reload every time I choose it from my dropdown?
- How to put rounded corners on a Chart.js Bar chart
- Chartjs blocks jumping to a section in ASP.NET MVC 5
- Get Dataset Values from Chart JS onHover in Version 3
- how can i reset chartjs object all instances and recreate it from scratch?
- chart.js chart distorted with fixed width
- getting chartsjs to show key of data label instead of value
- How to get an attribute of element by jquery
- Multiple usage of Javascript function
- How can I style scale numbers in a Polar Area chart (chart.js)
- How to retrieve ChartJS instance after initialization
- Stacked areachart with percents values on the y axis using Charts.js and Angular 8
- How to show dynamic dates with month name of current month and previous month in momentjs?
- Chart.js how to resend animation command to a chart?
- How do I make line charts overlay over bar charts in chartjs
- Loading json file to chartjs
- chart.js How to show last column’s value on y axios?
- React: How to get loading spinner to show whilst API data loads into my chart.js chart
- How to distribute the y-ticks proportionally in Chart.js in Flask app?
- Why won't my chart.js chart render in React?
- Chartjs columns does not appear by value