angular-c3-directive demo

Demo of the angular-c3-directive project

by Ali Tavakoli

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="//rawgit.com/atavakoli/angular-c3-directive/0.3.0/angular-c3.js"></script>
<div ng-controller="MyCtrl">
  <a href="//github.com/atavakoli/angular-c3-directive">GitHub Project</a>
  
  <div c3="chart" c3-data-click="clickEvent(datum, event)"></div>
  
  <p>{{description}}</p>
  
  <pre><code>{{chart | json:true}}</code></pre>
</div>

JavaScript

angular.module('MyApp', ['c3'])

.controller('MyCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.chart = {
    data: {
      columns: [
        ['data1', 1, 2, 3],
        ['data2', 4, 5, 6]
      ]
    }
  };

  $scope.clickEvent = function(datum, mouseEvent) {
    console.log('data clicked', datum, mouseEvent);
    $scope.chart.data.hide.push(datum.id);
  };

  var delay = 1000;
  
  $scope.description = "Initial chart";

  $timeout(delay).then(function() {
    $scope.chart.data.columns.push(['data3', 7, 8, 9]);
    $scope.description = "Adding new column";
    return $timeout(delay);
  }).then(function() {
    $scope.chart.data.columns[0].push([5]);
    $scope.chart.data.columns.pop();
    $scope.description = "Modifying one column, removing another";
    return $timeout(delay);
  }).then(function() {
    $scope.chart.point = { show: false };
    $scope.description = "Hiding points";
    return $timeout(delay);
  }).then(function() {
    $scope.chart.point = { show: true };
    $scope.description = "Showing points";
    return $timeout(delay);
  }).then(function() {
    $scope.chart.data.type = 'pie';
    $scope.description = "Changing chart type";
    return $timeout(delay);
  }).then(function() {
    $scope.chart.data.hide = ['data1'];
    $scope.description = "Hiding data";
    return $timeout(delay);
  }).then(function() {
    $scope.chart.data.type = 'bar';
    $scope.chart.data.groups = [
      ['data1', 'data2']
    ];
    $scope.description = "Changing chart type, adding groups";
    return $timeout(delay);
  }).then(function() {
    $scope.chart.data.hide = [];
    $scope.chart.data.columns.push(['data3', 7, 8, 9]);
    $scope.description = "Unhiding data, adding column";
    return $timeout(delay);
  }).then(function() {
    $scope.chart.data.x = 'x';
    $scope.chart.data.columns.push(['x', 100, 200, 300]);
    $scope.description = "Adding x values";
    return $timeout(delay);
  }).then(function() {
    delete...