Open vic64 opened 9 years ago
+1 to vic64
.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 notifications@github.com 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.
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/