RealTimeChart

High performant chart rendering on canvas.

Fetures:

• Meant to be fast, reduced CPU and memory usage
• Rendering real time data
• Responsive
• Currently supports line, bar and stacked chart
• Hover callback

Example code

Instance

const rtChart = new RealTimeChart(document.getElementById('canvas'));

Set options

rtChart.setOptions(optionsObject);

Feed the instance with data

rtChart.addChartData(10);

rtChart.addChartData([10, 20, 30]);

rtChart.addChartData({id: 'uniqId', value: 10});

rtChart.addChartData([{id: 'uniqId1', value: 10}, {id: 'uniqId2', value: 20}, {id: 'uniqId3', value: 30}]);

Render

rtChart.render();

Destroy

rtChart.destroy();

Recalculate bounds

rtChart.recalculateBounds();

Options (public):

• paddingBottom - extra padding from bottom

paddingBottom: 20, //Number

• paddingRight - extra padding from right

paddingRight: 20, //Number

• legend - legend containing colors, ids and titles

legend: [{
  id: 1, //Custom identifier
  color: '#846f08',
  title: 'Gold',
},
{
  id: 2,
  color: '#2cabe3',
  title: 'Revenue',
}]

• showRuler - show the min max and the central value

showRuler: true, //Boolean

• showFrame

showFrame: true, //Boolean

• width - width of the canvas

width: 300, //Number

• height - height of the canvas

height: 300, //Number

• frameColor

frameColor: '#ddd', //RGB(A), HEX

• textColor

textColor: '#313131', //RGB(A), HEX

• minValue - minimum value of the incoming date

minValue: 1, //Number

• maxValue - maximum value of the incoming data

maxValue: 600, //Number

• totalElement - how many elements are going to be seen on the chart

totalElement: 20, //Number

• type - type of the chart

type: 'line|bar|stacked', //Line, Bar or Stacked chart

• onHover - callback for for hover status on the chart, returning the data for the hovered element

onHover: (data) => {}, //Function

• waitWindowLoad - wait settings to be configured only after window load happened

waitWindowLoad: true, //Boolean

• isResponsive - should the canvas resize when window resize

isResponsive: false, //Boolean

• calcMaxValue - calculate the max value according to the input, new max value is increased by 10%. (newMaxValue = inputValue + inputValue * 0.1). Stacked chart is currently not supported.

calcMaxValue: false, //Boolean

More examples are in the examples folder.

Build

npm run build

Prettier src

npm run prettier

Missing

• tests
• other type of charts
• more examples
• commenting the code

Contact

• Gabriel Mičko on Twitter, GitHub

Version

1.6.1

Usage

Node

From v1.6.0 Node is also supported. Add this line to your package.json dependencies. Check the version you would like to use in your package. For available releases click here.

Package.json

"realtimechart": "git+https://github.com/DoclerLabs/RealTimeChart.git#v1.6.0"

ES5

var RealTimeChart = require('realtimechart');

ES6

import RealTimeChart from 'realtimechart';

VanillaJS

<script src="realtimechart-version.js" ></script>
<script>console.log(window.RealTimeChart);</script>