angular-chartjs-bar-directive/index.html at master · angular-directives/angular-chartjs-bar-directive · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html ng-app="angularjs-starter">
  <head>
      <title>Angular ChartJs Bar Directive</title>

      <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />

      <script src="Chart.js"></script>

      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
      <script src="angular-chartjs-bar-directive.js"></script>

      <script>
      var app = angular.module('angularjs-starter', ['angular.directives-chartjs-bar']);

      app.controller('MainCtrl', function($scope) {
        $scope.barData =  [
        {
          labels : ["January","February","March","April","May","June","July"],
          datasets : [
            {
              fillColor : "rgba(220,220,220,0.5)",
              strokeColor : "rgba(220,220,220,1)",
              data : [65,59,90,81,56,55,40]
            },
            {
              fillColor : "rgba(151,187,205,0.5)",
              strokeColor : "rgba(151,187,205,1)",
              data : [28,48,40,19,96,27,100]
            }
          ]
        },
        {
          labels : ["January","February","March","April","May","June","July"],
          datasets : [
            {
              fillColor : "rgba(220,220,220,0.5)",
              strokeColor : "rgba(220,220,220,1)",
              data : [12,33,70,53,96,22,10]
            },
            {
              fillColor : "rgba(151,187,205,0.5)",
              strokeColor : "rgba(151,187,205,1)",
              data : [11,78,30,88,25,3,60]
            }
          ]
        }]
      });
      </script>

  </head>
  <body ng-controller="MainCtrl">
    <h1>AngularJS Chart.js Bar Directive</h1>
    <p>Have a look at the source code to see an example.</p>

    <div ng-repeat="i in [0, 1]">
      <ang:chartjs:bar data-chartjs-model="barData[i]"
                           data-chartjs-width="400 + i * 400"
                           data-chartjs-height="200 + i * 200"
                           data-chartjs-bezier-curve="false"
                           data-chartjs-scale-show-labels="true"
                           data-chartjs-animation-steps="30">
      </ang:chartjs:bar>
    </div>
  </body>
</html>