Chartjs-Horizontal Bar-Chart – angular-chart.js

by

-1👍

   <canvas id="canvas"></canvas>

   <script type="text/javascript" src="Chart.min.js"></script>
   <script type="text/javascript" src="Chart.HorizontalBar.js"></script>
   <script type="text/javascript" src="angular-chart.min.js"></script>
   <script type="text/javascript" src="app.js"></script>

   var app = angular.module('app', ['chart.js']);

   app.controller('ChartController', ['$scope', '$document',
      function($scope,$document){
        var randomScalingFactor = function(){
           return Math.round(Math.random()*100);
        };

    var barChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205, 1)",
                pointHighlightFill: '#fff',
                pointHighlightStroke : "rgba(151,187,205,0.8)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
        ]
    };

    angular.element($window).bind('load', function() {
        var ctx = $document[0].querySelector('#canvas').getContext("2d");
        var chart = new Chart(ctx).HorizontalBar(barChartData, {
            responsive: true,
            barShowStroke: false
        });
    });

}]);

Leave a comment