Skip to content
It's time to easier beautiful charts
TypeScript JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
docs
examples
grunt
sources
.gitignore
Gruntfile.js
LICENSE
README.md
bower.json
package-lock.json
package.json

README.md

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();
You can’t perform that action at this time.