Welcome to the tutorial for using the c3js angular directives. We created these directives to make it easier to integrate graphs in your AngularJS project.

Installation

If you want to run this tutorial you have to run this as a website. There are a few ways you can do this. For all means you have to get a copy from this github repository. You can download the zip/tar or clone the repository.

Setting up your project

Before you can show your graphs, you need to do the boilerplate stuff. You have to create an html page that loads the appropriate javascript libraries and stylesheets. The next code block shows this very basic html page.

<html lang="en" ng-app="graphApp">
<head>
<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css"/>
</head>
<body ng-controller="GraphCtrl">

    <script src="assets/js/d3.min.js" charset="utf-8"></script>
    <script src="assets/js/c3.min.js"></script>
    <script src="assets/js/angular.min.js"></script>
    <script src="assets/js/c3-angular.min.js"></script>

    <script src="assets/js/app.js"></script>
</body>
</html>

Besides the html we also need a bit of JavaScript to initialize the application. The next code block shows initilizing the app and a controller.

var graphApp = angular.module('graphApp', ['gridshore.c3js.chart']);

graphApp.controller('GraphCtrl', function ($scope) {

});

That is it, before we move on to your first graph lets have a look at the different directives that are available. The main element is c3chart. All other directives are children of this element. This directive has a few attributes to configure the chart. The most important attribute is the bind-id, if you want multiple graphs on one page, this has to be unique. Other attributes are padding-top/right/left/bottom, show-labels, show-subchart and enable-zoom