carlcraig
Getting chart in controller. I'm trying to use chart='var', but 'var remains 'null' even after chart is drawn.
Check this example (this is to implement some custom onclicks, but does show how to expose the chart object to your controller) http://jsfiddle.net/Lfmhcab3/4/
.controller('GaugeCtrl', ['$scope',function ($scope) {
$scope.chart;
$scope.chartClick = function chartClick(event){
console.log(event);
console.log($scope.chart.getSegmentsAtEvent( event ));
}
$scope.data = {
filler
}
$scope.globalGaugeOption = {
segmentStrokeColor : "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth : 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout : 70, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps : 1,
showScale: false,
scaleShowLabels : false,
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate : false
}
}]);
partial
<canvas tc-chartjs-doughnut chart="chart" chart-data="data" chart-options="globalGaugeOption" ng-click=chartClick($event)" width="100" height="100"></canvas>
console.log($scope.chart.getSegmentsAtEvent);
returns
undefined is not a function
at chartClick (http://localhost/~bwaters/app/scripts/controllers/gauge.js:16:31)
Im not sure why that would be happening, i know that the getSegmentsAtEvent is only available in the latest version of Chart.js.
Could you double check that Chart.js is 1.0.0+ ?
If it is, would you be able to fork this example http://jsfiddle.net/Lfmhcab3/4/ and try to create this problem so I can take a look?
I found the problem was bower installs the wrong chart js. I replaced with the current stable version from github and it worked just fine.
On Nov 13, 2014, at 6:00 PM, Carl Craig [email protected] wrote:
Im not sure why that would be happening, i know that the getSegmentsAtEvent is only available in the latest version of Chart.js.
Could you double check that Chart.js is 1.0.0+ ?
If it is, would you be able to fork this example http://jsfiddle.net/Lfmhcab3/4/ and try to create this problem so I can take a look?
— Reply to this email directly or view it on GitHub.
@carlcraig: I discovered that there is a problem with the scope visibility. In general, parent scope cannot access the child scope of a contained directive, so in some scenarios it failed to pass the chart object back up just by putting it on the scope, like you do now.
If you wish to expose the chart object successfully at all cases I suggest you fire an event that anyone outside tc-angular-chartj can catch.
Something like:
if (exposeChart) {
$scope.chart = chartObj;
$rootScope.$broadcast('eventName', chartObj);
}
To solve this issue for current version, create a dedicated controller for the chart and put it on the wrapper html element as described in the example above. Something like this:
<div ng-controller="ChartController">
<canvas tc-chartjs-line chart-options="options" chart-data="data" auto-legend chart="chart"></canvas>
</div>
Then declare $scope.chart variable inside ChartController along with the rest of the code for the chart (declare data, options, etc) and hopefully it will solve the problem.
