carlcraig/tc-angular-chartjs

problem getting chartjs object in controller

Closed this issue · 5 comments

based on issue #6 i added chart attribute to my canvas:

<canvas tc-chartjs chart-type="line" 
          chart-data="stream.chart.data" 
          chart-options="stream.chart.config" 
          chart="myChart"></canvas>

and in my controller wanted to access chartjs object:

...
$scope.myChart = null;
$scope.onButtonClicked = function () {
      console.log($scope.myChart);
};
...

but when onButtonClicked function executed, $scope.myChart is still null and I cant access to chartjs object in my controller.

The chart will most likely be null until it is fully created, unless there is some other problem going on.

Try the following and see if it shows you when chart object is there:

$scope.myChart = null

$scope.$watch("myChart", function(myChart) {
   // do something
  console.log('myChart', myChart);
  console.log('$scope.myChart', $scope.myChart);
}

There are a handful of problems surrounding accessing the chartjs object, and i think we are in need of some improvements for exposing the chart and potentially the ability to bind onclick events to points/segments.

Have a look at #19 as it may be related. Also make sure bower is installing the correct version of Chart.js.

I added watch on myChart but both myChart and $scope.myChart are null.

based on #19 I checked my chartjs and tc-angular-chartjs versions in bower.json, my bower.json file is like:

{
    "name" : "MySampleApp",
    "private" : true,
    "dependencies" : {
        ...
        "angular"                   : "1.2.x",
        "Chart.js"                  : "~1.0.1",
        "tc-angular-chartjs"        : "~1.0.9",
        ...
    }
}

hmm, I'm not sure what's going wrong then. Take a look at this example, and see if you can implement this and get it working.

http://jsfiddle.net/Lfmhcab3/4/

I had this issue only on minified (uglified) js assets.
What worked was placing $scope.chart = null; inside a $scope.init() function.