Madasu K Madasu K - 9 days ago 11
AngularJS Question

Angulrjs : need to help to make c3 direectives to reload data and changing chart types dynamically

I am facing problem with c3 directives to reload data and changing the chart display type. Please see my plunker at http://plnkr.co/edit/wWJx3zU3Sm1cN9ZCtvoh?p=preview.

For reloading the data, I am using

$scope.refreshInData
function and for changing the chart type I am using
$scope.transform
function. But somehow these are not working. From the given example on the Github, I tried to use transform function to change the chart type I am unable to make it work. Any help please ...

$scope.transform = function(filterSelected, preChartName) {
alert('inside change Chart ' + preChartName);
c3SimpleService['#' + preChartName].transform(filterSelected, filterSelected);
// preChartName.load({ data.type : filterSelected });

}

Answer

C3 transform() can take one parameter and in your case - it should.

In case of $scope.transform you should use it like this:

c3SimpleService['#' + preChartName].transform(filterSelected.value);

notice 2 things:

  1. transform takes 1 parameter and it is string - name of chart type
  2. what you are passing is object, so you have to access its value field

As for $scope.refreshInData() problem is slightly different. Here only thing you have to fix is to grab chart not with it's ID directly, but through c3SimpleService service. This will allow access through AngularJS layer:

c3SimpleService['#' + preChartName].load({ columns : cityData });

You can see it working in Plnkr