Bar Chart in AngularJS using ChartJS

Bar Chart in AngularJS using ChartJS

A set of data are better understood when represented graphically, there are various ways to represent data, out which Bar Chart is one of them. The chart can be implemented using AngularJS.

AngularJS uses Chart.js as a dependency to create given chart, which imparts responsiveness and provides various other flexibility, which we’ll see them going further. Other implementation of Chart are

  1. Pie Chart
  2. Doughnut Chart
  3. Horizontal Bar Chart
  4. Line Chart

Environment Set:

Dependencies:

  1. angular.min.js
  2. angular-chart.min.js
  3. chart.js

These files need to be included in page as-

<script src="angular.min.js"></script>
<script src="Chart.min.js"></script>
<script src="angular-chart.js"></script>

After including the files in page, one must add chart.js in module dependency, as shown below

angular.module('barChart', ['chart.js']);

Directives of AngularJS charts:

[table “” not found /]

Implementation of Bar Chart:

Let’s see the implementation of Bar Chart:

index.html

<html ng-app="barChart">

<head>
    <title>AngularJS Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body class="container-fluid ">
<div class="panel panel-success">
    <div class="panel-heading">
        <div class="panel-title text-center">AngularJS Charts</div>
    </div>
    <div class="panel-body container-fluid">
        <section>
            <div class="row well">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <section ng-controller="angularBarChartController" class="">
                        <div class="row lead">
                            <div class="col-md-12 text-center ">Bar Chart</div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <canvas id="bar" class="chart chart-bar"
                                        chart-data="data" chart-labels="labels"
                                        chart-series="series" chart-colors="ColorBar"
                                        chart-options="options" chart-click="clickme" chart-hover="hoverme"
                                        chart-dataset-override="DataSetOverride"></canvas>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    </div>
</div>
</body>
<script src="Controllers/Chart.js"></script>
<script src="Controllers/angular-chart.min.js"></script>
<script src="Controllers/chartController.js"></script>

</html>

chartController.js (with two data sets)

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

app.controller('angularBarChartController', function ($scope) {
    $scope.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July'];
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [75, 63, 59, 79, 13, 91, 113],
      [27, 48, 54, 70, 89, 35, 53]
    ];

    $scope.ColorBar = ['#90EE90', '#FF6600'];    
    $scope.DataSetOverride = [{ yAxisID: 'y-axis-1' }]; //y-axis-1 is the ID defined in scales under options.

    $scope.options = {
        legend: { display: true },
        responsive: true,  // set to false to remove responsiveness. Default responsive value is true.
        scales: {
            yAxes: [
                {
                    id: 'y-axis-1',
                    type: 'linear',
                    display: true,
                    position: 'left'
                }]
        }
    }

    $scope.clickme = function($event){
        alert("You've clicked upon "+$event[0]._view.label);
    }

    $scope.hoverme = function ($event) {
        alert("You hovered over " + $event[0]._view.label);
    }

});

Output with double sets:

barchart

chartController.js (with set data set)

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

app.controller('angularBarChartController', function ($scope) {
    $scope.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July'];
    $scope.series = ['Series A'];
    $scope.data = [
      [75, 63, 59, 79, 13, 91, 113]
    ];

    $scope.ColorBar = ['#90EE90'];    
    $scope.DataSetOverride = [{ yAxisID: 'y-axis-1' }]; //y-axis-1 is the ID defined in scales under options.

    $scope.options = {
        legend: { display: true },
        responsive: true,  // set to false to remove responsiveness. Default responsive value is true.
        scales: {
            yAxes: [
                {
                    id: 'y-axis-1',
                    type: 'linear',
                    display: true,
                    position: 'left'
                }]
        }
    }

    $scope.clickme = function($event){
        alert("You've clicked upon "+$event[0]._view.label);
    }

    $scope.hoverme = function ($event) {
        alert("You hovered over " + $event[0]._view.label);
    }

});

Output with single data set:

barchartsingledataset

We can clearly see how a Bar chart is rendered with single and double data sets. Depending upon requirement we can make successive changes. There are few thing one should keep note while making changes

  • chart-colors: This directive is not mandatory, when removed a color is automatically assigned to each section. However if used then one need to ensure to use only color code but not names.

Stay tuned for more updates!

Leave a Reply

Your email address will not be published. Required fields are marked *