O'Reilly logo

D3.js By Example by Michael Heydt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required