masayuki0812/c3#687

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="c3example" ng-controller="ExampleCtrl">
    <div class="row">
      <div id="chart" build-chart></div>
    </div>
    <h1>{{clicked}}</h1>
  </body>

</html>

angular.module('c3example', [])
  .controller('ExampleCtrl', function($scope){
    $scope.chartData = [
      ['data1', 30],
      ['data2', 120],
    ];
    
    $scope.clicked = 'Nope.'
    
    $scope.runChange = function(){
      $scope.chartData = [
        ['data1', 9001],
        ['data2', 3000],
      ];
    };
  })
  .directive('buildChart', function(){
    return {
      link: function postLink(scope, element){
        var chart = c3.generate({
          bindto: '#chart',
          data: {
            columns: scope.chartData,
            type : 'bar',
            scope: {model:'='},
            onclick: function(d, element) {
              alert('clicked');
              scope.clicked = 'Yep!';
              console.dir(scope);
            }
          }
        });

        scope.$watch('chartData', function(){
          chart.load({columns: scope.chartData});
        });
      }
    };
  });

/* Styles go here */

# Quick AngularJS, Bootstrap and C3 template