AngularJS Charts with CanvasJS

This example uses CanvasJS to chart Nintendo’s console sales in an AngularJS app. Clicking Bootstrap nav-tabs trigger the Angular controller to change the chart type (bar, column, pie chart etc).

nintendo-console-sales-chart

The file structure:
canvasjs-example-files

In index.html setup chartApp and add all the Angular directives, Bootstrap nav-tabs, and a div with id chartContainer for the CanvasJS chart:

<!DOCTYPE html>
<!DOCTYPE html>
<html ng-app="chartApp">
<head>
    <title>AngularJS Charts with CanvasJS</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="canvasjs.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="directives.js"></script>
    <style>
        .container {
            margin-top: 40px;
            width: 970px !important;
        }
        #chartContainer {
            margin-top: 30px;
            height: 500px; 
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container" ng-controller="ChartController">
        <div class="row">
            <div class="col-xs-12">
                <ul class="nav nav-tabs" mc-toggle-active>
                    <li class="active"><a href="" ng-click="changeChartType('bar')">Bar</a></li>
                    <li><a href="" ng-click="changeChartType('column')">Column</a></li>
                    <li><a href="" ng-click="changeChartType('line')">Line</a></li>
                    <li><a href="" ng-click="changeChartType('area')">Area</a></li>
                    <li><a href="" ng-click="changeChartType('pie')">Pie</a></li>
                    <li><a href="" ng-click="changeChartType('doughnut')">Doughnut</a></li>
                    <li><a href="" ng-click="changeChartType('scatter')">Scatter</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div id="chartContainer"></div>
            </div>
        </div>
    </div>
</body>
</html>

In app.js assign the Angular app to a variable called app:

//chartApp does not have any dependencies
var app = angular.module('chartApp', []);

In controller.js setup the ChartController. This will create the chart and update it’s layout when the chart type changes:

//inject the $scope service into the controller
app.controller('ChartController', function($scope) {

    $scope.chart = new CanvasJS.Chart("chartContainer", {
        theme: 'theme1',
        title:{
            text: "Nintendo Console Sales"              
        },
        axisY: {
            title: "million units",
            labelFontSize: 16,
        },
        axisX: {
            labelFontSize: 16,
        },
        data: [              
            {
                type: "bar",
                dataPoints: [
                    { label: "Wii U", y: 6.17 },
                    { label: "Wii", y: 101.06 },
                    { label: "GameCube", y: 21.74 },
                    { label: "64", y: 32.93 },
                    { label: "SNES", y: 49.10 },
                    { label: "NES", y: 61.91 },
                    { label: "3DS", y: 43.33 },
                    { label: "DS", y: 153.99 },
                    { label: "Advance", y: 81.51 },
                    { label: "GameBoy", y: 118.69 },
                ]
            }
        ]
    });

    $scope.chart.render(); //render the chart for the first time
            
    $scope.changeChartType = function(chartType) {
        $scope.chart.options.data[0].type = chartType;
        $scope.chart.render(); //re-render the chart to display the new layout
    }

});

In directives.js setup a custom directive to handle changing the nav-bar tabs active class:

//when a tab is clicked make it active
app.directive('mcToggleActive', function() {
	return {
		link: function(scope, element, attrs) {
			element.find('li').on('click', function() {
                $(this).addClass('active').siblings().removeClass('active');
            });
		}
	}
});

View a demo here. Download the source files.

Links:
- Bootstrap Disable Responsive
- CanvasJS Documentation

This entry was posted in Uncategorized. Bookmark the permalink.
  • Benjamin Soulas

    Hi, I tried to insert your example in my angular app, I inserted the canvasjs lib on my index.html file (it is located into an other folder, does it matters?) and the tag ” too. In my controller, I took all your code until ‘$scope.chart.render();’ , and when launch my app, i got this error :

    TypeError: b[a].render is not a function
    at w.render (http://localhost:3000/lib/canvasjs.min.js:84:478)

    If it can help, my server is a NodeJs using a Jade template Engine, I work with a MongoDB database but I am not sure it is relevant for my problem.

    So my question is do you have any idea where I am wrong?

    Kind regards.

    Benjamin.