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 By Example now with O’Reilly online learning.

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