livechart

Small and fast

Lightwight ( < 8k when minified and gzipped with component), using canvas which have a better performance than svg.

Scalable

The canvas element could adjust itself when the container resized. You can resize the container of charts below to see it in action.

Easy configuration

Using style for basic styling, and configurable.js to achieve a fluent API for setting other options.

        
  var LineChart = require('livechart').LineChart;
  var parent = document.getElementById("linechart");
  var chart = new LineChart(parent);
  //count of points
  chart.set('count', 10);
  chart.set('labels', ['pv', 'click']);
  setInterval(function(){
    var v1 = Math.floor(Math.random() * 1000);
    var v2 = Math.floor(Math.random() * 100);
    chart.add([v1, v2]);
  }, 1000)

        
var AreaChart = require('livechart').AreaChart;
var parent = document.getElementById("areachart");
var chart = new AreaChart(parent);
//count of points
chart.set('count', 10);
chart.set('format', function(v){return v.toFixed(1)});
setInterval(function(){
  var v1 = Math.random() * 100;
  var v2 = Math.random() * 100;
  chart.add([v1, v2]);
});

        
  var Histogram = require('livechart').Histogram;
  var parent = document.getElementById("histogram");
  var chart = new Histogram(parent);
  //count of columns
  chart.set('count', 100);
  chart.set('max', 1);
  chart.set('min', 0);
  var x = 0;
  setInterval(function(){
    var v = Math.min(ease.inOutBounce(x++) / (Math.random() + 1), 1000000) + 10;
    chart.add(v);
  }, 1000)

        
  var BarChart = require('livechart').BarChart;
  var parent = document.getElementById("barchart");
  var chart = new BarChart(parent);
  chart.set('labels', ['Chrome', 'IE', 'Safari', 'Firefox', 'Opera']);
  chart.set('format', function(v) {
    return v.toFixed(1);
  });
  chart.set('max', 100);
  chart.set('min', 0);
  var titles = ['January', 'Februry', 'March', 'April', 'May',
  'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var c = 0;
  setInterval(function(){
    var vs = datas[c];
    chart.set('title', titles[c]);
    chart.add(getValuesByMonth(c));
    c = (c === 11) ? 0 : c + 1;
  }, 2000);

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

        
  var ArcChart = require('livechart').ArcChart;
  var chart = new ArcChart(parent);
  chart.set('labels', ['CPU', 'Memory']);
  setInterval(function(){
    var vs = [];
    vs.push(0.5 + Math.random() * 0.5);
    vs.push(Math.random() * 0.4);
    chart.add(vs);
  }, 1000);

        
  var PolarChart = require('livechart').PolarChart;
  var parent = document.getElementById("polarchart");
  var chart = new PolarChart(parent);
  chart.set('labels', ['Bounce rate', 'Click rate', 'Transform rate',
          'Exposure rate', 'Transaction rate', 'Sell rate']);
  setInterval(function(){
    var vs = [0.30, 0.90, 0.24, 0.58, 0.82, 0.18];
    var data = vs.map(function(v) {
      return v - (Math.random()/10);
    });
    chart.add(data);
  }, 1000);