Creating a bar graph using AngularJS

The first example will create a reusable bar chart component to demonstrate creating an AngularJS directive with an underlying controller. This is implemented within an HTML file, 01_just_bars.html, which consists of the following components:

  • The AngularJS application object: This functions as an entry point for AngularJS code in the page (that is, in app.js)
  • An AngularJS controller (in controllers/basic_dashboard.js): This creates the data and sends it to the directive that renders the HTML code for the graph
  • The directive: This renders the D3.js bar chart in directives/bars.js.

The web page and application

The AngularJS application is presented to the user via a web page, which begins by loading the AngularJS ...

Get D3.js: Cutting-edge Data Visualization now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.