Chart.js plugin for live streaming data

Related tags

Data Visualization plugin streaming monitoring time-series chartjs realtime live
Overview

chartjs-plugin-streaming

npm GitHub Workflow Status Code Climate Awesome

Chart.js plugin for live streaming data

chartjs-plugin-streaming 2.x requires Chart.js 3.0.0 or later. If you need Chart.js 2.x support, use the following versions.

Documentation

Development

You first need to install node dependencies (requires Node.js):

npm install

The following commands will then be available from the repository root:

npm run build      # build dist files
npm run build:dev  # build and watch for changes
npm run lint       # perform code linting
npm run package    # create an archive with dist files
npm run docs       # generate documentation (`dist/docs`)
npm run docs:dev   # generate documentation and watch for changes

License

chartjs-plugin-streaming is available under the MIT license.

Comments
  • Question about using this plugin with react

    Question about using this plugin with react

    I am trying to build a prototype with react using this plugin. I return the Line chart as below <Line ref="chart" data={data} />

    data as below: image

    I do see the chart being rendered, but there is no real-time data, it seems static. image

    I see the varying values in onRefresh function(Using console logs) image

    I can see I am missing or over-doing something, but unable to figure out what that would be. Any help is highly appreciated, thanks!

    question 
    opened by saradha-kannan 11
  • Able to stop chart from scrolling (pause)

    Able to stop chart from scrolling (pause)

    Hello,

    I've been using your plugin for a week and it's awesome. I am currently investigating ways on "pausing" the chart scrolling, stopping all updates to the chart data at the same time. Stopping the Ingress of data is easy, but I can't find a straightforward way to stop the automatic scrolling of the chart so I can peruse a subset of the data without it vanishing on me.

    Please advise.

    Thanks in advance,

    Jordan

    enhancement 
    opened by junelson89 11
  • Chartjs plugin streaming in angular7 doesnt work

    Chartjs plugin streaming in angular7 doesnt work

    Hello sir, I am dian from indonesia, i have tried for chart.js plugin streaming in angular 7, but when I run this plugin (https://nagix.github.io/chartjs-plugin-streaming/ ) doesnt work (not display graph). And then, I have tried chart.js in angulat 7 from "https://valor-software.com/ng2-charts/" it's work. where is the problem, i dont understand. Please can you review this problem.

    question 
    opened by DianPermana 10
  • Chartjs 3.x.x support

    Chartjs 3.x.x support

    Hi everyone, waiting for the official ChartJS 3.0 version to be released: I have developed support for this plugin.

    • Chartjs required v3.x.x
    • Chartjs-plugin-streaming v2.0 :smile:

    Link to Chartjs-plugin-streaming v2.0

    I hope I did something pleasant :smile:

    enhancement 
    opened by kevinoo 8
  • annotation not updateing

    annotation not updateing

    Hi, i am now using chart.js annotation plugin with streaming plugin. I wanted to move the annotation for the sample you have made as below. I just used random scaling factor to confirm the movement.

    https://nagix.github.io/chartjs-plugin-streaming/samples/annotation.html

    But I have found a problem that the annotation position does not change when I update the annotation value.

    (i included both chart.update(); as well as windows.myChart, just to make sure if both doesnt work)

    Do you know if this is a bug? or i am just making it wrong...?

    setInterval(function (chart) {
	   
			chart.options.annotation.annotations[0].value = randomScalingFactor();
			console.log(chart.options.annotation.annotations[0].value);
			chart.update();
			windows.myChart.update();

}, 1000);
    スクリーンショット 2019-03-21 18 26 24 question 
    opened by rashearth 8
  • [Angular]How do I control the refresh timing with input binding other than with the numeric value

    [Angular]How do I control the refresh timing with input binding other than with the numeric value 

    @Input() a

...

this.chartObj = new Chart(this.el.nativeElement.getContext('2d'), {
	...
	options: {
		plugins: {
			streaming: {
				refresh: 1000, // onRefresh callback will be called every 1s
				onRefresh: (chart: Chart) => {
					// something
				}
			}
		}
	}
});

    With the above snippet, I'd like to control the refresh the chart when I get the new input data a but apparently, the datasets only get updated every 1s.

    I've tried using ngOnChanges cycle, pushing the new data to the datasets and update the chart instance but it didn't seem to work.

    this.chartObj.config.data.datasets.push({
  // label: 'Dataset ' + config.data.datasets.length,
  // backgroundColor: color(newColor).alpha(0.5).rgbString(),
  // borderColor: newColor,
  fill: false,
  lineTension: 0,
  data
});
this.chartObj.update();

    What am I missing?

    question 
    opened by binDongKim 8
  • Ticks and grid not scrolling

    Ticks and grid not scrolling

    First let me say I'm very impressed with this plugin, it seems to have all the functionality I need.

    I followed your React tutorial and the chart it produces does not have scrolling ticks or background grid lines. They only seem to update on the refresh interval, which results in the tick timestamps being updated in place. I have included a gif to help describe the issue as I my terminology might be off.

    Nov-12-2020 17-25-54

    This is what I expect to see:

    Nov-12-2020 17-35-33

    I tried removing the tick rotation, but this didn't make any difference to the scrolling. The tutorial says I should be able to just follow those steps, but there must be something else missing. Any help will be most appreciated. Thanks.

    enhancement 
    opened by juliankigwana 7
  • AngularJS and Firebase

    AngularJS and Firebase

    Hi, I can't fetch data from my firebase realtime database to my realtime chart. I'm using AngularJS in programming but I don't really know how to fetch the data and push it to the realtime chart. I've searched and tried most of the posts online but all I could do is have the data printed on the console.log. Please help.

    question 
    opened by paolo0926 6
  • past data not showing

    past data not showing

    Hi, thank you for your great support one again. now, i have a question for inserting past time information on this streaming plugin.

    This plugin could insert the future information, but not for the past?

    Whenever i insert any past time data in the dataset, the array data disappears, and wont work out properly. Is it impossible to insert past time data? I want to make some realtime stock chart, and including past data is necessary. Please kindly confirm.

    question 
    opened by rashearth 6
  • mixed chart for vertical and horizontal barchart

    mixed chart for vertical and horizontal barchart

    Hi, thanks again for this wonderful application. I am wondering if this streaming application could be implemented with mixed chart with horizontal and vertical bar chart as below. スクリーンショット 2019-03-10 10 42 18 (maybe a bit similar case with this issue https://github.com/chartjs/Chart.js/issues/4096 )

    I am trying to implement by using 2 X axisID's, but the horizontal chart would not show up. is this function could not be implemented? Please kindly confirm

    thank you and regards,

    question 
    opened by rashearth 6
  • How to plot X/Y Specific data

    How to plot X/Y Specific data

    Hello,

    I have a huge array (sample below) with X and Y values and would like to plot the Y values on the X time, although I can not get my head around it. Any help please?

    var dataPoints = [{x:0.000,y:-0.11700000},{x:0.003,y:-0.14400000},{x:0.007,y:-0.17500000},{x:0.010,y:-0.19200000},{x:0.013,y:-0.19900000},{x:0.017,y:-0.20500000},{x:0.020,y:-0.21000000},{x:0.023,y:-0.21400000}]

    question 
    opened by kevinmamaqi 6
  • Bump express from 4.17.1 to 4.18.2

    Bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • when I toggle chartjs streaming, streaming configurations still working.

    when I toggle chartjs streaming, streaming configurations still working.

    Dear All,

    I am trying here to provide the user option to toggle streaming on the chart using the ChartJS streaming plugin and it's working great while showing the graph in a live state. The issue arises when I am trying to disable on button click action.

    So let's say initially streaming is off. In this condition, I am able to see the whole data and there is tons of data in the chart

    Screenshot 2022-11-17 at 3 39 03 PM

    When I am toggling to streaming, the chart is running in a time frame.

    step2

    When I am toggling back to disable streaming, I can see data in the last streaming window, sliding and stacking and sliding back. I cannot see the whole data again, which was initially showing when ChartJS was disabled.

    three

    so I think streaming configurations are still working when I am switching back to non-streaming mode.

    opened by hitswa 0
  • TypeError after unmounting chart

    TypeError after unmounting chart

    I have a <Line> chart in my React app. Since I updated chart.js to v4.0.1, I get the following error when I unmount my chart:

    Uncaught TypeError: Cannot set properties of null (setting '_setStyle')
    at chartjs-plugin-streaming.esm.js:787:1
    at each (helpers.core.ts:149:1)
    at Chart.update (chartjs-plugin-streaming.esm.js:785:1)
    at chartjs-plugin-streaming.esm.js:601:1
    at callback (helpers.core.ts:109:1)
    at chartjs-plugin-streaming.esm.js:68:1

    This error is triggered repeatedly and infinitely. It seems that some kind of timer has not been cleared.

    Here's my code:

    <Line
  data={{datasets}}
  options={{
    scales: {
      x: {
        display: false,
        realtime: {
          delay: 1000,
          onRefresh: (chart) => {
            const x = Date.now();
            const y = getY();
            chart.data.datasets.forEach((dataset, i) => {
              dataset.data.push({
                x,
                y: y[i]
              });
            });
          }
        },
        type: 'realtime'
      },
      y: yOptions
    }
  }} />
    opened by Robloche 15
Releases(v2.0.0)
Owner
Akihiko Kusanagi
Akihiko Kusanagi
GitHub
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
Draggable data points plugin for Chart.js

chartjs-plugin-dragdata.js Now compatible with Chart.js v3 ?? Looking for a version compatible to Chart.js < 2.9.x? Then visit the v2 branch! A plugin

Christoph Pahmeyer 196 Dec 18, 2022
Chart.js plugin for Prometheus data loading

Welcome to chartjs-plugin-datasource-prometheus ?? A Prometheus datasource for ChartJS. Dependencies: requires chart.js 2.7 or later. requires moment.

Samuel Berthe 77 Dec 6, 2022
Chart.js plugin to display labels on data elements

Overview Highly customizable Chart.js plugin that displays labels on data for any type of charts. Requires Chart.js 3.x. Documentation Introduction Ge

Chart.js 753 Dec 24, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 6, 2023
Chart.js scale for hierarchical tree-like data structure

Chart.js Hierarchical Scale Plugin Chart.js module for adding a new categorical scale which mimics a hierarchical tree. Related Plugins Check out also

Samuel Gratzl 40 Dec 17, 2022
Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

vis.js 1.2k Jan 3, 2023
Zoom and pan plugin for Chart.js

chartjs-plugin-zoom A zoom and pan plugin for Chart.js >= 3.0.0 For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be

Chart.js 510 Jan 2, 2023
Chart.js plugin for more styling options

chartjs-plugin-style Chart.js plugin for more styling options This plugin requires Chart.js 2.6.0 or later. Installation You can download the latest v

Akihiko Kusanagi 57 Oct 27, 2022
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 73 Dec 1, 2022
Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions.

chartjs-plugin-regression Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions using

Wilfredo Pomier 14 Dec 18, 2022
Annotation plugin for Chart.js

chartjs-plugin-annotation.js An annotation plugin for Chart.js >= 3.0.0 This plugin needs to be registered. It does not function as inline plugin. For

Chart.js 515 Dec 30, 2022
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022