jettro / c3-angular-directive

Contains angularjs directives that use c3js to create good looking graphs

Hi there 👋

Welcome to my profile page. Github contains a lot of code, some repositories are bigger than others. But you get a good impression on what I have been working on.

• 🔭 I’m currently working on AWS samples
• 🌱 I’m currently learning AWS CDK
• 👯 I’m looking to collaborate on everything that is search related
• 🤔 I’m looking for help with CDK samples related to AWS elasticsearch
• 💬 Ask me about Elasticsearch, Solr, DDD, CQRS
• 📫 How to reach me: Twitter @jettroCoenradie

c3-angular-directive's Issues

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!

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.

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 :(

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

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?

How to remove points on line?

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

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

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

pie chart label format

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

events?

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

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/

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?

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?

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>

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.

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.

Implement Conditional Color for data

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

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.

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! ;)

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?

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

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

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?

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.

Enable the feature to extend the x axis

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

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!

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.

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>

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.

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)

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

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.

Make it possible to dynamically add a column

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 bower.json

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

Resize chart

Is possible to resize chart?

Any example of resizing?

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?

Add click event to the legend

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

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.

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

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.

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.

how to update chart when data changed

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

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"}];
                })
        }

    }

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

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!

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.

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?

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