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

This tutorial demonstrates how to build a data visualization application using the Google Charts API and AngularJS, focusing on two-way data binding. Previous parts covered controllers and directives; this part explores how to dynamically change chart types via a dropdown menu.

Key Features:

• A dropdown menu lets users select chart types (PieChart, BarChart, ScatterChart, LineChart).
• AngularJS's two-way data binding automatically updates the chart's view when the model (selected chart type) changes.
• ngOptions and ngModel efficiently bind the dropdown options and selected value.
• ngChange and $scope.$watch dynamically rerender the chart based on user selection.

Implementing the Dropdown and Data Binding:

The dropdown is added to index.html as a <select></select> element. Instead of hardcoding options, we define chart types in controllers.js using an AngularJS approach:

<code class="language-javascript">$scope.chartTypes = [
  {typeName: 'PieChart', typeValue: '1'},
  {typeName: 'BarChart', typeValue: '2'},
  {typeName: 'ColumnChart', typeValue: '3'},
  {typeName: 'LineChart', typeValue: '4'}
];
$scope.chartType = $scope.chartTypes[0];</code>

The index.html <select></select> element uses ng-options and ng-model for data binding:

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

The ng-controller directive in index.html should be attached to the body element for proper functionality.

Dynamic Chart Updates:

The selectType function in controllers.js updates the chart type based on the dropdown selection:

<code class="language-javascript">$scope.selectType = function(type) {
  $scope.chart.type = type.typeValue;
};</code>

The gChart directive in directives.js uses $scope.$watch to monitor changes in $scope.chart and redraw the chart accordingly:

<code class="language-javascript">link: function($scope, elm, attrs) {
  $scope.$watch('chart', function() {
    var type = $scope.chart.type;
    var chart = '';

    // Conditional chart creation based on type
    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);
}</code>

Remember to start the node server (node scripts/web-server.js) and navigate to http://localhost:8000/app/index.html to see the application. The complete code is available on GitHub (link not provided, as it was not in the input).

Frequently Asked Questions (FAQs): (The FAQs section from the input has been omitted here to keep the response concise. The provided information sufficiently addresses the core functionality of the tutorial.)

The above is the detailed content of Creating a Visualization App Using the Google Charts API and AngularJS – Pt 3. For more information, please follow other related articles on the PHP Chinese website!