Creating a Visualization App Using the Google Charts API and AngularJS

In the first

and second parts of this series, we focused on AngularJS controllers and directives. In this part, we’ll focus on the two-way data binding feature of AngularJS.

Key Takeaways

The tutorial focuses on implementing a drop-down list in a visualization app using AngularJS’s two-way data binding feature, which enables changes in the model to be automatically reflected in the view and vice versa.
The drop-down list is populated with different chart types (PieChart, BarChart, ScatterChart, LineChart) defined in the AngularJS controller. The selected chart type can then be bound to the view using AngularJS’s ngOptions and ngModel attributes.
The tutorial also discusses the use of AngularJS’s ngChange and $scope.$watch features to dynamically render and update the chart based on the selected chart type. When a different chart type is selected from the drop-down, the chart updates accordingly.

Data Binding in AngularJS

Angular’s data binding allows changes to a model to be automatically reflected in the view, and vice versa. A detailed explanation of AngularJS data binding can be found here. We will be adding a few features to our visualization app. First, we’ll add a drop down where we can select the type of graph. Let’s add a few charts in the drop down. Open up index.html and add a select element as shown below:

<select id="chartType"></select>

If we want, we can define the options for the dropdown in HTML only, but let’s do it the Angular way. Open up controllers.js, and define the options as shown below.

$scope.chartTypes = [
  {typeName: 'PieChart', typeValue: 'PieChart'},
  {typeName: 'BarChart', typeValue: 'BarChart'},
  {typeName: 'ScatterChart', typeValue: 'ScatterChart'},
  {typeName: 'LineChart', typeValue: 'LineChart'}
];
$scope.chartType = $scope.chartTypes[0];

Now, controllers.js looks like this:

'use strict';

/* Controllers */
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['myApp']);
});
angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope',function($scope) {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);
    var options = {
      title: 'Company Performance'
    };
    var chart = {};

    chart.data = data;
    chart.options = options;

    $scope.chartTypes = [
      {typeName: 'LineChart', typeValue: '1'},
      {typeName: 'BarChart', typeValue: '2'},
      {typeName: 'ColumnChart', typeValue: '3'},
      {typeName: 'PieChart', typeValue: '4'}
    ];
    $scope.chartType = $scope.chartTypes[0];
    $scope.chart = chart;
  }])
  .controller('MyCtrl2', [function() {
  }]);

Now, we need to bind chartTypes to the drop down. In AngularJS, we can bind options to a drop down using ngOptions. We also need to bind chartType to the selected value in the drop down, and for that we use ngModel. So, add attributes named ng-options and ng-model to the drop down, as shown below.

<select id="chartType" ng-model="chartType" ng-options="c.typeName for c in chartTypes">
</select>

ng-options iterates over the values in chartTypes and binds each typeName to the drop down. Before running the node server, we need to modify the ng-controller value such that it is attached to the body element. The resulting index.html file is shown below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="css/app.css" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body ng-controller="MyCtrl1">
    <div g-chart></div>
    <select id="chartType" ng-model="chartType" ng-options="c.typeName for c in chartTypes">
    </select>
    <div>Angular seed app: v<span app-version></span></div>

    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>
  </body>
</html>

Next, start the node server using the following command.

node scripts/web-server.js

By navigating to http://localhost:8000/app/index.html you should see the pre-populated drop down list.

Changing the Chart Type

We’re going to use ngChange to render our chart based on the section in the drop down list. Inside controllers.js define another $scope variable as shown below.

$scope.selectType = function(type) {
  $scope.chart.type = type.typeValue;
}

We also want to set the default chart type:

chart.type = $scope.chartTypes[0].typeValue;

After adding ng-change to the select element, it should look like this:

<select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeName for c in chartTypes">
</select>

Changing the chart type causes the $scope.chart.type

variable to be udpated. This change should be watched so that the chart changes accordingly. For that we have some thing called $scope.$watch, which watches for a change in the $scope. In directives.js, wrap the link callback, inside $scope.$watch as shown below.

link: function($scope, elm, attrs) {
  $scope.$watch('chart', function() {
    var chart = new google.visualization.LineChart(elm[0]);

    chart.draw($scope.chart.data, $scope.chart.options);
  }, true);
}

This change causes every change to $scope.chart to trigger the callback function. Inside the $scope.$watch callback function, we need to check for $scope.chart.type and create a chart object accordingly. Modify the gChart directive in directives.js as shown below.

.directive('gChart',function() {
  return {
    restrict: 'A',
    link: function($scope, elm, attrs) {
      $scope.$watch('chart', function() {
        var type = $scope.chart.type;
        var chart = '';

        if (type == '1') {
          chart = new google.visualization.LineChart(elm[0]);
        } else if (type == '2') {
          chart = new google.visualization.BarChart(elm[0]);
        } else if (type == '3') {
          chart = new google.visualization.ColumnChart(elm[0]);
        } else if (type == '4') {
          chart = new google.visualization.PieChart(elm[0]);
        }

        chart.draw($scope.chart.data, $scope.chart.options);
      },true);
    }
  };
});

Now, when you select a different chart type from the drop down, the chart is updated.

Conclusion

In this tutorial, we implemented a drop down list and bound it using Angular’s two-way data binding. In our next tutorial, we’ll focus on adding some more features and bootstrapping the app to give it a feel good look. In the meantime, the code is available on GitHub, and a live demo is hosted on Heroku.

Frequently Asked Questions (FAQs) about Creating Visualization App using Google Charts API and AngularJS

How can I integrate Google Charts API with AngularJS?

Integrating Google Charts API with AngularJS involves a few steps. First, you need to include the Google Charts library in your HTML file. Then, you need to load the Google Charts package in your AngularJS controller. After that, you can use the Google Charts methods to create charts. You can bind the chart data to your AngularJS scope variables and use them in your HTML file to display the charts.

Can I use Chart.js instead of Google Charts API with AngularJS?

Yes, you can use Chart.js with AngularJS. Chart.js is a powerful and flexible charting library that can be used with AngularJS to create beautiful and interactive charts. You can use the angular-chart.js directive to integrate Chart.js with AngularJS. This directive provides a simple way to bind Chart.js charts to AngularJS data.

How can I customize the appearance of my charts?

Google Charts API provides various options to customize the appearance of your charts. You can change the colors, fonts, gridlines, and other aspects of your charts. You can also add labels, tooltips, and legends to your charts. These options can be specified in the options object when you create a chart.

Can I use Google Charts API with other JavaScript frameworks?

Yes, Google Charts API can be used with other JavaScript frameworks like React, Vue.js, etc. You just need to include the Google Charts library in your project and use the Google Charts methods to create charts.

How can I handle dynamic data with Google Charts API and AngularJS?

You can handle dynamic data with Google Charts API and AngularJS by using the $watch method of AngularJS. This method allows you to monitor changes in your scope variables and update your charts accordingly. You can also use the ng-change directive to update your charts when the user changes the input data.

How can I add interactivity to my charts?

Google Charts API provides various events and methods to add interactivity to your charts. You can use these events and methods to handle user interactions like click, hover, etc. You can also use the chartWrapper and chartEditor classes to create interactive charts.

Can I use Google Charts API with AngularJS to create real-time charts?

Yes, you can use Google Charts API with AngularJS to create real-time charts. You just need to update your scope variables with the real-time data and the charts will be updated automatically.

How can I export my charts as images or PDF?

Google Charts API provides the getImageURI method to export your charts as images. You can use this method to get the data URL of your charts and then use it to create an image or PDF.

Can I use Google Charts API with AngularJS to create dashboards?

Yes, you can use Google Charts API with AngularJS to create dashboards. You can use the dashboard and control classes of Google Charts API to create interactive dashboards. You can also use the angular-google-chart directive to create dashboards with AngularJS.

How can I handle errors and exceptions with Google Charts API and AngularJS?

You can handle errors and exceptions with Google Charts API and AngularJS by using the $exceptionHandler service of AngularJS. This service allows you to catch unhandled exceptions and handle them in a centralized place. You can also use the onError event of Google Charts API to handle chart-specific errors.

Creating a Visualization App Using the Google Charts API and AngularJS – Part 3