jettro/c3-angular-directive

Contains angularjs directives that use c3js to create good looking graphs

C3JS AngularJS directives

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>

Documentation

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

Goal

Come up with a number of directives to integrate C3js with AngularJS

References

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

Installation and development

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.

Using it in your own project

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

Version History

1.4.0

• Upgrade to version 0.4.18 of c3js library
• Merged pull request #174 by adamczykmichael update to material css
• Merged pull request #172 by esahekmat with a fix for documentation
• Merged pull request #169 by vmanchev with a new option for interaction enabled
• Merged pull request #134 by ishank18 with a more consistent tick labelling

1.3.1

Merged pull request #131 by mumuxin Made doc change based on comment from LucasBassetti

1.3

Closed the following issues

• 126: Merge request with tooltip documentation fix
• 118: Zoom documentation
• 88: Added example for using category labels on the x-axis with dynamic values
• 100: Added the selections directive
• 97: Problems with colors are fixed
• 108: Added support for tooltip contents callback
• 112: Fixed bug with numeric grid values
• 125: Upgraded angular to 1.5 and c3 to 0.4.11

Pull request by LucasBassetti to fix tooltip docs

1.2

• In issue 104 @AesSedai proposed more properties for the legend inset directive. These are now added.
• In issue 102 @jtaylor1022 asked for the grid-class attribute and I added the position as well.

Bugs fixed:

• Issue 104: Fixed problem with the time format function

1.1

Added pull requests

• marton987 (Martin Freytes): Added regions to line charts by adding a new directive
• stevezau (Steve): Added support for empty data labels.

Bugs fixed:

• Issue 86: Has to do with the colors.

1.0

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.

0.7.0

Focus is improvements to the structure of the project and the documentation. Also fixed some bugs.

0.6.0

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

0.5.0

Added a big pull request by EmmN that includes formatting improvements. All charts now support adding a format function to format labels and tooltips.

0.4.0

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/

0.3.1

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

0.3.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

c3-angular-directive's Issues

How to use labels-format-function?

Would you mind telling me how to use labels-format-function?
http://jettro.github.io/c3-angular-directive/api-docs/0.7/C3Chart.html
I used to use it in c3.js library easily but not for now :(

Gauge Chart not displayed if data loaded asynchronously

This issue is related to #45 but the fix is not working for that type of chart. What would trigger the chart to be updated for gauge chart.

HTML

<c3chart bindto-id="gauge-plot1-chart">
    <chart-column column-id="Data 1"
                  column-values="{{vm.working.value}}"
                  column-type="gauge"/>
    <chart-gauge min="{{vm.working.min}}"
                 max="{{vm.working.max}}"
                 units=" units"
                 width="39"/>
</c3chart>

<c3chart bindto-id="gauge-plot2-chart">
    <chart-column column-id="Data 2"
                  column-values="{{vm.notworking.value}}"
                  column-type="gauge"/>
    <chart-gauge min="{{vm.notworking.min}}"
                 max="{{vm.notworking.max}}"
                 units=" units"
                 width="39"/>
</c3chart>

My Controller

    angular
        .module('app.sport')
        .controller('SportController', SportController);

    function SportController(logger, $q, $stateParams, DashboardsService) {
        // vm is the same as $scope
        var vm = this;
        vm.working = {};
        vm.working.value = 0;
        vm.working.min = -10;
        vm.working.max = 10;

        vm.notworking = {};
        vm.notworking.value = 0;
        vm.notworking.min = -10;
        vm.notworking.max = 10;

        activate();

        function activate() {
            vm.sport = $stateParams.sport;
            var promises = [getDashboard(vm.sport)];
            return $q.all(promises).then(function (results) {
                logger.info('Activated Sport View');
            });
        }

        function getDashboard(sport) {
            return DashboardsService.getSportDashboard(sport, true)
                .then(function (dashboard) {
                    // Does not update the gauge chart
                    vm.notworking.value = 5;
                    vm.notworking.min = -1;
                    vm.notworking.max = 7;
                })
        }

    }

Add oninit method

Could you please add oninit method in configuration object?

I'd like to generate an animatin like this one: http://jsfiddle.net/gdvynLtp/1/

tick multiline for x-axis

Hi,
Is there a way I can set multiline=true in x-axis.
Couldn't find one in code.

Thanks,
Shwetha

Donut chart becomes a pie chart when using <chart-legend> tag

Hello!

I have the following:

<c3chart bindto-id="eventchart" chart-data="eventpoints" chart-columns="eventcolumns">
  <chart-donut expand="true" width="30" show-label="false" title="totalReports"></chart-donut>
</c3chart>

When I attempt to place a <chart-legend show-legend="false"> either immediately before or after the <chart-donut>, the chart becomes a pie chart. Is there any way to prevent this behaviour?

Thanks!

Library license

First of all, thanks for your great work!

What is the license of your binding? I think you should add a LICENSE file to your repository.

Allow defining of a data.color function

There is currently no way to pass through a data.color function to c3. Consider adding a color-function attribute to the chart-colors directive?

Add something to expose the chart object

Some features are not available using the api, we would like to have a way to expose the chart object before rendering. That way users can add all features they want before they are implemented in the directive.

We need proper documentation for the available directives and their options

We need to create documentation for the available directives. Thinking about doing this in the site or near the source code. Not sure yet.

Implement Conditional Color for data

Is it possible to implement conditional color based on the value as per screenshot below?

How to remove points on line?

I looked through the documentation, but didn't see how to remove points on a line graph.

Donut title does not render if data is loaded via async

Hello! Thank you very much for the terrific product.

I have a donut chart being generated via data from a service. I have the chart itself working by setting the data in $scope.datapoints and $scope.datacolumns. However, the donut chart title does not appear.

I've created a workaround in the meantime by appending the title to the c3-chart-arcs-title, but I'd love to know if this could be resolved or if there's a better way to achieve the same.

Thanks!

"tick-values" attribute for the chartAxisYTick directive not working

The tick-values attribute for the chartAxisYTick is not working as it specifies in the docs, I pass an array and it sends the following error in the console:

Error: Invalid value for attribute transform="translate(0,NaN)"

I specify it like the following, in the view:

In the controller:
$scope.myTicks = [1, 25, 50, ...];

which is how it is supossed to be declared according to the c3 documentation too, I also declared the values in the directive's attribute like this {{myTicks}} but it throws the same error.

events?

From what I can tell, none of the data. events are available - such as onclick, onmouseover, etc. Is that correct?

Enable the feature to extend the x axis

http://c3js.org/reference.html#axis-x-extent

Add configuration options for specific charts

All charts have specific options to configure thinks like labels, widths and titles. I want to make these available using directives.

Dynamically adding data to donut

Hi,

I cannot get the last piece of the puzzle together. I have created a donut:

html

<c3chart bindto-id="donut-plot1-chart" chart-data="companySizeDatapoints" chart-columns="companySizeDatacolumns">
  <chart-donut title="Company Size" width="60"/>
</c3chart>

controller

.controller('theCtrl', function($scope, Signup) {

    // Donut
    $scope.companySizeDatapoints = [];
    $scope.companySizeDatacolumns = [];

    Signup.graphcompanysize(function(response){
      _.each(response,function(value,index){
        $scope.companySizeDatacolumns.push({ "id": value.category, "type": "donut", "name": value.category })
        $scope.companySizeDatapoints.push([value.category, value.percentage]);
      })
    })
})

The legend with the categories are shown, but not the donut itself. What am I doing wrong?

Thx for the help!

Error on creation

I am receiving the following error:
$$.axisTimeFormat.multi is not a function

Could you guys help me troubleshoot it? Thank you!!

TypeError: $$.axisTimeFormat.multi is not a function
at ChartInternal.c3_chart_internal_fn.initParams (c3.js:123)
at ChartInternal.c3_chart_internal_fn.init (c3.js:77)
at new Chart (c3.js:34)
at Object.c3.generate (c3.js:58)
at showGraph (c3js-directive.js:196)
at c3js-directive.js:498
at angular.js:17744
at completeOutstandingRequest (angular.js:5490)
at angular.js:5762

pie chart label format

is it possible to change label format on pie chart? how to show numbers instead percentage?

Uncaught ReferenceError: $timeout is not defined

error only occurs in min ver. Maybe inline annotation is missing for $timeout?

c3-angular.min.js:5
angular.module("gridshore.c3js.chart").directive("c3chart",["$timeout",C3Chart($timeout)]),angular.module("gridshore.c3js.chart").directive("chartColors",ChartColors),angular

Multiple line chart with multiple custom x

Is it possible to do multiple line chart with multiple custom x? Like the example in C3 documentation: http://c3js.org/samples/simple_xy_multiple.html

If yes can you show me an example, I am not sure how to modify datax, datapoints and datacolumns accordingly.

Thanks

Chart draws before data is available

I'm fetching data, and it seems that the chart sometimes draws before the data is ready. Could any of you help me with this?

Chart not displayed if data loaded asynchronously

I tried to display two charts, one with data provided by default when the controller is created. And one with data provided by a promise. The first chart displays the data, but the second chart is empty. I can see both charts. It seems that the chart is not updated even if the model is changed. I also tried to create a button that pushes data in the model but it's not working either.

HTML

<c3chart bindto-id="chart3" chart-data="vm.working.datapoints" chart-columns="vm.working.datacolumns">
</c3chart>
<c3chart bindto-id="chart4" chart-data="vm.notworking.datapoints" chart-columns="vm.notworking.datacolumns">
</c3chart>

My Controller

    angular
        .module('app.sport')
        .controller('SportController', SportController);

    function SportController(logger, $q, $stateParams, DashboardsService) {
        // vm is the same as $scope
        var vm = this;
        vm.getDashboard = getDashboard;
        vm.sport = undefined;
        vm.dashboard = undefined;

        vm.working = {};
        vm.working.datapoints = [{"x": 10, "top-1": 10, "top-2": 15},
            {"x": 20, "top-1": 100, "top-2": 35},
            {"x": 30, "top-1": 15, "top-2": 75},
            {"x": 40, "top-1": 50, "top-2": 45}];
        vm.working.datacolumns = [{"id": "top-1", "type": "line"},
            {"id": "top-2", "type": "spline"}];

        vm.notworking = {};

        activate();

        function activate() {
            vm.sport = $stateParams.sport;
            var promises = [getDashboard(vm.sport)];
            return $q.all(promises).then(function (results) {
                logger.info('Activated Sport View');
            });
        }

        function getDashboard(sport) {
            return DashboardsService.getSportDashboard(sport, true)
                .then(function (dashboard) {
                    vm.notworking.datapoints = [{"x": 10, "top-1": 10, "top-2": 15},
                        {"x": 20, "top-1": 100, "top-2": 35},
                        {"x": 30, "top-1": 15, "top-2": 75},
                        {"x": 40, "top-1": 50, "top-2": 45}];
                    vm.notworking.datacolumns = [{"id": "top-1", "type": "line"},
                        {"id": "top-2", "type": "spline"}];
                })
        }

    }

Add click event to the legend

The legend supports events to, make it possible to register callback for at least the o'clock handler.

Make it possible to dynamically add a column

0.7.0 build issue

Hi @jettro,

Thanks for getting this release out. Grunt wiredep is adding the c3js-directive.js (0kb) file as a dependency to the index.html with this new build. I noticed some refactoring was done and the concatenated file is not listed as the main in the bower.json [ "main": "c3js-directive.js",] file. Could you update it please?

Dynamic configuration?

From the source code it seems that all changes possible in live graphs are only related to data. Shouldn't it be possible to also update a graph's configuration?

For instance, I'd like to be able to change the tickFormat format based on the grouping hour/day/month, that the user is able to change by clicking a button bar. Shouldn't this config be watched as well? Is there any way to accomplish this behavior currently?

Thanks

angularjs as depency in bower.json file incorrect?

I' m having an issue with the depency to angularjs: ' ~ 1.3.8', as stated in the bower.json file.
All other pacakges are using angular, not angularjs. Am I missing something here?

Implement color.threshold

Can you implement color.threshold for gauges?

C3 Documentation at http://c3js.org/reference.html#color-threshold is not complete but here is a working example http://c3js.org/samples/chart_gauge.html.

@mdavid5 already implemented values property of this feature #68 but unit and max properties are missing.

flush/redraw chart? old chart get updated instead of redrawing

I have two donut charts and i use on-click-data event from the first donut to select and feed new data to the second chart. The data is pushed by a function with $timeout attribute.

It works great with the old version, c3-angular - v0.5.1 - 2015-06-07. But in the newer version, and even in the latest version, it acts strange. When i invoke the on-click-data event, instead of re-initializing the second donut, it adds new data to the chart while keeping all the old data.

There are array-emptying commands first line in my on-click-data event function. It still works. You can see (screenshots below) chart data arrays are clean.

Library license

First of all, thanks for your great work!

What is the license of your binding? I think you should add a LICENSE file to your repository.

firefix error [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" when using with ng-hide

Those charts work fine in both IE and Chrome but not in Firefox.
I am using them inside several div which i assigned ng-hide. The one shows on default is displaying but other two are not.

[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://123/lib/c3.min.js :: i.yForTitle :: line 3" data: no]
http://123/c3.min.js
Line 3

Tick format doesn't work

The directive: '<'chart-axis-x-tick tick-format="%Y-%m-%d %H" '/>', basically I want the time in following format other than default: '2015-06-10 04', but it doesn't work. I checked the source code and found it doesn't set 'config.data.xFormat', but only set 'config.axis.x.tick' (line 56), if I add the xFormat setting, it works well. Is it a bug or there is something I need to set?

Passing whole config object in c3chart directive

It would be nice to be able to pass the entire config object from the directive for advanced setting, something like

So $scope.myConfig object can be defined in the Angular controller as in the samples in C3.js. e.g. http://c3js.org/samples/chart_bar_stacked.html.

Thank you! This has been a great package.

Enable the feature to set height of x axis

The height of x axis can be set manually by this option
http://c3js.org/reference.html#axis-x-height
It would be enough to add these lines of code within 'chartAxisX' directive

var height = attrs.axisHeight;
if (height) {
        axis.height = parseInt(height)};
}

at view side could be for example as follow:

<chart-axis-x axis-position="outer-center" axis-height="85"></chart-axis-x>

can you show an example binding $scope data to a pie chart.

The only example that shows data-binding makes a line graph which introduces this datax parameter. This seems crucial for an x-y graph but I cannot get a pie chart to dynamically update when the bounded data updates (and there's no datax piece because there's no x-axis)

Add bower.json

It would be easier to use if you can register this to nower

Memory leak issue

I'm updating graph on 1 second interval, inserting one point with push to array, max 200poins (then splice one out for every one in)

Scripts

• c3-angular - v0.5.1 - 2015-06-07
• Angularjs 1.3.14
• D3 3.5.5
• c3 0.4.10

I got a example, in few minutes memory usage was over 500mb

  var app = angular.module('memory-leak', ['gridshore.c3js.chart']);
  app.controller('main', [ "$scope", "$interval", function ($scope, $interval){
    $scope.graph=[];
    $scope.cols=[
                {"id":"A","type":"spline"},
                {"id":"B","type":"spline"}
                ];
    $scope.datax={"id":"x"};
    $interval(function (){
      // Limit datapoins to 200
      if($scope.graph.length >= 200){
        $scope.graph.length.splice(0,1);
      }
      $scope.graph.push({
          x : new Date().getTime(),
          A : Math.random() * 100,
          B : Math.random() * 100
      });
    },1000)
  }]);

And the chart

<c3chart bindto-id="chart_1" chart-data="graph" chart-columns="cols" chart-x="datax">
      <chart-size chart-height="150" />
      <chart-axis-x show="false"></chart-axis-x>
      <chart-axis-y show="true"></chart-axis-y>
      <chart-legend show-legend="true" legend-position="right"/>
</c3chart>

Interplotation doesn't work?

Trying to make a graph using this:

<c3chart bindto-id="donut-plot1-chart" ng-repeat="item in vm.categoricaldata">
<chart-column column-id="{{item.name}}" column-values="{{item.value}}" column-type="donut"/>
<chart-donut title="{{vm.selectedValue.label}}" width="70"/>

c3 chart directive doesn't seem to pick up on the interpolated values from the ng-repeat.
Is this intended behavior or am I missing something obvious?

Setting datapoints from a $http callback often leads to no data on the graph

Hello

I have the following html:

<c3chart bindto-id="chart" chart-data="datapoints" chart-columns="datacolumns" chart-x="datax">
    <chart-axis>
        <chart-axis-x axis-id="date" axis-type="timeseries">
            <chart-axis-x-tick tick-format="%Y-%m-%d"/>
        </chart-axis-x>
    </chart-axis>
</c3chart>

And following controller:

killrControllers.controller('WeatherStationViewCtrl', ['$scope', '$http', '$routeParams',
    function ($scope, $http, $routeParams) {
        $scope.datapoints = [];

        $http.get('/station/' + $routeParams.id).success(function (data) {
            $scope.station = data;
            $scope.datapoints = data.dailyPrecipitation;
            console.info("Setting data points to " + JSON.stringify($scope.datapoints));
            $scope.datacolumns = [{"id": "precipitation", "type": "bar", "name": "Daily Precipitation"}];
            $scope.datax = {"id": "date"};
        });

    }]);

About 50% of the time I get an empty graph even if there are many data points coming back from the HTTP call. Am i doing something wrong?

Thanks

how to update chart when data changed

Donut chart labels

Hi there!

I want to hide the piece's label from my donut chart, but I think it is not possible using the directives.
http://c3js.org/reference.html#donut-label-show (Docs)
http://c3js.org/samples/chart_donut.html (Example)

I'm walking through the code and can't see how to put the follow settings in $scope.config:

$scope.config.donut = {
  label: {
    show: false
  }
};

Nice work! ;)

Restructure project to use different source files

At the moment the project consists of one big file. This becomes a problem. Therefore I want to restructure the project into multiple files. That also makes it easier to come up with documentation based on dgeni. This is a separate issue however.

Group Column for a dynamic chart

Hello,

I need to use a Stacked bar chart, but my groups being dynamic values.

I have one service who give me my datapoints, datapoints and groups.

Looking at code, I can see that "addGroup" function only being used at "chartGroup Directive", and, if I use that, the groups will be static values.

I need something like this:

<c3chart bindto-id="chart-timeseries" chart-data="datapoints" chart-columns="datapoints" chart-x="datax" chart-group="dataGroups -> ['group1', 'group2']">
  <chart-axis-x axis-id="x" axis-type="category">
    <chart-axis-x-tick tick-rotate=90 tick-fit="false" tick-multiline="false" />
  </chart-axis-x>
  <chart-events on-click-data="ctrl.redirecionarSlaMensagensRespondidasParaAtendimentos(data)" />
</c3chart>

Its possible to do with actual version of directive?

If not, looking at the code, this feature look like easy to do, only need to add ["chartGroups": "=chartGroups"] at the directive config. What you think about this feature?

Refactor the example to make a better extendable structure

At the moment the samples are not well structured and named. Need to give more samples together with code and preferably present them using github or via other means as well.

Resize chart

Is possible to resize chart?

Any example of resizing?

Stacked bar chart

Hi.

I'm wondering if you could help. Is there an easy way to implement stacked bar charts ?

From what I can see it's only the groups item that's missing. I tried adding it to the $scope but couldn't find where the you map from the dom into the scope.

Not having stacked bar charts is a show stopper for using your great directive.

thanks

Vinny

angular-chart

HI, just a short hint: Do you know https://github.com/maxklenk/angular-chart ? It integrates c3 in angular as well.

Just a hint, maybe you're interested in using/contributing.

c3 version 4.10 introduced sass, embed it in our own sass

Specifying the order of data in donut chart

Donut chart basically sorts the data in descending order and plots. Is there any way to stop this.