Angular C3 Simple
You can see demo here.
I needed a way to use C3.js in my AngularJS applications and all libraries/directives I came upon were either too complicated, incomplete or broken and not supported.
Biggest problem with them was that all of them included some kind of theit own API or a way to communicate with C3.js via them. I don't need extra directive attributes ot other ways allowing me to access charts and set their options. Most of the time existing libs didn't even allow to set all of options available in C3.js.
All I needed was a directive, whish is a simple wrapper allowing me to display chart and use any option available while maintaining ability to use AngularJS $scope and two-way data binding for chart data.
This is why I bothered writing this plugin. If its features are what you are looking for - that's perfect! :)
or simply download latest source code from repository: link
First of all - you'll need some libraries and If you are using bower - you're in luck. They'll be installed for you. Otherwise, please do it manually or use CDN. Here it's what you need:
Link to them in your project:
Angular C3 Simple directive uses simple markup: its name is
c3-simple and you can use it either as:
- an Element
<c3-simple id="chart" config="chart"></c3-simple>
- an Attribute
<div c3-simple id="chart" config="chart"></div>
In both cases it accepts same parameters as attributes:
- id - and ID of element it is attached to, simple stuff nothing fancy
- one thing to remember: for now Directive only knows how to handle
data.columns(docs) type of data provided for chart. Any other might work, but it will not be change/update aware -
$scopewon't we working it's magic. I plan to implement this in near future, if there will be need for it.
Now all you have to do is plug-in
angular-c3-simple module into your application, maybe something like this:
afterwards you can initialize chart with any C3.js options available. For sake of this docs, I'll keep it simple. I'll set type of chart to timeseries with some example data (remember: columns) and I'll apply some custom formatting on X axis ticks and tooltips. Also I don't want legend. Here it goes:
Oh, and there is one more nifty thing: c3SimpleService. This little fellow allows you to control any existing chart via C3.js API. You can use any API call available in documemtation. All you have to do is pluig-in this service into your AngularJS controller, like this:
After plugging-in you'll have all charts available via c3SimpleService. Let's say you have chart with
id="myNewChart1". You can access it like this:
Now let's say you'd like to transform
data1 series from whatever it is now to
Basically all API toher than installation and initial config is provided by C3.js docs.
Building / Minifing
You can build minified version yourself, by simply using Grunt in project root.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature)
- Commit your changes (
git commit -am 'Add some feature')
- Push to the branch (
git push origin my-new-feature)
- Create new Pull Request