livechart

Canvas chart for display dynamic data with animatiion.

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

$ 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
})

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.