Angular How to use data from json in c3?

Question

I have a problem with showing data from json in c3. I send data from express and I can get it in ./behavior Here is my angular controller:

angular.module('app')
.controller('GraphCtrl', function ($scope) {

   d3.json('./behavior', function(err, data){
    if(err){ throw err; }
    $scope.data = data;
    console.log(data);
    $scope.$apply();

    $scope.chart = c3.generate({
    bindto: '#behavior',
    data: {
        columns: [],
        type: 'bar',

        },
        bar: {
            width: {
                ratio: 0.4 // this makes bar width 50% of length between ticks
            }
        },
        grid: {
            x: {
                show: true
            },
            y: {
                show: true
            }
        },
        color: {
            pattern: ['#FF9800', '#8BC34A', '#E040FB', '#3F51B5', '#FF4081']
        }
    });
});

and I bind it to HTML:

<div id="graph" ng-controller="BehaviorGraphCtrl">
    <div id="behavior"></div>
</div>

What I'm doing wrong?

Sarjan Desai · Accepted Answer · 2015-10-23 12:48:47Z

1

data: {
        columns: [],
        type: 'bar'
    }

You haven't added $scope.data in columns.

Change it to

data: {
        columns: $scope.data,
        type: 'bar'
    }

Here $scope.data should be array and in proper format.

Check Getting Started Guide demo for Columns

answered Oct 23, 2015 at 12:48

Sarjan Desai

3,7332 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

corry Over a year ago

I changed, but it still doesn't work. The data (two objects in array) which I want to show on graph: [{"calling_number":"123","play":"OFF"},{"calling_number":"321","play":"ON"}] Do I have to parse this data to show?

Sarjan Desai Over a year ago

Your data is not proper...That's why it's not working...There is no object in array in demo example....

corry Over a year ago

I'm trying to reproduce this on plunker, no graph unfortunately

corry Over a year ago

Please take a look at this example, there are objects in array.

Sarjan Desai Over a year ago

You have to specify some params based on requirement...Look at this example or from your fiddle example, try to set some params based on your object

corry · Accepted Answer · 2015-10-23 17:36:06Z

0

Instead of columns attribute, in data object I added json and keys attributes and the working result is:

data: {
    json: $scope.data,
    keys: {
          value: ['units', 'duration'],
    },
    type: 'bar'
}

Thanks for your help.

answered Oct 23, 2015 at 17:36

corry

1,5497 gold badges34 silver badges64 bronze badges

Collectives™ on Stack Overflow

Angular How to use data from json in c3?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related