Click event using Chart.js with AngularJS

Question

Hi I can draw a line chart with Chart.js adding some data set.

       <div class="row">
          <div class="col-md-9" id="line-chart" ng-controller="LineCtrl">
            <div class="panel panel-default" >
              <select ng-model="selec">
                <option value="aapl">AAPL(Apple)</option>
                <option value="goog">GOOG(Google)</option>
                <option value="amzn">AMZN(Amazon)</option>
              </select>
              <div class="panel-body">
                <canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true"
                click="onClick()" series="series"></canvas>
              </div>
            </div> 
          </div>

          <div class="col-md-3" id="txtfield" ng-controller="LineCtrl">
            <form class="form-horizontal" role="form">
             <div class="form-group">
              <label for="dates" class="col-sm-7 control-label">Date</label>
              <div class="col-sm-5">
               <input type="text" class="form-control" id="dates" ng-model="selecDate"
               placeholder="  "  readonly>
             </div>

and this is data set in Json file.

[
  {
    "date":"2011-06-29",
    "numOfTweet":4,
    "oldScore":5,
    "newScore":4,
    "percentage1":74.64788732,
    "appleClosePrice":45.01,
    "percentage2":-18.81363435
  },
  {
    "date":"2011-06-30",
    "numOfTweet":1,
    "oldScore":2,
    "newScore":1,
    "percentage1":-55.2238806,
    "appleClosePrice":45.23,
    "percentage2":24.43901355
  },

If I move the cursor on the graph it shows a tooltip involving the label(date) and point(data).

I wanna make that if I click the point of graph in the day the data will be shown in a textfields I already made (numOfTweet, scores, percentages and so on) as well. How can I show it manipulating controller.js or somewhere else?

my controller.js looks like

app.controller('LineCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('stock/aapl.json').success(function(data) {
        $scope.selec = 'aapl'; //default as age
        $scope.series = ['Tweet Mood', 'Stock Market'];
        $scope.stocks = data;

        $scope.labels = [];
        $scope.createLabels = function() {
          for (var i = 0; i < $scope.stocks.length; i++) {
            $scope.labels.push($scope.stocks[i].date);
          }
        };  
        $scope.createLabels();

        $scope.data = [[], []];
        $scope.createGraphArray = function() {  
          for (var i = 0; i < $scope.stocks.length; i++) {
            $scope.data[0].push($scope.stocks[i].percentage1);
            $scope.data[1].push($scope.stocks[i].percentage2);
          }
        };
        $scope.createGraphArray();

        $scope.clickPredic = function() {  
          $scope.buySell = 'clicked';
        }; //button click test

        $scope.onClick = function (points, evt) {
          console.log(points, evt);
        };

        $scope.onHover = function (points) {
          if (points.length > 0) {
            console.log('Point', points[0].value);
          } else {
            console.log('No point');
          }
        };
    });
}]);

Chart.js is available in https://github.com/nnnick/Chart.js/blob/master/Chart.js Thanks in advance!

Answer 1

The click attribute on the canvas element is expecting a callback. In your code, you put the result of the function onClick as a callback (undefined), not the function itself. So basically, you can remove the paranthesis in your code :

<canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true" click="onClick" series="series"></canvas>

Hope this helps,

Cheers