Skip to content

Commit 94fc1d2

Browse files
nagixnagix
committed
Bump version to 1.7.0
1 parent 8fb782e commit 94fc1d2

20 files changed

+874
-446
lines changed

‎README.md‎

Lines changed: 113 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,52 @@ chartjs-plugin-streaming can be used with ES6 modules, plain JavaScript and modu
2828

2929
chartjs-plugin-streaming requires [Moment.js](https://momentjs.com/) and [Chart.js](https://www.chartjs.org).
3030

31-
Version 1.6 supports the [line](https://www.chartjs.org/docs/latest/charts/line.html) and [bar](https://www.chartjs.org/docs/latest/charts/bar.html) chart types with both [Number data](https://www.chartjs.org/docs/latest/charts/line.html#number) and [Point data](https://www.chartjs.org/docs/latest/charts/line.html#point) (each data point is specified an array of objects containing x and y properties) as well as the [bubble](https://www.chartjs.org/docs/latest/charts/bubble.html) and [scatter](https://www.chartjs.org/docs/latest/charts/scatter.html) chart types with Point data. In case of Point data, either x or y must be in any of the [date formats](https://momentjs.com/docs/#/parsing/) that Moment.js accepts, and the corresponding axis must have a 'realtime' scale that has the same options as [time](https://www.chartjs.org/docs/latest/axes/cartesian/time.html) scale. Once the realtime scale is specified, the chart will auto-scroll along with that axis. Old data will be automatically deleted after the time specified by the `ttl` option, or as it disappears off the chart.
31+
Version 1.7 supports the [line](https://www.chartjs.org/docs/latest/charts/line.html) and [bar](https://www.chartjs.org/docs/latest/charts/bar.html) chart types with both [Number data](https://www.chartjs.org/docs/latest/charts/line.html#number) and [Point data](https://www.chartjs.org/docs/latest/charts/line.html#point) (each data point is specified an array of objects containing x and y properties) as well as the [bubble](https://www.chartjs.org/docs/latest/charts/bubble.html) and [scatter](https://www.chartjs.org/docs/latest/charts/scatter.html) chart types with Point data. In case of Point data, either x or y must be in any of the [date formats](https://momentjs.com/docs/#/parsing/) that Moment.js accepts, and the corresponding axis must have a 'realtime' scale that has the same options as [time](https://www.chartjs.org/docs/latest/axes/cartesian/time.html) scale. Once the realtime scale is specified, the chart will auto-scroll along with that axis. Old data will be automatically deleted after the time specified by the `ttl` option, or as it disappears off the chart.
3232

3333
## Tutorial and Samples
3434

3535
You can find a tutorial and samples at [nagix.github.io/chartjs-plugin-streaming](https://nagix.github.io/chartjs-plugin-streaming).
3636

3737
## Configuration
3838

39-
To configure this plugin, you can simply add the following entries to your chart options. [This example](https://nagix.github.io/chartjs-plugin-streaming/samples/interactions.html) shows how each option affects the appearance of a chart.
39+
The plugin options can be changed at 3 different levels and with the following priority:
40+
41+
- per axis: `options.scales.xAxes[].realtime.*` or `options.scales.yAxes[].realtime.*`
42+
- per chart: `options.plugins.streaming.*`
43+
- globally: `Chart.defaults.global.plugins.streaming.*`
44+
45+
All available options are listed below. [This example](https://nagix.github.io/chartjs-plugin-streaming/samples/interactions.html) shows how each option affects the appearance of a chart.
4046

4147
| Name | Type | Default | Description
4248
| ---- | ---- | ------- | -----------
43-
| `plugins.streaming` | `Object` or `Boolean` | `true` | The streaming options (see `plugins.streaming.*` options). Also accepts a boolean, in which case if `true`, the chart will auto-scroll using the **global options**, else if `false`, the chart will not auto-scroll.
44-
| `plugins.streaming.duration` | `Number` | `10000` | Duration of the chart in milliseconds (how much time of data it will show).
45-
| `plugins.streaming.refresh` | `Number` | `1000` | Refresh interval of data in milliseconds. `onRefresh` callback function will be called at this interval.
46-
| `plugins.streaming.delay` | `Number` | `0` | Delay added to the chart in milliseconds so that upcoming values are known before lines are plotted. This makes the chart look like a continual stream rather than very jumpy on the right hand side. Specify the maximum expected delay.
47-
| `plugins.streaming.frameRate` | `Number` | `30` | Frequency at which the chart is drawn on a display (frames per second). Decrease this value to save CPU power. [more...](#lowering-cpu-usage)
48-
| `plugins.streaming.pause` | `Boolean` | `false` | If set to `true`, scrolling stops. Note that `onRefresh` callback is called even when this is set to `true`.
49-
| `plugins.streaming.onRefresh` | `Function` | `null` | Callback function that will be called at a regular interval. The callback takes one argument, a reference to the chart object. You can update your datasets here. The chart will be automatically updated after returning.
50-
| `plugins.streaming.ttl` | `Number` | | Duration of the data to be kept in milliseconds. If not set, old data will be automatically deleted as it disappears off the chart.
49+
| `duration` | `Number` | `10000` | Duration of the chart in milliseconds (how much time of data it will show).
50+
| `ttl` | `Number` | | Duration of the data to be kept in milliseconds. If not set, old data will be automatically deleted as it disappears off the chart.
51+
| `delay` | `Number` | `0` | Delay added to the chart in milliseconds so that upcoming values are known before lines are plotted. This makes the chart look like a continual stream rather than very jumpy on the right hand side. Specify the maximum expected delay.
52+
| `refresh` | `Number` | `1000` | Refresh interval of data in milliseconds. `onRefresh` callback function will be called at this interval.
53+
| `onRefresh` | `Function` | `null` | Callback function that will be called at a regular interval. The callback takes one argument, a reference to the chart object. You can update your datasets here. The chart will be automatically updated after returning.
54+
| `frameRate` | `Number` | `30` | Frequency at which the chart is drawn on a display (frames per second). This option can be set at chart level but not at axis level. Decrease this value to save CPU power. [more...](#lowering-cpu-usage)
55+
| `pause` | `Boolean` | `false` | If set to `true`, scrolling stops. Note that `onRefresh` callback is called even when this is set to `true`.
56+
57+
Due to historical reasons, a chart with the 'time' scale will also auto-scroll if this plugin is enabled. If you want to stop scrolling a particular chart, set `options.plugins.streaming` to `false`.
58+
59+
Note that the following axis options are ignored for the 'realtime' scale.
60+
61+
- `bounds`
62+
- `distribution` (always `'linear'`)
63+
- `offset` (always `false`)
64+
- `ticks.major.enabled` (always `true`)
65+
- `time.max`
66+
- `time.min`
67+
68+
## Data Feed Models
69+
70+
This plugin supports both pull and push based data feed.
5171

52-
> **Global options** can be change through `Chart.defaults.global.plugins.streaming`, which by default enable auto-scroll of the charts that have a time scale.
72+
### Pull Model (Polling Based)
73+
74+
In the pull model, the user code needs to asks for new data and pull it from a data source. To enable this, the plugin provides two options: `onRefresh` which is the callback function that is called at a regular interval to check the data source and `refresh` which specifies the interval. In this callback function, you can add data into the existing data array as usual, but you don't need to call the `update` function as it is called internally.
75+
76+
This model is suitable for data sources such as web servers, Kafka (REST Proxy), Kinesis (Data Streams API) and other time series databases with REST API support including Elasticsearch, OpenTSDB and Graphite.
5377

5478
For example:
5579

@@ -64,39 +88,95 @@ For example:
6488
options: {
6589
scales: {
6690
xAxes: [{
67-
type: 'realtime' // x axis will auto-scroll from right to left
91+
type: 'realtime', // x axis will auto-scroll from right to left
92+
realtime: {. // per-axis options
93+
duration: 20000, // data in the past 20000 ms will be displayed
94+
refresh: 1000, // onRefresh callback will be called every 1000 ms
95+
delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line
96+
pause: false, // chart is not paused
97+
ttl: undefined, // data will be automatically deleted as it disappears off the chart
98+
99+
// a callback to update datasets
100+
onRefresh: function(chart) {
101+
102+
// query your data source and get the array of {x: timestamp, y: value} objects
103+
var data = getLatestData();
104+
105+
// append the new data array to the existing chart data
106+
Array.prototype.push.apply(chart.data.datasets[0].data, data);
107+
}
108+
}
68109
}]
69110
},
70111
plugins: {
71-
streaming: { // enabled by default
72-
duration: 20000, // data in the past 20000 ms will be displayed
73-
refresh: 1000, // onRefresh callback will be called every 1000 ms
74-
delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line
75-
frameRate: 30, // chart is drawn 30 times every second
76-
pause: false, // chart is not paused
77-
ttl: undefined, // data will be automatically deleted as it disappears off the chart
78-
79-
// a callback to update datasets
80-
onRefresh: function(chart) {
81-
chart.data.datasets[0].data.push({
82-
x: Date.now(),
83-
y: Math.random() * 100
84-
});
112+
streaming: { // per-chart option
113+
frameRate: 30 // chart is drawn 30 times every second
114+
}
115+
}
116+
}
117+
}
118+
```
119+
120+
### Push Model (Listening Based)
121+
122+
In the push model, the user code registers a listener that waits for new data, and data can be picked up immediately after it arrives. Usually, data source connector libraries that supports the push model provide a listener callback function in which you can add data into the existing data array. The `update` function needs to be called after adding new data.
123+
124+
A problem with calling the `update` function for stream data feeds is that it can disrupt smooth transition because an `update` call interrupts the current animation and initiates a new one. To avoid this, this plugin added the `preservation` config property for the `update` function. If it is set to `true`, the current animation won't be interrupted and new data can be added without initiating a new animation.
125+
126+
This model is suitable for data sources such as WebSocket, MQTT, Kinesis (Client Library) and other realtime messaging services including Socket.IO, Pusher and Firebase.
127+
128+
For example:
129+
130+
```javascript
131+
{
132+
type: 'line', // 'line', 'bar', 'bubble' and 'scatter' types are supported
133+
data: {
134+
datasets: [{
135+
data: [] // empty at the beginning
136+
}]
137+
},
138+
options: {
139+
scales: {
140+
xAxes: [{
141+
type: 'realtime', // x axis will auto-scroll from right to left
142+
realtime: { // per-axis options
143+
duration: 20000, // data in the past 20000 ms will be displayed
144+
delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line
145+
pause: false, // chart is not paused
146+
ttl: undefined // data will be automatically deleted as it disappears off the chart
85147
}
148+
}]
149+
},
150+
plugins: {
151+
streaming: { // per-chart option
152+
frameRate: 30 // chart is drawn 30 times every second
86153
}
87154
}
88155
}
89156
}
90157
```
91158

92-
Note that the following options are ignored for the 'realtime' scale.
159+
Here is an example of a listener function:
93160

94-
- `bounds`
95-
- `distribution` (always `'linear'`)
96-
- `offset` (always `false`)
97-
- `ticks.major.enabled` (always `true`)
98-
- `time.max`
99-
- `time.min`
161+
```javascript
162+
// save the chart instance to a variable
163+
var myChart = new Chart(ctx, config);
164+
165+
// your event listener code - assuming the event object has the timestamp and value properties
166+
function onReceive(event) {
167+
168+
// append the new data to the existing chart data
169+
myChart.data.datasets[0].data.push({
170+
x: event.timestamp,
171+
y: event.value
172+
});
173+
174+
// update chart datasets keeping the current animation
175+
myChart.update({
176+
preservation: true
177+
});
178+
}
179+
```
100180

101181
## Support for Zooming and panning
102182

0 commit comments

Comments
 (0)