First, we need to include moment.js, Chart.js and chartjs-plugin-streaming.js in our page.
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="chartjs-plugin-streaming.js"></script>
We need to have a canvas in our page.
<canvas id="myChart"></canvas>
Now, we can create a chart. We add a script to our page.
Use the default settings for now. These can be tweaked later.
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: []
}, {
data: []
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime'
}]
}
}
});
You can append the data in the onRefresh callback function that is called at a regular interval.
Each data has two properties: timestamp of the data point, and value of the data point.
...
options: {
scales: {
xAxes: [{
...
realtime: {
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
}
}
...
Note that old data will be automatically deleted as it disappears off the chart.
The above chart shows an issue.
We cannot plot a line until the next data point is known. To get around this,
we add a delay to the chart, so upcoming values are known before we need to plot the line.
This makes the chart look like a continual stream rather than very jumpy on the right hand side.
...
options: {
scales: {
xAxes: [{
...
realtime: {
...
delay: 2000
...
Chart.js provides many options that can help you customize your charts
with scales, tooltips, labels, colors, custom actions, and much more.
See the Chart.js documentation and samples for more details.
...
data: {
datasets: [{
...
label: 'Dataset 1',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]
}, {
...
label: 'Dataset 2',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
...
See also GitHub repository and samples
Install the Angular CLI, and create a new project named angular-streaming-chart.
Then, go to the project directory and launch the application.
You should see the app running at http://localhost:4200/ in your browser.
$npm install -g @angular/cli
$ng new angular-streaming-chart
$cd angular-streaming-chart
$ng serve --open
Install ng2-charts and chartjs-plugin-streaming into our project.
$npm install ng2-charts chartjs-plugin-streaming --save
Now you’ll want to import ng2-chart’s ChartsModule into our app module.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng2-charts gives us a baseChart directive that can be applied on an HTML canvas element.
Here’s an example showing-off some of the options to pass-in as inputs.
<div>
<canvas
baseChart
[chartType]="'line'"
[datasets]="datasets"
[options]="options">
</canvas>
</div>
And, here’s what it can look like in our component class.
Import chartjs-plugin-streaming, and create a chart with a realtime scale.
import { Component } from '@angular/core';
import 'chartjs-plugin-streaming';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
datasets: any[] = [{
data: []
}, {
data: []
}];
options: any = {
scales: {
xAxes: [{
type: 'realtime'
}]
}
};
}
You can append the data in the callback function and add more chart options.
The browser refreshes and displays a live streaming chart.
See the Chart.js documentation, samples and ng2-charts documentation
for the customization options.
...
export class AppComponent {
datasets: any[] = [{
...
label: 'Dataset 1',
lineTension: 0,
borderDash: [8, 4]
}, {
...
label: 'Dataset 2'
}];
options: any = {
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
}
}]
}
};
}
See also GitHub repository and samples
Install the Create React App, and create a new project named react-streaming-chart.
Then, go to the project directory and launch the application.
You should see the app running at http://localhost:3000/ in your browser.
$npm install -g create-react-app
$create-react-app react-streaming-chart
$cd react-streaming-chart
$npm start --open
Install react-chartjs-2 and chartjs-plugin-streaming into our project.
$npm install react-chartjs-2 chartjs-plugin-streaming --save
Now you’ll want to create a chart component with a realtime scale.
Import a Line chart component from react-chartjs-2 as well as
chartjs-plugin-streaming, and extend it.
import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';
import './App.css';
class App extends Component {
render() {
return (
<Line
data={{
datasets: [{
data: []
}, {
data: []
}]
}}
options={{
scales: {
xAxes: [{
type: 'realtime'
}]
}
}}
/>
);
}
}
export default App;
You can append the data in the callback function and add more chart options.
The browser refreshes and displays a live streaming chart.
See the Chart.js documentation, samples and react-chartjs-2 documentation
for the customization options.
...
<Line
data={{
datasets: [{
...
label: 'Dataset 1',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]
}, {
...
label: 'Dataset 2',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
}}
options={{
scales: {
xAxes: [{
...
realtime: {
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
},
delay: 2000
}
}]
}
}}
/>
...
See also GitHub repository and samples
Install the Vue CLI, and create a new project named vue-streaming-chart.
Then, go to the project directory and launch the application.
You should see the app running at http://localhost:8080/ in your browser.
$npm install -g @vue/cli
$vue create --default vue-streaming-chart
$cd vue-streaming-chart
$npm run serve
Install vue-chartjs and chartjs-plugin-streaming into our project.
$npm install vue-chartjs chartjs-plugin-streaming --save
First, we'll start with the main top level component.
The Vue CLI already generates a main component that can be found in src/App.vue.
We import a MyChart component which will be created later.
<template>
<div id="app">
<MyChart />
</div>
</template>
<script>
import MyChart from './components/MyChart.vue'
export default {
name: 'app',
components: {
MyChart
}
}
</script>
Now you’ll want to create a chart component named MyChart with a realtime scale.
Import a Line chart component from vue-chartjs as well as
chartjs-plugin-streaming, and extend it.
<script>
import { Line } from 'vue-chartjs'
import 'chartjs-plugin-streaming';
export default {
extends: Line,
mounted () {
this.renderChart({
datasets: [{
data: []
}, {
data: []
}]
}, {
scales: {
xAxes: [{
type: 'realtime'
}]
}
});
}
}
</script>
You can append the data in the callback function and add more chart options.
The browser refreshes and displays a live streaming chart.
See the Chart.js documentation, samples and vue-chartjs documentation
for the customization options.
...
this.renderChart({
datasets: [{
...
label: 'Dataset 1',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
lineTension: 0,
borderDash: [8, 4]
}, {
...
label: 'Dataset 2',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
}, {
scales: {
xAxes: [{
...
realtime: {
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
},
delay: 2000
}
}]
}
});
...
See also GitHub repository and samples