diff --git a/LICENSE.md b/LICENSE.md index 7c211e9..4d5241c 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2019 Akihiko Kusanagi +Copyright (c) 2021-2019 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..e14245b 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ *[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. +Version 1.9 requires Chart.js 2.7.x, 2.8.x or 2.9.x. If you need Chart.js 2.6.x support, use [version 1.2.0](https://github.com/nagix/chartjs-plugin-streaming/releases/tag/v1.2.0). ## Installation @@ -35,9 +35,9 @@ To use CDN: 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 [Moment.js](https://momentjs.com/) and [Chart.js](https://www.chartjs.org). If you are using Chart.js 2.8.0 or later, [other date libraries and corresponding adapters](https://github.com/chartjs/awesome#adapters) can be used. Note that Moment.js is still required, though. -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 1.9 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. ### Usage in ES6 as module diff --git a/docs/index.html b/docs/index.html index 142c516..43a1879 100644 --- a/docs/index.html +++ b/docs/index.html @@ -13,9 +13,9 @@ - - - + + +
@@ -367,7 +367,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.

    @@ -417,7 +417,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)
    @@ -626,34 +626,34 @@

    ...and you're done!

    var ctx1 = document.getElementById('chart1').getContext('2d'); var chart1 = new Chart(ctx1, { type: 'line', - data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ type: 'realtime' }] } } + data: {datasets: [{data: []}, {data: []}]}, + options: {scales: {xAxes: [{type: 'realtime'}]}} }); var ctx2 = document.getElementById('chart2').getContext('2d'); var chart2 = new Chart(ctx2, { type: 'line', - data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ + data: {datasets: [{data: []}, {data: []}]}, + options: {scales: {xAxes: [{ type: 'realtime', - realtime: { onRefresh: onRefresh } - }] } } + realtime: {onRefresh: onRefresh} + }]}} }); var ctx3 = document.getElementById('chart3').getContext('2d'); var chart3 = new Chart(ctx3, { type: 'line', - data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ + data: {datasets: [{data: []}, {data: []}]}, + options: {scales: {xAxes: [{ type: 'realtime', - realtime: { onRefresh: onRefresh, delay: 2000 } - }] } } + realtime: {onRefresh: onRefresh, delay: 2000} + }]}} }); var ctx4 = document.getElementById('chart4').getContext('2d'); var chart4 = new Chart(ctx4, { type: 'line', - data: { datasets: [{ + data: {datasets: [{ data: [], label: 'Dataset 1', borderColor: 'rgb(255, 99, 132)', @@ -665,11 +665,11 @@

    ...and you're done!

    label: 'Dataset 2', borderColor: 'rgb(54, 162, 235)', backgroundColor: 'rgba(54, 162, 235, 0.5)' - }] }, - options: { scales: { xAxes: [{ + }]}, + options: {scales: {xAxes: [{ type: 'realtime', - realtime: { onRefresh: onRefresh, delay: 2000 } - }] } } + realtime: {onRefresh: onRefresh, delay: 2000} + }]}} }); @@ -684,7 +684,7 @@

    ...and you're done!

      -
    • © 2019 Akihiko Kusanagi
      • +
    • © 2017-2021 Akihiko Kusanagi
    - - + + +
    @@ -367,7 +367,7 @@

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

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

    -

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

    +

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

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

    チャートを作成する

  • データを流し込む

    -

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

    +

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

    src/App.js (一部)
    @@ -626,34 +626,34 @@

    ...これで完了です！

    var ctx1 = document.getElementById('chart1').getContext('2d'); var chart1 = new Chart(ctx1, { type: 'line', - data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ type: 'realtime' }] } } + data: {datasets: [{data: []}, {data: []}]}, + options: {scales: {xAxes: [{type: 'realtime'}]}} }); var ctx2 = document.getElementById('chart2').getContext('2d'); var chart2 = new Chart(ctx2, { type: 'line', - data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ + data: {datasets: [{data: []}, {data: []}]}, + options: {scales: {xAxes: [{ type: 'realtime', - realtime: { onRefresh: onRefresh } - }] } } + realtime: {onRefresh: onRefresh} + }]}} }); var ctx3 = document.getElementById('chart3').getContext('2d'); var chart3 = new Chart(ctx3, { type: 'line', - data: { datasets: [{ data: [] }, { data: [] }] }, - options: { scales: { xAxes: [{ + data: {datasets: [{data: []}, {data: []}]}, + options: {scales: {xAxes: [{ type: 'realtime', - realtime: { onRefresh: onRefresh, delay: 2000 } - }] } } + realtime: {onRefresh: onRefresh, delay: 2000} + }]}} }); var ctx4 = document.getElementById('chart4').getContext('2d'); var chart4 = new Chart(ctx4, { type: 'line', - data: { datasets: [{ + data: {datasets: [{ data: [], label: 'Dataset 1', borderColor: 'rgb(255, 99, 132)', @@ -665,11 +665,11 @@

    ...これで完了です！

    label: 'Dataset 2', borderColor: 'rgb(54, 162, 235)', backgroundColor: 'rgba(54, 162, 235, 0.5)' - }] }, - options: { scales: { xAxes: [{ + }]}, + options:{scales: {xAxes: [{ type: 'realtime', - realtime: { onRefresh: onRefresh, delay: 2000 } - }] } } + realtime: {onRefresh: onRefresh, delay: 2000} + }]}} }); @@ -684,7 +684,7 @@

    ...これで完了です！

      -
    • © 2019 Akihiko Kusanagi
      • +
    • © 2017-2021 Akihiko Kusanagi
    - + + + - - + + - +