CODEWITHSUNDEEP
javascriptd3.jsc3.js
IgorZ
IgorZ

Reputation: 1164

c3JS Load Function

  1. I'm making c3js chart that looks like: 

    var chart = c3.generate({
    bindto: '#chart',
    data: {
    columns: []
    }
});

  2. Then I'm trying to use load function from it's api: 

    var data =  [["Name", "15", "30", "45"], ["x", "1", "2", "3"]];

function update_graph(arg) {
var tmp = arg[0][1];
chart.load({
    xs: {
        tmp : arg[1][0]  //binding data to x here and getting an error
    },
    columns: [
        arg[0],
        arg[1]
    ],
});
}
update_graph(data);

And I'm getting: Uncaught Error: x is not defined for id = "Name".
If I set in xs section: Name : arg[1][0] - it does work. But then I will not be able to draw different lines from different arrays with this function. What am I doing wrong ? Thank you.

Upvotes: 2

Views: 3381

Answers (3)

user10683717
user10683717

Reputation: 1

  $scope.barchart = function(data,id,chtype,keydata)
    {      
       var xs1 = {};
        var key1 = $scope.obj.key;
        var data1 = $scope.obj.data;
        xs1[key1] = data1;

       var id = c3.generate({
        bindto : '#'+id,
        data: {
            xs:xs1,
            columns: data,
            type: 'scatter',
        },
      }); 


    }

Upvotes: 0

Chetan
Chetan

Reputation: 2756

Working code to make setting key/value to be generic from 'arg' 2D array:- jsFiddle

Solution is to construct the xs object first like:-

var xs = {};
xs[arg[0][0]] = arg[1][0];
xs[arg[2][0]] = arg[3][0];

and then use xs object in the chart.load function like:-

chart.load({
  xs: xs,
  columns: [
    arg[0],
    arg[1],
    arg[2],
    arg[3],
  ],
});

Note that key in xs object is not hardcoded to 'Name' or 'Age' string. Hope this works for you.

Upvotes: 2

Chetan
Chetan

Reputation: 2756

Following example is working fine, with multiple lines defined in different arrays.- jsFiddle

var chart = c3.generate({
bindto: '#chart',
data: {
   columns: []
}
});


var data =  [["Name", "15", "30", "45"], ["x", "1", "2", "3"], ["Age", "45", "38", "25"], ["y", "1", "2", "4"]];

function update_graph(arg) {
  var tmp = arg[0][1];
  chart.load({
   xs: {
    Name : arg[1][0],
    Age : arg[3][0]  //binding data to x here and getting an error
   },
   columns: [
     arg[0],
     arg[1],
     arg[2],
     arg[3],
   ],
 });
}
update_graph(data);

Not sure what the issue is, which version of c3js library are you using? Please refer to the c3js example:- c3js Example

Upvotes: 0

Related Questions