This repository contains directives that let you easily create graphs using the c3js library. Most of the options that are available in c3js are now also available to you in angularjs. Below one of the most basic examples:
<c3chart bindto-id="chart1">
<chart-column column-id="data-1"
column-values="30,200,100,400,150,250"
column-type="line"/>
</c3chart>
There is a page with samples and documentation available: http://jettro.github.io/c3-angular-directive/
There is now extensive API docs available here: http://jettro.github.io/c3-angular-directive/api-docs/1.3/index.html
The project contains a number of examples that can be started using grunt:
grunt devserver
Come up with a number of directives to integrate C3js with AngularJS
Homepage c3js library [http://c3js.org] Homepage AngularJS [https://angularjs.org] Homepage d3 library [http://d3js.org]
Blogpost about AngularJS Directives for c3js: Angularjs directives for c3js chart library
Blogpost about the improvements I made using grunt and bower: C3JS directives using angularjs
Blogpost about c3js by Roberto van der Linden: Creating charts with c3.js Blogpost about integrating c3js and angularjs by Jettro Coenradie: Using C3js with AngularJS
We are using grunt and bower during development. Bower makes it easier to use it for your own project as well. More on this in the next section. If you want to try out the project and change sources or something like that, you can use bower and grunt to do development.
First use npm to install all grunt plugins, than use bower to install all bower dependencies.
npm install
bower install
Now grunt is available, you can use some of the utilities that grunt has in store for you. A nice one is to use the watch task and change one of the samples. There is also a plugin in place for running a development server. Just type grunt devserver and connect to port 8888 on your localhost.
The easiest way to use the directives is to use bower to install it to your project.
bower install c3-angular --save
In the end you just need one file in your project: c3-angular.min.js
Merged pull request #131 by mumuxin Made doc change based on comment from LucasBassetti
Closed the following issues
Pull request by LucasBassetti to fix tooltip docs
Bugs fixed:
Added pull requests
Bugs fixed:
Squashed a number of bugs, some of them related to tick formatting of timeseries data.
Added the click and mouse events on the legend.
Bigger refactoring to the structure of the source code and a big change to the examples.
Focus is improvements to the structure of the project and the documentation. Also fixed some bugs.
Main part to move to a higher version is that we have the possibility now to add a callback function. In the examples folder there is a page callback-sample.html that shows how to do this. You can register the callback function to recevei the actual chart object that you can manipulate using the c3js API methods. http://c3js.org/reference.html#api
Added a big pull request by EmmN that includes formatting improvements. All charts now support adding a format function to format labels and tooltips.
Added config for the pie and donut charts Added config for points as requested by Lazymondaysunday Added an extensive tutorial in the examples package Finalized the events as requested by pehrlich and Tropicalista Improved the sample on the project page http://jettro.github.io/c3-angular-directive/
Added a gauge config by richardthombs Added a stacked bar chart requested by vinnytheviking Added events to the chart as well as data, now you can add callbacks to data click, chart mouse over, etc. requested by Tropicalista and pehrlich
Also added a better project page: http://jettro.github.io/c3-angular-directive/
Working on improved documentation and better examples for release 0.4.0
Upgraded to the latest versions of: c3js - 0.4.10
Added a number of pull requests by: mark-lai: formatting and x/y tick enhancements yourivdlans: Some very nice enhancements in the axis, also the sample with the bubble. Resseguie: Added a feature to pass a color function to the chart