unicoderns / OpenCharts

It's time to easier beautiful charts

OpenCharts

It's time to easier beautiful charts.

See http://OpenCharts.org for more.

Why?

There's a lot of charts libraries outside, some too ugly, some others too complex, we are trying to solve that.

Instalation

bower install

Usage

Regular way

var data = [
    { label: "Category A", value: Math.random() * 100, color: "#9b3388" },
    { label: "Category B", value: Math.random() * 100, color: "#4f99fc" },
    { label: "Category C", value: Math.random() * 100, color: "#fe8a4d" },
];

// Configuring require
require.config({
    paths: {
        d3: "../bower_components/d3/d3.min"
    }
});

// Creating Charts
require(['opencharts'], function(opencharts) {
    // Pie
    var pie = new opencharts.Pie("#hola");
    pie.setSettings(oc_examples.pie());
    pie.create();
});

Experimental

var data = [
    { label: "Category A", value: Math.random() * 100, color: "#9b3388" },
    { label: "Category B", value: Math.random() * 100, color: "#4f99fc" },
    { label: "Category C", value: Math.random() * 100, color: "#fe8a4d" },
];

<opencharts-pie id="chart" data-object="data" />

Live update

var data2 = [
    { label: "Category A", value: Math.random() * 100, color: "#9b3388" },
    { label: "Category B", value: Math.random() * 100, color: "#4f99fc" },
    { label: "Category C", value: Math.random() * 100, color: "#fe8a4d" },
];

pie.setSettings(data2);
pie.update();