Bump version to 1.6.0

README.md

@@ -28,7 +28,7 @@ chartjs-plugin-streaming can be used with ES6 modules, plain JavaScript and modu
 
 chartjs-plugin-streaming requires [Moment.js](https://momentjs.com/) and [Chart.js](https://www.chartjs.org).
 
-Version 1.5 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 as it disappears off the chart.
+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.
 
 ## Tutorial and Samples
 
@@ -38,15 +38,16 @@ You can find a tutorial and samples at [nagix.github.io/chartjs-plugin-streaming
 
 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.
 
-| Name | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
 | `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.
 | `plugins.streaming.duration` | `Number` | `10000` | Duration of the chart in milliseconds (how much time of data it will show).
-| `plugins.streaming.refresh` | `Number` | `1000` | Reshresh interval of data in milliseconds. `onRefresh` callback function will be called at this interval.
+| `plugins.streaming.refresh` | `Number` | `1000` | Refresh interval of data in milliseconds. `onRefresh` callback function will be called at this interval.
 | `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.
 | `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)
 | `plugins.streaming.pause` | `Boolean` | `false` | If set to `true`, scrolling stops. Note that `onRefresh` callback is called even when this is set to `true`.
 | `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.
+| `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.
 
 > **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.
 
@@ -57,7 +58,7 @@ For example:
     type: 'line',               // 'line', 'bar', 'bubble' and 'scatter' types are supported
     data: {
         datasets: [{
-            data: []            // empty at the beggining
+            data: []            // empty at the beginning
         }]
     },
     options: {
@@ -73,6 +74,7 @@ For example:
                 delay: 1000,        // delay of 1000 ms, so upcoming values are known before plotting a line
                 frameRate: 30,      // chart is drawn 30 times every second
                 pause: false,       // chart is not paused
+                ttl: undefined,     // data will be automatically deleted as it disappears off the chart
 
                 // a callback to update datasets
                 onRefresh: function(chart) {
@@ -96,6 +98,36 @@ Note that the following options are ignored for the 'realtime' scale.
 - `time.max`
 - `time.min`
 
+## Support for Zooming and panning
+
+By using together with [chartjs-plugin-zoom](https://github.com/chartjs/chartjs-plugin-zoom), zooming and panning of a streaming chart can be done via the mouse or finger gestures. Unlike other scale types, the `rangeMin` and `rangeMax` options don't specify time values. Instead, `pan.rangeMin` and `pan.rangeMax` limit the range of the `delay` option value while `zoom.rangeMin` and `zoom.rangeMax` limit the range of the `duration` option value.
+
+```
+    options: {
+        // Assume x axis is the realtime scale
+        pan: {
+            enabled: true,    // Enable panning
+            mode: 'x',        // Allow panning in the x direction
+            rangeMin: {
+                x: null       // Min value of the delay option
+            },
+            rangeMax: {
+                x: null       // Max value of the delay option
+            }
+        },
+        zoom: {
+            enabled: true,    // Enable zooming
+            mode: 'x',        // Allow zooming in the x direction
+            rangeMin: {
+                x: null       // Min value of the duration option
+            },
+            rangeMax: {
+                x: null       // Max value of the duration option
+            }
+        }
+    }
+```
+
 ## Lowering CPU Usage
 
 If you are using this plugin on resource constrained devices or drawing multiple charts on a large screen, it might be a good idea to decrease the frame rate to lower CPU usage. The following settings also reduce CPU usage by disabling animation, and improve general page performance.

docs/index.html

@@ -15,7 +15,7 @@
     <meta name="theme-color" content="#ffffff">
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
-    <script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+    <script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
   </head>
   <body>
     <section id="hero-spot" class="hero-spot">

docs/ja/index.html

@@ -15,7 +15,7 @@
     <meta name="theme-color" content="#ffffff">
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
-    <script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+    <script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
   </head>
   <body>
     <section id="hero-spot" class="hero-spot">

docs/samples/annotation.html

@@ -10,7 +10,7 @@
 	<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/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
-	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
 	<style>
 		canvas {
 			-moz-user-select: none;
@@ -209,7 +209,7 @@
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"&gt;&lt;/script&gt;
-	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 	&lt;div&gt;

docs/samples/bar-horizontal.html

@@ -9,7 +9,7 @@
 	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 	<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://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
 	<style>
 		canvas {
 			-moz-user-select: none;
@@ -162,7 +162,7 @@
 				<pre class="prettyprint lang-html p-3 bg-light">&lt;head&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
-	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 	&lt;div&gt;

docs/samples/bar-vertical.html

@@ -9,7 +9,7 @@
 	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 	<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://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
 	<style>
 		canvas {
 			-moz-user-select: none;
@@ -161,7 +161,7 @@
 				<pre class="prettyprint lang-html p-3 bg-light">&lt;head&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
-	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 	&lt;div&gt;

docs/samples/bubble-horizontal.html

@@ -9,7 +9,7 @@
 	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 	<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://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
 	<style>
 		canvas {
 			-moz-user-select: none;
@@ -166,7 +166,7 @@
 				<pre class="prettyprint lang-html p-3 bg-light">&lt;head&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
-	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 	&lt;div&gt;

docs/samples/bubble-vertical.html

@@ -9,7 +9,7 @@
 	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 	<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://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
 	<style>
 		canvas {
 			-moz-user-select: none;
@@ -167,7 +167,7 @@
 				<pre class="prettyprint lang-html p-3 bg-light">&lt;head&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
-	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 	&lt;div&gt;

docs/samples/datalabels.html

@@ -10,7 +10,7 @@
 	<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://github.com/chartjs/chartjs-plugin-datalabels/releases/download/v0.4.0/chartjs-plugin-datalabels.min.js"></script>
-	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
 	<style>
 		canvas {
 			-moz-user-select: none;
@@ -189,7 +189,7 @@
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://github.com/chartjs/chartjs-plugin-datalabels/releases/download/v0.4.0/chartjs-plugin-datalabels.min.js"&gt;&lt;/script&gt;
-	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 	&lt;div&gt;

docs/samples/financial.html

@@ -10,7 +10,7 @@
 	<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.rawgit.com/chartjs/chartjs-chart-financial/master/docs/Chart.Financial.js"></script>
-	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
 	<style>
 		canvas {
 			-moz-user-select: none;
@@ -98,7 +98,7 @@
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdn.rawgit.com/chartjs/chartjs-chart-financial/master/docs/Chart.Financial.js"&gt;&lt;/script&gt;
-	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 	&lt;div&gt;

docs/samples/index.html

@@ -29,14 +29,15 @@ <h2>
             <a href="./bar-vertical.html">Bar chart (vertical scroll)</a><br />
             <a href="./mixed-horizontal.html">Mixed chart (hotizontal scroll)</a><br />
             <a href="./mixed-vertical.html">Mixed chart (vertical scroll)</a><br />
+            <a href="./bubble-horizontal.html">Bubble chart (hotizontal scroll)</a><br />
           </h2>
         </li>
         <li>
           <h2>
-            <a href="./bubble-horizontal.html">Bubble chart (hotizontal scroll)</a><br />
             <a href="./bubble-vertical.html">Bubble chart (vertical scroll)</a><br />
             <a href="./datalabels.html">Data labels plugin</a><br />
             <a href="./annotation.html">Annotation plugin</a><br />
+            <a href="./zoom.html">Zoom plugin</a><br />
             <a href="./financial.html">Financial chart</a><br />
             <a href="./interactions.html">Interactions</a><br />
           </h2>

docs/samples/interactions.html

@@ -9,7 +9,7 @@
 	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 	<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://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
+	<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"></script>
 	<style>
 		canvas {
 			-moz-user-select: none;
@@ -259,7 +259,7 @@
 				<pre class="prettyprint lang-html p-3 bg-light">&lt;head&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
 	&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
-	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
+	&lt;script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.0/chartjs-plugin-streaming.min.js"&gt;&lt;/script&gt;
 	&lt;style&gt;
 		.label {
 			display: inline-block;