Scalable canvas chart for live data display
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
resources
.gitignore
Makefile
Readme.md
component.json
example.html
index.js
livechart.css
livechart.js
package.json

Readme.md

livechart

Canvas chart for display dynamic data with animatiion.

Demo

Features

  • 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

Installation

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.

Example Usage

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

API

Options

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.

LineChart(parentNode)

Append LineChart to parentNode, LineChart accept one or two series.

LineChart#add(Number|Array)

Add one value or two values to LineChart.

AreaChart(parentNode)

Append AreaChart to parentNode, AreaChart accept one or two series.

AreaChart#add(Number|Array)

Add one value or two values to AreaChart.

Histogram(parentNode)

Append Histogram to parentNode.

Histogram#add(Number)

Add one value for histogram.

PieChart(parentNode)

Append PieChart to parentNode.

PieChart#add(Array)

Change values for PieChart.

ArcChart(parentNode)

Append ArcChart to parentNode, ArcChart accept one or two series.

ArcChart#add(Array)

Change values for ArcChart.

PolarChart(parentNode)

Append PolarChart to parentNode.

PolarChart#add(Array)

Change values for PolarChart.

License

MIT