From 34446ede4434469ff5e926a2cbe95e37ca4b58f8 Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Sun, 2 May 2021 15:52:10 +0800 Subject: [PATCH] Bump version to 2.0.0-beta.1 --- .codeclimate.yml | 31 +- .eslintignore | 2 +- LICENSE.md | 2 +- README.md | 244 ++++---- docs/index.html | 84 +-- docs/ja/index.html | 86 +-- docs/samples/annotation.html | 650 +++++++++++---------- docs/samples/bar-horizontal.html | 480 ++++++++-------- docs/samples/bar-vertical.html | 478 ++++++++-------- docs/samples/bubble-horizontal.html | 492 ++++++++-------- docs/samples/bubble-vertical.html | 496 ++++++++-------- docs/samples/datalabels.html | 586 ++++++++++--------- docs/samples/financial.html | 330 +++++------ docs/samples/index.html | 2 +- docs/samples/interactions.html | 854 ++++++++++++++-------------- docs/samples/line-horizontal.html | 510 ++++++++--------- docs/samples/line-vertical.html | 544 +++++++++--------- docs/samples/mixed-horizontal.html | 510 +++++++++-------- docs/samples/mixed-vertical.html | 534 +++++++++-------- docs/samples/push.html | 588 ++++++++++--------- docs/samples/reverse.html | 518 +++++++++-------- docs/samples/zoom.html | 614 ++++++++++---------- samples/annotation.html | 7 +- samples/bar-horizontal.html | 6 +- samples/bar-vertical.html | 6 +- samples/bubble-horizontal.html | 6 +- samples/bubble-vertical.html | 6 +- samples/datalabels.html | 7 +- samples/financial.html | 4 +- samples/interactions.html | 8 +- samples/line-horizontal.html | 7 +- samples/line-vertical.html | 6 +- samples/mixed-horizontal.html | 6 +- samples/mixed-vertical.html | 6 +- samples/push.html | 7 +- samples/reverse.html | 7 +- samples/zoom.html | 7 +- 37 files changed, 4296 insertions(+), 4435 deletions(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index eefb153..f73f6ed 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -1,20 +1,23 @@ -engines: +version: "2" +plugins: duplication: enabled: true config: languages: - - javascript - eslint: - enabled: true - channel: "eslint-3" + - javascript fixme: enabled: true -ratings: - paths: - - "samples/**/*.js" - - "src/**/*.js" -exclude_paths: -- dist/**/* -- docs/**/* -- node_modules/**/* -- test/**/* +checks: + method-complexity: + config: + threshold: 6 +exclude_patterns: + - "dist/" + - "docs/" + - "scripts/" + - "test/" + - "*.js" + - "*.json" + - "*.md" + - ".*" + \ No newline at end of file diff --git a/.eslintignore b/.eslintignore index 96212a3..5f98501 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1 @@ -**/*{.,-}min.js +dist/*.js diff --git a/LICENSE.md b/LICENSE.md index 7c211e9..e7aa96d 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2019 Akihiko Kusanagi +Copyright (c) 2021 Akihiko Kusanagi Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/README.md b/README.md index ea36446..0239471 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,13 @@ # chartjs-plugin-streaming -[![npm](https://img.shields.io/npm/v/chartjs-plugin-streaming.svg?style=flat-square)](https://npmjs.com/package/chartjs-plugin-streaming) [![Bower](https://img.shields.io/bower/v/chartjs-plugin-streaming.svg?style=flat-square)](https://libraries.io/bower/chartjs-plugin-streaming) [![Travis](https://img.shields.io/travis/nagix/chartjs-plugin-streaming/master.svg?style=flat-square)](https://travis-ci.org/nagix/chartjs-plugin-streaming) [![Code Climate](https://img.shields.io/codeclimate/maintainability/nagix/chartjs-plugin-streaming.svg?style=flat-square)](https://codeclimate.com/github/nagix/chartjs-plugin-streaming) [![Awesome](https://awesome.re/badge-flat2.svg)](https://github.com/chartjs/awesome) +[![npm](https://img.shields.io/npm/v/chartjs-plugin-streaming.svg?style=flat-square)](https://npmjs.com/package/chartjs-plugin-streaming) [![Travis](https://img.shields.io/travis/nagix/chartjs-plugin-streaming/master.svg?style=flat-square)](https://travis-ci.org/nagix/chartjs-plugin-streaming) [![Code Climate](https://img.shields.io/codeclimate/maintainability/nagix/chartjs-plugin-streaming.svg?style=flat-square)](https://codeclimate.com/github/nagix/chartjs-plugin-streaming) [![Awesome](https://awesome.re/badge-flat2.svg)](https://github.com/chartjs/awesome) *[Chart.js](https://www.chartjs.org) plugin for live streaming data* -Version 1.2 or earlier requires Chart.js 2.6.x. Version 1.3 or later requires Chart.js 2.7.x. Version 1.8 requires Chart.js 2.7.x or 2.8.x. +The latest version of chartjs-plugin-streaming requires Chart.js 3.0.0 or later. If you need Chart.js 2.x support, use the following versions. + +- For Chart.js 2.8.x or 2.7.x, use [version 1.8.0](https://github.com/nagix/chartjs-plugin-streaming/releases/tag/v1.8.0) +- For Chart.js 2.6.x, use [version 1.2.0](https://github.com/nagix/chartjs-plugin-streaming/releases/tag/v1.2.0) ## Installation @@ -16,28 +19,19 @@ To install via npm: npm install chartjs-plugin-streaming --save ``` -To install via bower: - -```bash -bower install chartjs-plugin-streaming --save -``` - To use CDN: ```html - -``` -```html - + ``` ## Usage chartjs-plugin-streaming can be used with ES6 modules, plain JavaScript and module loaders. -chartjs-plugin-streaming requires [Moment.js](https://momentjs.com/) and [Chart.js](https://www.chartjs.org). If you are using Chart.js 2.8.0 or later, Moment.js can be replaced with [other date libraries and corresponding adapters](https://github.com/chartjs/awesome#adapters). +chartjs-plugin-streaming requires both a date library and a corresponding adapter to display time scales. Please choose from the [available adapters](https://github.com/chartjs/awesome#adapters). -Version 1.8 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 that the data library accepts ([date formats](https://momentjs.com/docs/#/parsing/) in case of Moment.js), 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. +Version 2.0 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 [Primitive[]](https://www.chartjs.org/docs/latest/general/data-structures.html#primitive) and [Object[]](https://www.chartjs.org/docs/latest/general/data-structures.html#object) data (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 Object[] data. In case of Object[] data, either x or y must be in any of the date formats that the data library accepts ([date formats](https://momentjs.com/docs/#/parsing/) in Moment.js for example), 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. ### Usage in ES6 as module @@ -55,9 +49,9 @@ You can find a tutorial and samples at [nagix.github.io/chartjs-plugin-streaming The plugin options can be changed at 3 different levels and with the following priority: -- per axis: `options.scales.xAxes[].realtime.*` or `options.scales.yAxes[].realtime.*` +- per axis: `options.scales[scaleId].realtime.*` - per chart: `options.plugins.streaming.*` -- globally: `Chart.defaults.global.plugins.streaming.*` +- globally: `Chart.defaults.plugins.streaming.*` 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. @@ -71,16 +65,14 @@ All available options are listed below. [This example](https://nagix.github.io/c | `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) | `pause` | `boolean` | `false` | If set to `true`, scrolling stops. Note that `onRefresh` callback is called even when this is set to `true`. -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`. - -Note that the following axis options are ignored for the 'realtime' scale. +Note that the following axis options are ignored for the `'realtime'` scale. - `bounds` -- `distribution` (always `'linear'`) +- `max` +- `min` - `offset` (always `false`) +- `ticks.autoSkip` (always `false`) - `ticks.major.enabled` (always `true`) -- `time.max` -- `time.min` ## Data Feed Models @@ -94,41 +86,41 @@ For example: ```javascript { - type: 'line', // 'line', 'bar', 'bubble' and 'scatter' types are supported - data: { - datasets: [{ - data: [] // empty at the beginning - }] - }, - options: { - scales: { - xAxes: [{ - type: 'realtime', // x axis will auto-scroll from right to left - realtime: { // per-axis options - duration: 20000, // data in the past 20000 ms will be displayed - refresh: 1000, // onRefresh callback will be called every 1000 ms - delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line - 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) { - - // query your data source and get the array of {x: timestamp, y: value} objects - var data = getLatestData(); - - // append the new data array to the existing chart data - Array.prototype.push.apply(chart.data.datasets[0].data, data); - } - } - }] - }, - plugins: { - streaming: { // per-chart option - frameRate: 30 // chart is drawn 30 times every second - } + type: 'line', // 'line', 'bar', 'bubble' and 'scatter' types are supported + data: { + datasets: [{ + data: [] // empty at the beginning + }] + }, + options: { + scales: { + x: { + type: 'realtime', // x axis will auto-scroll from right to left + realtime: { // per-axis options + duration: 20000, // data in the past 20000 ms will be displayed + refresh: 1000, // onRefresh callback will be called every 1000 ms + delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line + 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) { + + // query your data source and get the array of {x: timestamp, y: value} objects + var data = getLatestData(); + + // append the new data array to the existing chart data + Array.prototype.push.apply(chart.data.datasets[0].data, data); + } } + } + }, + plugins: { + streaming: { // per-chart option + frameRate: 30 // chart is drawn 30 times every second + } } + } } ``` @@ -136,43 +128,39 @@ For example: If your data source responds to requests asynchronously, you will probably receive the results in a callback function in which you can add data into the existing data array. The `update` function needs to be called after adding new data. -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. - 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. For example: ```javascript { - options: { - scales: { - xAxes: [{ - realtime: { - onRefresh: function(chart) { - // request data so that it can be received in a callback function - var xhr = new XMLHttpRequest(); - xhr.open('GET', YOUR_DATA_SOURCE_URL); - xhr.onload = function () { - if (xhr.readyState === 4 && xhr.status === 200) { - - // assume the response is an array of {x: timestamp, y: value} objects - var data = JSON.parse(xhr.responseText); - - // append the new data array to the existing chart data - Array.prototype.push.apply(chart.data.datasets[0].data, data); - - // update chart datasets keeping the current animation - chart.update({ - preservation: true - }); - } - }; - xhr.send(); - } - } - }] + options: { + scales: { + x: { + realtime: { + onRefresh: function(chart) { + // request data so that it can be received in a callback function + var xhr = new XMLHttpRequest(); + xhr.open('GET', YOUR_DATA_SOURCE_URL); + xhr.onload = function () { + if (xhr.readyState === 4 && xhr.status === 200) { + + // assume the response is an array of {x: timestamp, y: value} objects + var data = JSON.parse(xhr.responseText); + + // append the new data array to the existing chart data + Array.prototype.push.apply(chart.data.datasets[0].data, data); + + // update chart datasets without animation + chart.update('none'); + } + }; + xhr.send(); + } } + } } + } } ``` @@ -191,70 +179,58 @@ var myChart = new Chart(ctx, config); // your event listener code - assuming the event object has the timestamp and value properties function onReceive(event) { - // append the new data to the existing chart data - myChart.data.datasets[0].data.push({ - x: event.timestamp, - y: event.value - }); + // append the new data to the existing chart data + myChart.data.datasets[0].data.push({ + x: event.timestamp, + y: event.value + }); - // update chart datasets keeping the current animation - myChart.update({ - preservation: true - }); + // update chart datasets without animation + myChart.update('none'); } ``` ## 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. +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 `min`, `max` and `minRange` in the `limits` options are not used. Instead, the `minDelay`, `maxDelay`, `minDuration` and `maxDuration` limit the range of the `delay` and `duration` option values. ```javascript - 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 - } - } + options: { + // Assume x axis is the realtime scale + pan: { + enabled: true, // Enable panning + mode: 'x' // Allow panning in the x direction + }, + zoom: { + enabled: true, // Enable zooming + mode: 'x' // Allow zooming in the x direction + }, + limits: { + x: { + minDelay: null, // Min value of the delay option + maxDelay: null, // Max value of the delay option + minDuration: null, // Min value of the duration option + maxDuration: null // Max value of the duration option + } } + } ``` Note that `chartjs-plugin-zoom.js` needs to be included before `chartjs-plugin-streaming.js`. ## 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. +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 animations, and improve general page performance. ```javascript - options: { - animation: { - duration: 0 // general animation time - }, - hover: { - animationDuration: 0 // duration of animations when hovering an item - }, - responsiveAnimationDuration: 0, // animation duration after a resize - plugins: { - streaming: { - frameRate: 5 // chart is drawn 5 times every second - } - } + options: { + animation: false, + plugins: { + streaming: { + frameRate: 5 // chart is drawn 5 times every second + } } + } ``` ## Building @@ -268,10 +244,10 @@ npm install The following commands will then be available from the repository root: ```bash -gulp build # build dist files -gulp build --watch # build and watch for changes -gulp lint # perform code linting -gulp package # create an archive with dist files and samples +gulp build # build dist files +gulp build --watch # build and watch for changes +gulp lint # perform code linting +gulp package # create an archive with dist files and samples ``` ## License diff --git a/docs/index.html b/docs/index.html index 142c516..438b38d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -13,9 +13,10 @@ - - - + + + +
@@ -39,12 +40,14 @@

Let’s get started.

  • Include scripts

    -

    First, we need to include moment.js, Chart.js and chartjs-plugin-streaming.js in our page.

    +

    First, we need to include Chart.js, moment.js, chartjs-adapter-moment
    + 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="moment.js"></script>

    +

    <script type="text/javascript" src="chartjs-adapter-moment.js"></script>

    <script type="text/javascript" src="chartjs-plugin-streaming.js"></script>

    @@ -79,9 +82,9 @@

    Create a chart

      },

      options: {

        scales: {

    -

          xAxes: [{

    +

          x: {

            type: 'realtime'

    -

          }]

    +

          }

        }

      }

    });

    @@ -103,7 +106,7 @@

    Stream data

      ...

      options: {

        scales: {

    -

          xAxes: [{

    +

          x: {

            ...

            realtime: {

              onRefresh: function(chart) {

    @@ -138,7 +141,7 @@

    Add some delay

      ...

      options: {

        scales: {

    -

          xAxes: [{

    +

          x: {

            ...

            realtime: {

              ...

    @@ -166,13 +169,13 @@

    Splash of color

          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)'

    +

          backgroundColor: 'rgba(54, 162, 235, 0.5)',

    +

          cubicInterpolationMode: 'monotone'

        }]

        ...

    @@ -289,9 +292,9 @@

    Create a chart

      }];

      options: any = {

        scales: {

    -

          xAxes: [{

    +

          x: {

            type: 'realtime'

    -

          }]

    +

          }

        }

      };

    }

    @@ -310,15 +313,15 @@

    Stream data

      datasets: any[] = [{

        ...

        label: 'Dataset 1',

    -

        lineTension: 0,

        borderDash: [8, 4]

      }, {

        ...

    -

        label: 'Dataset 2'

    +

        label: 'Dataset 2',

    +

        cubicInterpolationMode: 'monotone'

      }];

      options: any = {

        scales: {

    -

          xAxes: [{

    +

          x: {

            ...

            realtime: {

              onRefresh: function(chart: any) {

    @@ -331,7 +334,7 @@

    Stream data

              },

              delay: 2000

            }

    -

          }]

    +

          }

        }

      };

    }

    @@ -367,7 +370,7 @@

    Create a new application

  • Install modules

    -

    Install react-chartjs-2 and chartjs-plugin-streaming into our project.

    +

    Install react-chartjs-2 and chartjs-plugin-streaming into our project.

    @@ -400,9 +403,9 @@

    Create a chart component

            }}

            options={{

              scales: {

    -

                xAxes: [{

    +

                x: {

                  type: 'realtime'

    -

                }]

    +

                }

              }

            }}

          />

    @@ -417,7 +420,7 @@

    Create a chart component

  • Stream data

    -

    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.

    +

    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.

    src/App.js (Patial)
    @@ -429,13 +432,13 @@

    Stream data

                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)'

    +

                backgroundColor: 'rgba(54, 162, 235, 0.5)',

    +

                cubicInterpolationMode: 'monotone'

              }]

            }}

            options={{

    @@ -453,7 +456,7 @@

    Stream data

                    },

                    delay: 2000

                  }

    -

                }]

    +

                }

              }

            }}

          />

    @@ -546,9 +549,9 @@

    Create a chart component

          }]

        }, {

          scales: {

    -

            xAxes: [{

    +

            x: {

              type: 'realtime'

    -

            }]

    +

            }

          }

        });

      }

    @@ -571,17 +574,17 @@

    Stream data

            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)'

    +

            backgroundColor: 'rgba(54, 162, 235, 0.5)',

    +

            cubicInterpolationMode: 'monotone'

          }]

        }, {

          scales: {

    -

            xAxes: [{

    +

            x: {

              ...

              realtime: {

                onRefresh: function(chart) {

    @@ -594,7 +597,7 @@

    Stream data

                },

                delay: 2000

              }

    -

            }]

    +

            }

          }

        });

        ...

    @@ -627,27 +630,27 @@

    ...and you're done!

    var chart1 = new Chart(ctx1, { type: 'line', data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ type: 'realtime' }] } } + options: { scales: { x: { type: 'realtime' } } } }); var ctx2 = document.getElementById('chart2').getContext('2d'); var chart2 = new Chart(ctx2, { type: 'line', data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ + options: { scales: { x: { type: 'realtime', realtime: { onRefresh: onRefresh } - }] } } + } } } }); var ctx3 = document.getElementById('chart3').getContext('2d'); var chart3 = new Chart(ctx3, { type: 'line', data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ + options: { scales: { x: { type: 'realtime', realtime: { onRefresh: onRefresh, delay: 2000 } - }] } } + } } } }); var ctx4 = document.getElementById('chart4').getContext('2d'); @@ -658,18 +661,19 @@

    ...and you're done!

    label: 'Dataset 1', borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.5)', - lineTension: 0, borderDash: [8, 4] }, { data: [], label: 'Dataset 2', borderColor: 'rgb(54, 162, 235)', - backgroundColor: 'rgba(54, 162, 235, 0.5)' + backgroundColor: 'rgba(54, 162, 235, 0.5)', + cubicInterpolationMode: 'monotone', + tension: 1e-6 }] }, - options: { scales: { xAxes: [{ + options: { scales: { x: { type: 'realtime', realtime: { onRefresh: onRefresh, delay: 2000 } - }] } } + } } } }); @@ -684,7 +688,7 @@

    ...and you're done!

    - - + + + +
    @@ -39,12 +40,14 @@

    早速始めましょう。

  • スクリプトを含める

    -

    まず moment.jsChart.jschartjs-plugin-streaming.js をページに含める必要があります。

    +

    まず Chart.jsmoment.jschartjs-adapter-moment
    + chartjs-plugin-streaming.js をページに含めます。

    -

    <script type="text/javascript" src="moment.js"></script>

    <script type="text/javascript" src="Chart.js"></script>

    +

    <script type="text/javascript" src="moment.js"></script>

    +

    <script type="text/javascript" src="chartjs-adapter-moment.js"></script>

    <script type="text/javascript" src="chartjs-plugin-streaming.js"></script>

    @@ -79,9 +82,9 @@

    チャートを作成する

      },

      options: {

        scales: {

    -

          xAxes: [{

    +

          x: {

            type: 'realtime'

    -

          }]

    +

          }

        }

      }

    });

    @@ -103,7 +106,7 @@

    データを流し込む

      ...

      options: {

        scales: {

    -

          xAxes: [{

    +

          x: {

            ...

            realtime: {

              onRefresh: function(chart) {

    @@ -138,7 +141,7 @@

    遅延を追加する

      ...

      options: {

        scales: {

    -

          xAxes: [{

    +

          x: {

            ...

            realtime: {

              ...

    @@ -166,13 +169,13 @@

    色をつける

          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)'

    +

          backgroundColor: 'rgba(54, 162, 235, 0.5)',

    +

          cubicInterpolationMode: 'monotone'

        }]

        ...

  • @@ -289,9 +292,9 @@

    チャートを作成する

      }];

      options: any = {

        scales: {

    -

          xAxes: [{

    +

          x: {

            type: 'realtime'

    -

          }]

    +

          }

        }

      };

    }

    @@ -310,15 +313,15 @@

    データを流し込む

      datasets: any[] = [{

        ...

        label: 'Dataset 1',

    -

        lineTension: 0,

        borderDash: [8, 4]

      }, {

        ...

    -

        label: 'Dataset 2'

    +

        label: 'Dataset 2',

    +

        cubicInterpolationMode: 'monotone'

      }];

      options: any = {

        scales: {

    -

          xAxes: [{

    +

          x: {

            ...

            realtime: {

              onRefresh: function(chart: any) {

    @@ -331,7 +334,7 @@

    データを流し込む

              },

              delay: 2000

            }

    -

          }]

    +

          }

        }

      };

    }

    @@ -367,7 +370,7 @@

    アプリケーションを新たに作成する

  • モジュールをインストールする

    -

    react-chartjs-2 および chartjs-plugin-streaming をプロジェクトにインストールします。

    +

    react-chartjs-2 および chartjs-plugin-streaming をプロジェクトにインストールします。

    @@ -400,9 +403,9 @@

    チャートを作成する

            }}

            options={{

              scales: {

    -

                xAxes: [{

    +

                x: {

                  type: 'realtime'

    -

                }]

    +

                }

              }

            }}

          />

    @@ -417,7 +420,7 @@

    チャートを作成する

  • データを流し込む

    -

    コールバック関数でデータを追加し、様々なチャートオプションを指定することができます。
    ブラウザは自動更新され、ストリーミングチャートが表示されます。
    カスタマイズのオプションについては Chart.js のドキュメントサンプル
    react-chartjs-2 のドキュメントをご覧ください。

    +

    コールバック関数でデータを追加し、様々なチャートオプションを指定することができます。
    ブラウザは自動更新され、ストリーミングチャートが表示されます。
    カスタマイズのオプションについては Chart.js のドキュメントサンプル
    react-chartjs-2 のドキュメントをご覧ください。

    src/App.js (一部)
    @@ -429,18 +432,18 @@

    データを流し込む

                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)'

    +

                backgroundColor: 'rgba(54, 162, 235, 0.5)',

    +

                cubicInterpolationMode: 'monotone'

              }]

            }}

            options={{

              scales: {

    -

                xAxes: [{

    +

                x: {

                  ...

                  realtime: {

                    onRefresh: function(chart) {

    @@ -453,7 +456,7 @@

    データを流し込む

                    },

                    delay: 2000

                  }

    -

                }]

    +

                }

              }

            }}

          />

    @@ -546,9 +549,9 @@

    チャートコンポーネントを作成する

          }]

        }, {

          scales: {

    -

            xAxes: [{

    +

            x: {

              type: 'realtime'

    -

            }]

    +

            }

          }

        });

      }

    @@ -571,17 +574,17 @@

    データを流し込む

            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)'

    +

            backgroundColor: 'rgba(54, 162, 235, 0.5)',

    +

            cubicInterpolationMode: 'monotone'

          }]

        }, {

          scales: {

    -

            xAxes: [{

    +

            x: {

              ...

              realtime: {

                onRefresh: function(chart) {

    @@ -594,7 +597,7 @@

    データを流し込む

                },

                delay: 2000

              }

    -

            }]

    +

            }

          }

        });

        ...

    @@ -627,27 +630,27 @@

    ...これで完了です!

    var chart1 = new Chart(ctx1, { type: 'line', data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ type: 'realtime' }] } } + options: { scales: { x: { type: 'realtime' } } } }); var ctx2 = document.getElementById('chart2').getContext('2d'); var chart2 = new Chart(ctx2, { type: 'line', data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ + options: { scales: { x: { type: 'realtime', realtime: { onRefresh: onRefresh } - }] } } + } } } }); var ctx3 = document.getElementById('chart3').getContext('2d'); var chart3 = new Chart(ctx3, { type: 'line', data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ + options: { scales: { x: { type: 'realtime', realtime: { onRefresh: onRefresh, delay: 2000 } - }] } } + } } } }); var ctx4 = document.getElementById('chart4').getContext('2d'); @@ -658,18 +661,19 @@

    ...これで完了です!

    label: 'Dataset 1', borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.5)', - lineTension: 0, borderDash: [8, 4] }, { data: [], label: 'Dataset 2', borderColor: 'rgb(54, 162, 235)', - backgroundColor: 'rgba(54, 162, 235, 0.5)' + backgroundColor: 'rgba(54, 162, 235, 0.5)', + cubicInterpolationMode: 'monotone', + tension: 1e-6 }] }, - options: { scales: { xAxes: [{ + options: { scales: { x: { type: 'realtime', realtime: { onRefresh: onRefresh, delay: 2000 } - }] } } + } } } }); @@ -684,7 +688,7 @@

    ...これで完了です!

    - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor()
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'line',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (linear interpolation)',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			lineTension: 0,
    -			borderDash: [8, 4],
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (cubic interpolation)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			fill: false,
    -			cubicInterpolationMode: 'monotone',
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Annotation plugin sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}],
    -			yAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		annotation: {
    -			events: ['click'],
    -			annotations: [
    -				{
    -					drawTime: 'afterDatasetsDraw',
    -					id: 'hline',
    -					type: 'line',
    -					mode: 'horizontal',
    -					scaleID: 'y-axis-0',
    -					value: randomScalingFactor(),
    -					borderColor: 'black',
    -					borderWidth: 5,
    -					label: {
    -						backgroundColor: 'red',
    -						content: 'Test Label',
    -						enabled: true
    -					},
    -					onClick: function(e) {
    -						console.log('Annotation', e.type, this);
    -					}
    -				},
    -				{
    -					drawTime: 'beforeDatasetsDraw',
    -					type: 'box',
    -					yScaleID: 'y-axis-0',
    -					yMin: randomScalingFactor(),
    -					yMax: randomScalingFactor(),
    -					backgroundColor: color(chartColors.purple).alpha(0.25).rgbString(),
    -					borderColor: color(chartColors.purple),
    -					borderWidth: 1,
    -					onClick: function(e) {
    -						console.log('Box', e.type, this);
    -					}
    -				}
    -			]
    -		}
    -	}
    +  type: 'line',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (linear interpolation)',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      borderDash: [8, 4],
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (cubic interpolation)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      fill: false,
    +      cubicInterpolationMode: 'monotone',
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      },
    +      y: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Annotation plugin sample'
    +      },
    +      annotation: {
    +        annotations: {
    +          line: {
    +            drawTime: 'afterDatasetsDraw',
    +            type: 'line',
    +            scaleID: 'y',
    +            value: randomScalingFactor(),
    +            borderColor: 'black',
    +            borderWidth: 5,
    +            label: {
    +              backgroundColor: 'red',
    +              content: 'Test Label',
    +              enabled: true
    +            },
    +            click: function(e) {
    +              console.log('Line', e.element);
    +            }
    +          },
    +          box: {
    +            drawTime: 'beforeDatasetsDraw',
    +            type: 'box',
    +            yMin: randomScalingFactor(),
    +            yMax: randomScalingFactor(),
    +            backgroundColor: color(chartColors.purple).alpha(0.25).rgbString(),
    +            borderColor: chartColors.purple,
    +            borderWidth: 1,
    +            click: function(e) {
    +              console.log('Box', e.element);
    +            }
    +          }
    +        }
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    fill: false,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@0.5.7/chartjs-plugin-annotation.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/bar-horizontal.html b/docs/samples/bar-horizontal.html index f1f69fe..2c21b93 100644 --- a/docs/samples/bar-horizontal.html +++ b/docs/samples/bar-horizontal.html @@ -2,292 +2,292 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor()
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'bar',
    -	data: {
    -		labels: [],
    -		datasets: [{
    -			label: 'Dataset 1',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			borderWidth: 1,
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Bar chart (hotizontal scroll) sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 1000,
    -					onRefresh: onRefresh
    -				}
    -			}],
    -			yAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'bar',
    +  data: {
    +    labels: [],
    +    datasets: [{
    +      label: 'Dataset 1',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      borderWidth: 1,
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 0,
    +          onRefresh: onRefresh
    +        }
    +      },
    +      y: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      mode: 'nearest',
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Bar chart (hotizontal scroll) sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		borderWidth: 1,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    borderWidth: 1,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/bar-vertical.html b/docs/samples/bar-vertical.html index 0aa677f..756a9d7 100644 --- a/docs/samples/bar-vertical.html +++ b/docs/samples/bar-vertical.html @@ -2,290 +2,292 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: randomScalingFactor(),
    -			y: Date.now()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: randomScalingFactor(),
    +      y: now
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'horizontalBar',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			borderWidth: 1,
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Bar chart (vertical scroll) sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}],
    -			yAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 1000,
    -					onRefresh: onRefresh
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'bar',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      borderWidth: 1,
    +      data: []
    +    }]
    +  },
    +  options: {
    +    indexAxis: 'y',
    +    scales: {
    +      x: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      },
    +      y: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 1000,
    +          onRefresh: onRefresh
    +        }
    +      }
    +    },
    +    interaction: {
    +      mode: 'nearest',
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Bar chart (vertical scroll) sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.x = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.x = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		borderWidth: 1,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    borderWidth: 1,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/bubble-horizontal.html b/docs/samples/bubble-horizontal.html index d27ce40..6c31295 100644 --- a/docs/samples/bubble-horizontal.html +++ b/docs/samples/bubble-horizontal.html @@ -2,300 +2,296 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor(),
    -			r: Math.abs(randomScalingFactor()) / 2 + 5
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor(),
    +      r: Math.abs(randomScalingFactor()) / 2 + 5
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'bubble',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			data: []
    -		}, {
    -			label: 'Dataset 2',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Bubble chart (hotizontal scroll) sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}],
    -			yAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'bubble',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      data: []
    +    }, {
    +      label: 'Dataset 2',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      },
    +      y: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Bubble chart (hotizontal scroll) sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/bubble-vertical.html b/docs/samples/bubble-vertical.html index ab88446..265ab0b 100644 --- a/docs/samples/bubble-vertical.html +++ b/docs/samples/bubble-vertical.html @@ -2,302 +2,298 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: randomScalingFactor(),
    -			y: Date.now(),
    -			r: Math.abs(randomScalingFactor()) / 2 + 5
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: randomScalingFactor(),
    +      y: now,
    +      r: Math.abs(randomScalingFactor()) / 2 + 5
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'bubble',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			data: []
    -		}, {
    -			label: 'Dataset 2',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Bubble chart (vertical scroll) sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}],
    -			yAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'bubble',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      data: []
    +    }, {
    +      label: 'Dataset 2',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      data: []
    +    }]
    +  },
    +  options: {
    +    indexAxis: 'y',
    +    scales: {
    +      x: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      },
    +      y: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Bubble chart (vertical scroll) sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.x = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.x = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/datalabels.html b/docs/samples/datalabels.html index 5d5559c..b51bb0e 100644 --- a/docs/samples/datalabels.html +++ b/docs/samples/datalabels.html @@ -2,348 +2,342 @@ - chartjs-plugin-streaming sample - - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor()
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'line',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (linear interpolation)',
    -			backgroundColor: chartColors.red,
    -			borderColor: chartColors.red,
    -			fill: false,
    -			lineTension: 0,
    -			borderDash: [8, 4],
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (cubic interpolation)',
    -			backgroundColor: chartColors.blue,
    -			borderColor: chartColors.blue,
    -			fill: false,
    -			cubicInterpolationMode: 'monotone',
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Data labels plugin sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}],
    -			yAxes: [{
    -				type: 'linear',
    -				display: true,
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		plugins: {
    -			datalabels: {
    -				backgroundColor: function(context) {
    -					return context.dataset.backgroundColor;
    -				},
    -				borderRadius: 4,
    -				clip: true,
    -				color: 'white',
    -				font: {
    -					weight: 'bold'
    -				},
    -				formatter: function(value) {
    -					return value.y;
    -				}
    -			}
    -		}
    -	}
    +  type: 'line',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (linear interpolation)',
    +      backgroundColor: chartColors.red,
    +      borderColor: chartColors.red,
    +      fill: false,
    +      borderDash: [8, 4],
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (cubic interpolation)',
    +      backgroundColor: chartColors.blue,
    +      borderColor: chartColors.blue,
    +      fill: false,
    +      cubicInterpolationMode: 'monotone',
    +      data: []
    +    }]
    +  },
    +  plugins: [ChartDataLabels],
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      },
    +      y: {
    +        type: 'linear',
    +        display: true,
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Data labels plugin sample'
    +      },
    +      datalabels: {
    +          backgroundColor: function(context) {
    +          return context.dataset.backgroundColor;
    +        },
    +        padding: 4,
    +        borderRadius: 4,
    +        clip: true,
    +        color: 'white',
    +        font: {
    +          weight: 'bold'
    +        },
    +        formatter: function(value) {
    +          return value.y;
    +        }
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: newColor,
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: newColor,
    +    borderColor: newColor,
    +    fill: false,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.6.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-beta.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/financial.html b/docs/samples/financial.html index c213d15..cc674a3 100644 --- a/docs/samples/financial.html +++ b/docs/samples/financial.html @@ -2,184 +2,194 @@ - chartjs-plugin-streaming sample - - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + + -
    - -
    -
    - -
    -
    -
    function onRefresh(chart) {
    -	var t = Date.now();
    -	var data = chart.data.datasets[0].data;
    -	var last;
    +  
    + +
    +
    + +
    +
    +
    function onRefresh(chart) {
    +  var t = Date.now();
    +  var data = chart.data.datasets[0].data;
    +  var last;
     
    -	t -= t % 5000;
    -	if (data.length === 0) {
    -		data.push({ t: t - 5000, o: 99, h: 101, l: 98, c: 100 });
    -	}
    -	last = data[data.length - 1];
    -	if (t != last.t) {
    -		var c = last.c;
    -		last = { t: t, o: c, h: c, l: c, c: c };
    -		data.push(last);
    -	}
    -	last.c += Math.random() - 0.5;
    -	last.h = Math.max(last.h, last.c);
    -	last.l = Math.min(last.l, last.c);
    +  t -= t % 5000;
    +  if (data.length === 0) {
    +    data.push({ x: t - 5000, o: 99, h: 101, l: 98, c: 100 });
    +  }
    +  last = data[data.length - 1];
    +  if (t != last.x) {
    +    var c = last.c;
    +    last = { x: t, o: c, h: c, l: c, c: c };
    +    data.push(last);
    +  }
    +  last.c += Math.random() - 0.5;
    +  last.h = Math.max(last.h, last.c);
    +  last.l = Math.min(last.l, last.c);
     }
     
     var config = {
    -	type: 'candlestick',
    -	data: {
    -		datasets: [{
    -			data: [],
    -			fractionalDigitsCount: 2
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Financial chart sample'
    -		},
    -		legend: {
    -			display: false,
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 120000,
    -					refresh: 500,
    -					delay: 0,
    -					onRefresh: onRefresh
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			position: 'nearest',
    -			intersect: false
    -		},
    -		animation: {
    -			duration: 0
    -		}
    -	}
    +  type: 'candlestick',
    +  data: {
    +    datasets: [{
    +      data: [],
    +      fractionalDigitsCount: 2
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        ticks: {
    +          source: 'auto'
    +        },
    +        realtime: {
    +          duration: 120000,
    +          refresh: 500,
    +          delay: 0,
    +          onRefresh: onRefresh
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    animation: {
    +      duration: 0
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Financial chart sample'
    +      },
    +      legend: {
    +        display: false,
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://www.chartjs.org/chartjs-chart-financial/chartjs-chart-financial.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://www.chartjs.org/chartjs-chart-financial/chartjs-chart-financial.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
     </body>
    -
    -
    -
    +
    +
    +
    - + window.onload = function() { + var ctx = document.getElementById('myChart').getContext('2d'); + window.myChart = new Chart(ctx, config); + }; + diff --git a/docs/samples/index.html b/docs/samples/index.html index d3f1545..eea25a1 100644 --- a/docs/samples/index.html +++ b/docs/samples/index.html @@ -57,7 +57,7 @@

    - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    -
    - duration: - 20000 - -
    -
    - ttl: - 60000 - -
    -
    - refresh: - 1000 - -
    -
    - delay: - 2000 - -
    -
    - frameRate: - 30 - -
    -
    - pause: - false - -
    -
    -
    - -
    -
    -
    var isIE = navigator.userAgent.indexOf('MSIE') !== -1 || navigator.userAgent.indexOf('Trident') !== -1;
    +  
    + +
    +
    +

    + + + + +

    +
    +
    +
    + duration: + 20000 + +
    +
    + ttl: + 60000 + +
    +
    + refresh: + 1000 + +
    +
    + delay: + 2000 + +
    +
    + frameRate: + 30 + +
    +
    + pause: + false + +
    +
    +
    + +
    +
    +
    var isIE = navigator.userAgent.indexOf('MSIE') !== -1 || navigator.userAgent.indexOf('Trident') !== -1;
     
     var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor()
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'line',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (linear interpolation)',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			lineTension: 0,
    -			borderDash: [8, 4],
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (cubic interpolation)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			fill: false,
    -			cubicInterpolationMode: 'monotone',
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Interactions sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					ttl: 60000,
    -					refresh: 1000,
    -					delay: 2000,
    -					pause: false,
    -					onRefresh: onRefresh
    -				}
    -			}],
    -			yAxes: [{
    -				type: 'linear',
    -				display: true,
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		plugins: {
    -			streaming: {
    -				frameRate: 30
    -			}
    -		}
    -	}
    +  type: 'line',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (linear interpolation)',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      borderDash: [8, 4],
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (cubic interpolation)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      fill: false,
    +      cubicInterpolationMode: 'monotone',
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          ttl: 60000,
    +          refresh: 1000,
    +          delay: 2000,
    +          pause: false,
    +          onRefresh: onRefresh
    +        }
    +      },
    +      y: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Interactions sample'
    +      },
    +      streaming: {
    +        frameRate: 30
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    -
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    fill: false,
    +    data: []
    +  };
    +
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
     
     document.getElementById('duration').addEventListener(isIE ? 'change' : 'input', function() {
    -	config.options.scales.xAxes[0].realtime.duration = +this.value;
    -	window.myChart.update({duration: 0});
    -	document.getElementById('durationValue').innerHTML = this.value;
    +  config.options.scales.x.realtime.duration = +this.value;
    +  window.myChart.update('none');
    +  document.getElementById('durationValue').innerHTML = this.value;
     });
     
     document.getElementById('ttl').addEventListener(isIE ? 'change' : 'input', function() {
    -	config.options.scales.xAxes[0].realtime.ttl = +this.value;
    -	window.myChart.update({duration: 0});
    -	document.getElementById('ttlValue').innerHTML = this.value;
    +  config.options.scales.x.realtime.ttl = +this.value;
    +  window.myChart.update('none');
    +  document.getElementById('ttlValue').innerHTML = this.value;
     });
     
     document.getElementById('refresh').addEventListener(isIE ? 'change' : 'input', function() {
    -	config.options.scales.xAxes[0].realtime.refresh = +this.value;
    -	window.myChart.update({duration: 0});
    -	document.getElementById('refreshValue').innerHTML = this.value;
    +  config.options.scales.x.realtime.refresh = +this.value;
    +  window.myChart.update('none');
    +  document.getElementById('refreshValue').innerHTML = this.value;
     });
     
     document.getElementById('delay').addEventListener(isIE ? 'change' : 'input', function() {
    -	config.options.scales.xAxes[0].realtime.delay = +this.value;
    -	window.myChart.update({duration: 0});
    -	document.getElementById('delayValue').innerHTML = this.value;
    +  config.options.scales.x.realtime.delay = +this.value;
    +  window.myChart.update('none');
    +  document.getElementById('delayValue').innerHTML = this.value;
     });
     
     document.getElementById('frameRate').addEventListener(isIE ? 'change' : 'input', function() {
    -	config.options.plugins.streaming.frameRate = +this.value;
    -	window.myChart.update({duration: 0});
    -	document.getElementById('frameRateValue').innerHTML = this.value;
    +  config.options.plugins.streaming.frameRate = +this.value;
    +  window.myChart.update('none');
    +  document.getElementById('frameRateValue').innerHTML = this.value;
     });
     
     document.getElementById('pause').addEventListener('change', function() {
    -	config.options.scales.xAxes[0].realtime.pause = this.checked;
    -	window.myChart.update({duration: 0});
    -	document.getElementById('pauseValue').innerHTML = this.checked;
    +  config.options.scales.x.realtime.pause = this.checked;
    +  window.myChart.update('none');
    +  document.getElementById('pauseValue').innerHTML = this.checked;
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    -	<style>
    -		.label {
    -			display: inline-block;
    -			text-align: right;
    -			width: 90px;
    -		}
    -		.value {
    -			display: inline-block;
    -			text-align: left;
    -			width: 60px;
    -		}
    -		.control {
    -			width: 200px;
    -		}
    -	</style>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
    +  <style>
    +    .label {
    +      display: inline-block;
    +      text-align: right;
    +      width: 90px;
    +    }
    +    .value {
    +      display: inline-block;
    +      text-align: left;
    +      width: 60px;
    +    }
    +    .control {
    +      width: 200px;
    +    }
    +  </style>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    -	<div>
    -		<span class="label">duration:</span>
    -		<span id="durationValue" class="value">20000</span>
    -		<span><input type="range" min="1000" max="60000" step="100" value="20000" id="duration" class="control"></span>
    -	</div>
    -	<div>
    -		<span class="label">ttl:</span>
    -		<span id="ttlValue" class="value">60000</span>
    -		<span><input type="range" min="1000" max="60000" step="100" value="60000" id="ttl" class="control"></span>
    -	</div>
    -	<div>
    -		<span class="label">refresh:</span>
    -		<span id="refreshValue" class="value">1000</span>
    -		<span><input type="range" min="50" max="3000" step="50" value="1000" id="refresh" class="control"></span>
    -	</div>
    -	<div>
    -		<span class="label">delay:</span>
    -		<span id="delayValue" class="value">2000</span>
    -		<span><input type="range" min="0" max="5000" step="100" value="2000" id="delay" class="control"></span>
    -	</div>
    -	<div>
    -		<span class="label">frameRate:</span>
    -		<span id="frameRateValue" class="value">30</span>
    -		<span><input type="range" min="1" max="60" step="1" value="30" id="frameRate" class="control"></span>
    -	</div>
    -	<div>
    -		<span class="label">pause:</span>
    -		<span id="pauseValue" class="value">false</span>
    -		<span><input type="checkbox" id="pause" class="control"></span>
    -	</div>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
    +  <div>
    +    <span class="label">duration:</span>
    +    <span id="durationValue" class="value">20000</span>
    +    <span><input type="range" min="1000" max="60000" step="100" value="20000" id="duration" class="control"></span>
    +  </div>
    +  <div>
    +    <span class="label">ttl:</span>
    +    <span id="ttlValue" class="value">60000</span>
    +    <span><input type="range" min="1000" max="60000" step="100" value="60000" id="ttl" class="control"></span>
    +  </div>
    +  <div>
    +    <span class="label">refresh:</span>
    +    <span id="refreshValue" class="value">1000</span>
    +    <span><input type="range" min="50" max="3000" step="50" value="1000" id="refresh" class="control"></span>
    +  </div>
    +  <div>
    +    <span class="label">delay:</span>
    +    <span id="delayValue" class="value">2000</span>
    +    <span><input type="range" min="0" max="5000" step="100" value="2000" id="delay" class="control"></span>
    +  </div>
    +  <div>
    +    <span class="label">frameRate:</span>
    +    <span id="frameRateValue" class="value">30</span>
    +    <span><input type="range" min="1" max="60" step="1" value="30" id="frameRate" class="control"></span>
    +  </div>
    +  <div>
    +    <span class="label">pause:</span>
    +    <span id="pauseValue" class="value">false</span>
    +    <span><input type="checkbox" id="pause" class="control"></span>
    +  </div>
     </body>
    -
    -
    -
    - - +
    +
    +
    + + diff --git a/docs/samples/line-horizontal.html b/docs/samples/line-horizontal.html index a9a392c..d487674 100644 --- a/docs/samples/line-horizontal.html +++ b/docs/samples/line-horizontal.html @@ -2,308 +2,302 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor()
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'line',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (linear interpolation)',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			lineTension: 0,
    -			borderDash: [8, 4],
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (cubic interpolation)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			fill: false,
    -			cubicInterpolationMode: 'monotone',
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Line chart (hotizontal scroll) sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}],
    -			yAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'line',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (linear interpolation)',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      borderDash: [8, 4],
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (cubic interpolation)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      fill: false,
    +      cubicInterpolationMode: 'monotone',
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      },
    +      y: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Line chart (hotizontal scroll) sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    -	window.myChart.update();
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    fill: false,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/line-vertical.html b/docs/samples/line-vertical.html index 7d9b755..c9e64fe 100644 --- a/docs/samples/line-vertical.html +++ b/docs/samples/line-vertical.html @@ -2,338 +2,310 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: randomScalingFactor(),
    -			y: Date.now()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: randomScalingFactor(),
    +      y: now
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'line',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (linear interpolation)',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			lineTension: 0,
    -			borderDash: [8, 4],
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (cubic interpolation)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			fill: false,
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Line chart (vertical scroll) sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'linear',
    -				display: true,
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}],
    -			yAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false,
    -			callbacks: {
    -				title: function(tooltipItems) {
    -					return tooltipItems[0].yLabel;
    -				},
    -				label: function(tooltipItem, data) {
    -					var label = data.datasets[tooltipItem.datasetIndex].label || '';
    -					if (label) {
    -						label += ': ';
    -					}
    -					label += tooltipItem.xLabel;
    -					return label;
    -				}
    -			}
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'line',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (linear interpolation)',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      borderDash: [8, 4],
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (cubic interpolation)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      fill: false,
    +      tension: 0.4,
    +      data: []
    +    }]
    +  },
    +  options: {
    +    indexAxis: 'y',
    +    scales: {
    +      x: {
    +        type: 'linear',
    +        display: true,
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      },
    +      y: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Line chart (vertical scroll) sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.x = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.x = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    fill: false,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/mixed-horizontal.html b/docs/samples/mixed-horizontal.html index c6ae506..0d14675 100644 --- a/docs/samples/mixed-horizontal.html +++ b/docs/samples/mixed-horizontal.html @@ -2,308 +2,306 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.labels.push(Date.now());
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push(randomScalingFactor());
    -	});
    +  chart.config.data.labels.push(Date.now());
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push(randomScalingFactor());
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'bar',
    -	data: {
    -		labels: [],
    -		datasets: [{
    -			label: 'Dataset 1 (line)',
    -			type: 'line',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			cubicInterpolationMode: 'monotone',
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (bars)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			borderWidth: 1,
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Mixed chart (horizontal scroll) sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}],
    -			yAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'bar',
    +  data: {
    +    labels: [],
    +    datasets: [{
    +      label: 'Dataset 1 (line)',
    +      type: 'line',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      cubicInterpolationMode: 'monotone',
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (bars)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      borderWidth: 1,
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      },
    +      y: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      mode: 'nearest',
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Mixed chart (horizontal scroll) sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		for (var i = 0; i < dataset.data.length; ++i) {
    -			dataset.data[i] = randomScalingFactor();
    -		}
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    for (var i = 0; i < dataset.data.length; ++i) {
    +      dataset.data[i] = randomScalingFactor();
    +    }
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		type: 'line',
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		cubicInterpolationMode: 'monotone',
    -		data: new Array(config.data.labels.length)
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    type: 'line',
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    fill: false,
    +    cubicInterpolationMode: 'monotone',
    +    data: new Array(config.data.labels.length)
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/mixed-vertical.html b/docs/samples/mixed-vertical.html index 73453c9..58e18ce 100644 --- a/docs/samples/mixed-vertical.html +++ b/docs/samples/mixed-vertical.html @@ -2,330 +2,308 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: randomScalingFactor(),
    -			y: Date.now()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: randomScalingFactor(),
    +      y: now
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'horizontalBar',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (line)',
    -			type: 'line',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (bars)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			borderWidth: 1,
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Mixed chart (vertical scroll) sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}],
    -			yAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false,
    -			callbacks: {
    -				title: function(tooltipItems) {
    -					return tooltipItems[0].yLabel;
    -				},
    -				label: function(tooltipItem, data) {
    -					var label = data.datasets[tooltipItem.datasetIndex].label || '';
    -					if (label) {
    -						label += ': ';
    -					}
    -					label += tooltipItem.xLabel;
    -					return label;
    -				}
    -			}
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'bar',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (line)',
    +      type: 'line',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      tension: 0.4,
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (bars)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      borderWidth: 1,
    +      data: []
    +    }]
    +  },
    +  options: {
    +    indexAxis: 'y',
    +    scales: {
    +      x: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      },
    +      y: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      }
    +    },
    +    interaction: {
    +      mode: 'nearest',
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Mixed chart (vertical scroll) sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.x = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.x = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		borderWidth: 1,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    borderWidth: 1,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/push.html b/docs/samples/push.html index 529dcfc..e571478 100644 --- a/docs/samples/push.html +++ b/docs/samples/push.html @@ -2,360 +2,350 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onReceive(event) {
    -	window.myChart.config.data.datasets[event.index].data.push({
    -		x: event.timestamp,
    -		y: event.value
    -	});
    -	window.myChart.update({
    -		preservation: true
    -	});
    +  window.myChart.config.data.datasets[event.index].data.push({
    +    x: event.timestamp,
    +    y: event.value
    +  });
    +  window.myChart.update('quiet');
     }
     
     var timeoutIDs = [];
     
     function startFeed(index) {
    -	var receive = function() {
    -		onReceive({
    -			index: index,
    -			timestamp: Date.now(),
    -			value: randomScalingFactor()
    -		});
    -		timeoutIDs[index] = setTimeout(receive, Math.random() * 1000 + 500);
    -	}
    -	timeoutIDs[index] = setTimeout(receive, Math.random() * 1000 + 500);
    +  var receive = function() {
    +    onReceive({
    +      index: index,
    +      timestamp: Date.now(),
    +      value: randomScalingFactor()
    +    });
    +    timeoutIDs[index] = setTimeout(receive, Math.random() * 1000 + 500);
    +  }
    +  timeoutIDs[index] = setTimeout(receive, Math.random() * 1000 + 500);
     }
     
     function stopFeed(index) {
    -	clearTimeout(timeoutIDs[index]);
    +  clearTimeout(timeoutIDs[index]);
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'line',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (linear interpolation)',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			lineTension: 0,
    -			borderDash: [8, 4],
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (cubic interpolation)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			fill: false,
    -			cubicInterpolationMode: 'monotone',
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Push data feed sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					delay: 2000,
    -				}
    -			}],
    -			yAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'line',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (linear interpolation)',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      borderDash: [8, 4],
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (cubic interpolation)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      fill: false,
    +      cubicInterpolationMode: 'monotone',
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          delay: 2000,
    +        }
    +      },
    +      y: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Push data feed sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    -	startFeed(0);
    -	startFeed(1);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
    +  startFeed(0);
    +  startFeed(1);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    -	window.myChart.update();
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    fill: false,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    -	startFeed(config.data.datasets.length - 1);
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
    +  startFeed(config.data.datasets.length - 1);
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	stopFeed(config.data.datasets.length - 1);
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  stopFeed(config.data.datasets.length - 1);
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor()
    -		});
    -	});
    -	window.myChart.update();
    +  var now = Date.now();
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor()
    +    });
    +  });
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + var now = Date.now(); + config.data.datasets.forEach(function(dataset) { + dataset.data.push({ + x: now, + y: randomScalingFactor() + }); + }); + window.myChart.update(); + }); + diff --git a/docs/samples/reverse.html b/docs/samples/reverse.html index 735bf9e..3999ba7 100644 --- a/docs/samples/reverse.html +++ b/docs/samples/reverse.html @@ -2,314 +2,304 @@ - chartjs-plugin-streaming sample - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + -
    - -
    -
    -

    - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor()
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'line',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (linear interpolation)',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			lineTension: 0,
    -			borderDash: [8, 4],
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (cubic interpolation)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			fill: false,
    -			cubicInterpolationMode: 'monotone',
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Reverse sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				},
    -				ticks: {
    -					reverse: true
    -				}
    -			}],
    -			yAxes: [{
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		}
    -	}
    +  type: 'line',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (linear interpolation)',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      borderDash: [8, 4],
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (cubic interpolation)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      fill: false,
    +      cubicInterpolationMode: 'monotone',
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        },
    +        reverse: true
    +      },
    +      y: {
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Reverse sample'
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    -	window.myChart.update();
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    fill: false,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('addData').addEventListener('click', function() { + onRefresh(window.myChart); + window.myChart.update(); + }); + diff --git a/docs/samples/zoom.html b/docs/samples/zoom.html index d9cbb43..3d15d05 100644 --- a/docs/samples/zoom.html +++ b/docs/samples/zoom.html @@ -2,368 +2,358 @@ - chartjs-plugin-streaming sample - - - - - - - - - - + chartjs-plugin-streaming sample + + + + + + + + + + + -
    - -
    -
    -

    - - - - - -

    -
    -
    - -
    -
    -
    var chartColors = {
    -	red: 'rgb(255, 99, 132)',
    -	orange: 'rgb(255, 159, 64)',
    -	yellow: 'rgb(255, 205, 86)',
    -	green: 'rgb(75, 192, 192)',
    -	blue: 'rgb(54, 162, 235)',
    -	purple: 'rgb(153, 102, 255)',
    -	grey: 'rgb(201, 203, 207)'
    +  
    + +
    +
    +

    + + + + + +

    +
    +
    + +
    +
    +
    var chartColors = {
    +  red: 'rgb(255, 99, 132)',
    +  orange: 'rgb(255, 159, 64)',
    +  yellow: 'rgb(255, 205, 86)',
    +  green: 'rgb(75, 192, 192)',
    +  blue: 'rgb(54, 162, 235)',
    +  purple: 'rgb(153, 102, 255)',
    +  grey: 'rgb(201, 203, 207)'
     };
     
     function randomScalingFactor() {
    -	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    +  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
     }
     
     function onRefresh(chart) {
    -	chart.config.data.datasets.forEach(function(dataset) {
    -		dataset.data.push({
    -			x: Date.now(),
    -			y: randomScalingFactor()
    -		});
    -	});
    +  var now = Date.now();
    +  chart.config.data.datasets.forEach(function(dataset) {
    +    dataset.data.push({
    +      x: now,
    +      y: randomScalingFactor()
    +    });
    +  });
     }
     
     var color = Chart.helpers.color;
     var config = {
    -	type: 'line',
    -	data: {
    -		datasets: [{
    -			label: 'Dataset 1 (linear interpolation)',
    -			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    -			borderColor: chartColors.red,
    -			fill: false,
    -			lineTension: 0,
    -			borderDash: [8, 4],
    -			data: []
    -		}, {
    -			label: 'Dataset 2 (cubic interpolation)',
    -			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    -			borderColor: chartColors.blue,
    -			fill: false,
    -			cubicInterpolationMode: 'monotone',
    -			data: []
    -		}]
    -	},
    -	options: {
    -		title: {
    -			display: true,
    -			text: 'Data labels plugin sample'
    -		},
    -		scales: {
    -			xAxes: [{
    -				type: 'realtime',
    -				realtime: {
    -					duration: 20000,
    -					refresh: 1000,
    -					delay: 2000,
    -					onRefresh: onRefresh
    -				}
    -			}],
    -			yAxes: [{
    -				type: 'linear',
    -				display: true,
    -				scaleLabel: {
    -					display: true,
    -					labelString: 'value'
    -				}
    -			}]
    -		},
    -		tooltips: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		hover: {
    -			mode: 'nearest',
    -			intersect: false
    -		},
    -		pan: {
    -			enabled: true,
    -			mode: 'x',
    -			rangeMax: {
    -				x: 4000
    -			},
    -			rangeMin: {
    -				x: 0
    -			}
    -		},
    -		zoom: {
    -			enabled: true,
    -			mode: 'x',
    -			rangeMax: {
    -				x: 20000
    -			},
    -			rangeMin: {
    -				x: 1000
    -			}
    -		}
    -	}
    +  type: 'line',
    +  data: {
    +    datasets: [{
    +      label: 'Dataset 1 (linear interpolation)',
    +      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
    +      borderColor: chartColors.red,
    +      fill: false,
    +      borderDash: [8, 4],
    +      data: []
    +    }, {
    +      label: 'Dataset 2 (cubic interpolation)',
    +      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
    +      borderColor: chartColors.blue,
    +      fill: false,
    +      cubicInterpolationMode: 'monotone',
    +      data: []
    +    }]
    +  },
    +  options: {
    +    scales: {
    +      x: {
    +        type: 'realtime',
    +        realtime: {
    +          duration: 20000,
    +          refresh: 1000,
    +          delay: 2000,
    +          onRefresh: onRefresh
    +        }
    +      },
    +      y: {
    +        type: 'linear',
    +        display: true,
    +        title: {
    +          display: true,
    +          text: 'value'
    +        }
    +      }
    +    },
    +    interaction: {
    +      intersect: false
    +    },
    +    plugins: {
    +      title: {
    +        display: true,
    +        text: 'Zoom plugin sample'
    +      },
    +      zoom: {
    +        pan: {
    +          enabled: true,
    +          mode: 'x'
    +        },
    +        zoom: {
    +          enabled: true,
    +          mode: 'x'
    +        },
    +        limits: {
    +          x: {
    +            minDelay: 0,
    +            maxDelay: 4000,
    +            minDuration: 1000,
    +            maxDuration: 20000
    +          }
    +        }
    +      }
    +    }
    +  }
     };
     
     window.onload = function() {
    -	var ctx = document.getElementById('myChart').getContext('2d');
    -	window.myChart = new Chart(ctx, config);
    +  var ctx = document.getElementById('myChart').getContext('2d');
    +  window.myChart = new Chart(ctx, config);
     };
     
     document.getElementById('randomizeData').addEventListener('click', function() {
    -	config.data.datasets.forEach(function(dataset) {
    -		dataset.data.forEach(function(dataObj) {
    -			dataObj.y = randomScalingFactor();
    -		});
    -	});
    +  config.data.datasets.forEach(function(dataset) {
    +    dataset.data.forEach(function(dataObj) {
    +      dataObj.y = randomScalingFactor();
    +    });
    +  });
     
    -	window.myChart.update();
    +  window.myChart.update();
     });
     
     var colorNames = Object.keys(chartColors);
     document.getElementById('addDataset').addEventListener('click', function() {
    -	var colorName = colorNames[config.data.datasets.length % colorNames.length];
    -	var newColor = chartColors[colorName];
    -	var newDataset = {
    -		label: 'Dataset ' + (config.data.datasets.length + 1),
    -		backgroundColor: color(newColor).alpha(0.5).rgbString(),
    -		borderColor: newColor,
    -		fill: false,
    -		lineTension: 0,
    -		data: []
    -	};
    +  var colorName = colorNames[config.data.datasets.length % colorNames.length];
    +  var newColor = chartColors[colorName];
    +  var newDataset = {
    +    label: 'Dataset ' + (config.data.datasets.length + 1),
    +    backgroundColor: color(newColor).alpha(0.5).rgbString(),
    +    borderColor: newColor,
    +    fill: false,
    +    data: []
    +  };
     
    -	config.data.datasets.push(newDataset);
    -	window.myChart.update();
    +  config.data.datasets.push(newDataset);
    +  window.myChart.update();
     });
     
     document.getElementById('removeDataset').addEventListener('click', function() {
    -	config.data.datasets.pop();
    -	window.myChart.update();
    +  config.data.datasets.pop();
    +  window.myChart.update();
     });
     
     document.getElementById('addData').addEventListener('click', function() {
    -	onRefresh(window.myChart);
    -	window.myChart.update();
    +  onRefresh(window.myChart);
    +  window.myChart.update();
     });
     
     document.getElementById('resetZoom').addEventListener('click', function() {
    -	window.myChart.resetZoom();
    +  window.myChart.resetZoom('none');
     });
    -
    -
    -
    <head>
    -	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.0"></script>
    -	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
    +      
    +
    +
    <head>
    +  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.0.0-beta.4"></script>
    +  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0-beta.1"></script>
     </head>
     <body>
    -	<div>
    -		<canvas id="myChart"></canvas>
    -	</div>
    -	<p>
    -		<button id="randomizeData">Randomize Data</button>
    -		<button id="addDataset">Add Dataset</button>
    -		<button id="removeDataset">Remove Dataset</button>
    -		<button id="addData">Add Data</button>
    -		<button id="resetZoom">Reset Zoom</button>
    -	</p>
    +  <div>
    +    <canvas id="myChart"></canvas>
    +  </div>
    +  <p>
    +    <button id="randomizeData">Randomize Data</button>
    +    <button id="addDataset">Add Dataset</button>
    +    <button id="removeDataset">Remove Dataset</button>
    +    <button id="addData">Add Data</button>
    +    <button id="resetZoom">Reset Zoom</button>
    +  </p>
     </body>
    -
    -
    -
    +
    +
    +
    - + document.getElementById('resetZoom').addEventListener('click', function() { + window.myChart.resetZoom('none'); + }); + diff --git a/samples/annotation.html b/samples/annotation.html index 10a2ab8..644faf3 100644 --- a/samples/annotation.html +++ b/samples/annotation.html @@ -3,8 +3,8 @@ chartjs-plugin-streaming sample - - + + @@ -53,7 +53,7 @@ } function onRefresh(chart) { - const now = Date.now(); + var now = Date.now(); chart.config.data.datasets.forEach(function(dataset) { dataset.data.push({ x: now, @@ -79,7 +79,6 @@ borderColor: chartColors.blue, fill: false, cubicInterpolationMode: 'monotone', - tension: 1e-6, data: [] }] }, diff --git a/samples/bar-horizontal.html b/samples/bar-horizontal.html index 507f69d..e44c188 100644 --- a/samples/bar-horizontal.html +++ b/samples/bar-horizontal.html @@ -3,8 +3,8 @@ chartjs-plugin-streaming sample - - + +