Tag Archive: c3js



Directives for graphs with c3js library

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


c3js directives for AngularJS

Some time a go I started experimenting with c3js, a nice library around the very popular D3 graphics library. It is all about creating nice looking charts with lots of options. When integrating this in an AngularJS application it is logical to create some reusable directives. The next step is to make these directives easily available to integrate in other projects. Nowadays the easiest way to do this in front-end projects is to use Bower. During development GruntJS helps with some tasks you just need to do.

In this blog post I am going to introduce you to the library, show you how I used it in my elasticsearch plugin and show some of the GruntJS functionality that help me during development.

(more…)