Directives for graphs with c3js library

Posted on 2015-05-14 by

Since the beginning of this year I am working on an AngularJS library with directives to make it easier to create graphs using the excellent c3js library. I started with some basic graphs, but by now a lot has changed. There now is better documentation, more examples, more graphs and finally we now have support for events. Time to give an update.

Better documentation

There are now two things you can reach out for when in need for documentation. There is a documentation page containing a lot of samples, contact information, gettings started, etc. This page can be found here:

http://jettro.github.io/c3-angular-directive/

If you are more into source code, you can checkout the project from github and use grunt to run the sample. If you do not like grunt you can also copy the examples folder to a webserver of your choice and it should work as well.

# git clone https://github.com/jettro/c3-angular-directive.git
# cd c3-angular-directive
# grunt devserver

Point your browser to localhost:8888 and you should see the tutorial page.

Some new graphs

Below some examples of new graphs that are now available. Most op the options available through the c3js api are now also available through the directive.

Scatter

scatter-graph

Stacked bar

stackedbar-graph

Gauge

gauge-graph

Clickable Donut

Before I show the graph I want to make it clear that the clickable part can also be combined with all the other graphs. For I know a lot of you want this functionality I’ll give it a bit more attention. First below the source code in html:

<c3chart bindto-id="donut-plot1-chart">
  <chart-column column-id="Data 1"
              column-values="70"
              column-type="donut"/>
  <chart-column column-id="Data 2"
              column-values="35"
              column-type="donut"/>
  <chart-column column-id="Data 3"
              column-values="60"
              column-type="donut"/>
  <chart-donut title="Donut" width="60"/>
  <chart-events on-click-data="showClick(data)"/>
</c3chart>

Notice the last directive chart-events. In here we refer to a function called showClick. Be sure to give the name of the parameter to pass called data. This is the correct way of passing a callback function to a directive. The next code block shows the controller function.

graphApp.controller('GraphCtrl', function ($scope) {
  $scope.clicked = {};
  $scope.showClick = function(data) {
    $scope.clicked = data;
  }
});

Clickable-donut-graph

Next steps

Before making version 1.0 available there are still a few things to do. I want to make the library more flexible in relation to missing properties by providing a hook to add some configurations yourself. Now that we have events for the complete graph like mouseover and mouseout as well as events for the data points in the graph, I also want to make the events for the legenda available. Finally I want to have a look at making things like the columns dynamic as well and maybe provide a hook to redraw the graph.

If you have other ideas you would like to have included, feel free to create an issue in Github for the project.

https://github.com/jettro/c3-angular-directive/issues

About Jettro Coenradie

I am a Software Developer / Architect with a lot of hands on experience in Java, AngularJS, Elasticsearch and lots of others tools. I like to use these technologies to help customers with the business challenges. On top of that I like to gather and share knowledge related to data analytics. I have experience with importing and transforming data as well as presenting and visualising the data. Currently I am working with tools like elasticsearch, logstash and Kibana but also D3 and C3 for graphics and other presentations.


Leave a Reply

Your email address will not be published. Required fields are marked *