c3 is a reusable chart library for ready to integrate in your next cloud and web applications in easy way. c3 has nice documentation and examples. Previously, we have have given examples with other three libraries for data visualization – Epoch, Envision and Peity. Envision has some good features, however, the approach of c3 library is simple and easy. Furthermore, c3 supports API. c3 is derived from well known d3.js, uses Python.
c3 Chart Library For Cloud and Web Applications
Functionally, c3 resembles Peity in usage; it can be easily tested with JSFiddle :
|
1 |
http://jsfiddle.net/masayuki0812/7kYJu/ |
Excellent examples can be found on their official website :
---
|
1 |
http://c3js.org/ |
Using c3 Chart Library For Cloud and Web Applications
We need to include D3 but we do not need to write D3 code. Tooltips, zoom feature, API support – all makes c3 easier to integrate. Obviously, c3 comes with MIT License and is free software. Source code can be found on GitHub :
|
1 |
https://github.com/masayuki0812/c3 |
Bower/Component is also named as c3. We can easily test on local computer with the provided examples :
|
1 2 3 4 5 6 |
git clone https://github.com/masayuki0812/c3.git # or # git clone git@github.com:masayuki0812/c3.git # do ls to check the name ls && cd c3/htdocs python -m SimpleHTTPServer 8080 |
In real usage, we will need to include :
There are two ways to generate the charts, one is in HTML5, we need to declare where we need to generate the chart :
The practical logic for the scripting part to render the chart is :
|
1 2 3 4 5 6 7 8 9 10 11 |
var chart = c3.generate({ bindto: '#chart', data: { arg: [ ['data1', X, Y, Z, X1, Y1, Z1], ['data2', A, B, C, D, E, F] ] } }); |
arg can be columns, axes alone or in combination. Second way to use is to use Require.js :
|
1 |
http://requirejs.org/ |
Using with Require.js needs a bit knowledge of using their specific docs but actually can handle complex data representation.
