Canvas chart for display dynamic data with animatiion.
Lightweight, < 12k when minified and gziped.
Scalable, the canvas element could adjust itself when the container resized
Easy configuation, using style and configurable.js for style and other option configuation.
Retina support
Install with component(1):
$ component install chemzqm/livechart
Or include file livechart.js
and livechart.css
on your web page and use global value livechart
.
function random(i) {
var res = [];
while(i--) res.push(Math.random());
return res;
}
var PieChart = require('livechart').PieChart;
var parent = document.getElementById("piechart");
var chart = new PieChart(parent);
chart.set('labels', ['Free', 'Wired', 'Active', 'Inactive']);
setInterval(function(){
var values = random(4);
chart.add(values);
}, 1000);
Options are configured by the set
method, this method works like below:
chart.set({
min: 0,
max: 100
})
Or
chart.set('min', 0);
chart.set('max', 100);
colors
optional color Array for each series.labels
optinal label Array , lables are displayed on the left top corner (except Barchart
).min
optinal min Number , chould be changed dynamicly when there's value lower.max
optinal max Number , chould be changed dynamicly when there's value higher.count
max count Number, only used for LineChart
, AreaChart
and Histogram
.format
format Function should return formatted value with orignal value as argument, used for LineChart
, AreaChart
, BarChart
and ArcChart
.title
title String , currently only used for BarChart
.ease
ease function for animatiion, default in-out-quad
.duration
duration Number in milisecond for animatiion, default 500
.Append LineChart to parentNode
, LineChart accept one or two series.
Add one value or two values to LineChart.
Append AreaChart
to parentNode
, AreaChart accept one or two series.
Add one value or two values to AreaChart.
Append Histogram
to parentNode
.
Add one value for histogram.
Append PieChart
to parentNode
.
Change values for PieChart
.
Append ArcChart
to parentNode
, ArcChart accept one or two series.
Change values for ArcChart
.
Append PolarChart
to parentNode
.
Change values for PolarChart
.
MIT