Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Jonnie Spratley, who currently works for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products, and teaches a variety of programming courses at AcademyX. Check out his earlier AngularJS Directives: Using HTML5 Web Speech post.

For this post we are going to choose a very good HTML5 Canvas charting library. It goes by the name of ChartJS, and it has many charts that are very easy to use.

Step 1 – Get Started

Let’s jump in and get started.

1. Installing Yeoman

The installation is pretty straight forward – the official build script does all of the hard work for you.

To install yo, grunt, and bower, execute the following command:

If you run into installation issues, please visit the Getting Started Wiki for help.

2. Installing Generators

Before development we need to install a generator. Since we are going to use the AngularJS framework, install the AngularJS Component Generator.

Execute the following:

Now you’ll be able to scaffold an Angular component project.

For documentation and how to create custom generators please visit the wiki.

Step 2 – Create the project

Proceed to create your project folder and then cd into that directory.

Now, use Yeoman to create your project files, executing the following:

Then proceed to answer a few questions about your project.

For distribution, register the new project with Bower (a web library package manager), executing the following:

Now the component is available to the world via the bower package manager, and can be installed:

Now any other project can use this component.

Step 3 – Development

To create a directive with AngularJS, it is best to create a module for the directive, then attach the directive definition to your module instance.

This allows users of the component to easily include the required scripts and declare the component in the existing application’s dependencies array.

3.1 – Module Definition

To define the module, use the angular.module() method to create a module instance. In this case the variable _app is the components module.

The angular.module is a global method for creating, registering and retrieving Angular modules.

  1. When passed two or more arguments, a new module is created.
  2. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.

All modules that should be available to an application must be registered using this method.

3.2 – Directive Definition

The directive definition is a function that returns an object with all of the properties set.

3.3 – Link Function

This is the function that wires up the model to the template and builds the chart that is now in the display. If there is no model, then just return and stop execution, instead of causing an error and halting the entire application.

a. Static variables

We need to setup some variables to hold information about the chart such as the id, options, type and data. Also, we need to deal with trying to resize the chart while a resize is already in progress:

b. Resizing the chart

When the brower is resized, we are going to update the chart’s height and width because the chart needs to be redrawn.

c. Create the chart

The createChart method takes a number of arguments to create a chart instance then returns that instance:

d. Build the chart

The buildChart method waits 500 ms before invoking the createChart method, which actually does the chart initializing.

e. Render the chart

The ngModel.$render method is ised to specify how the UI needs to be updated when the model changes. In this case, we invoke the buildChart method to re-initialize the chart:

f. Watch the window

Attach an event listener to the window for a resize event, then if the timeout is false, set the timeout variable to true and call the setTimeout function, passing the resizeend method with the delta.

g. Watch the type

The attrs.$observe method allows for watching when values change. In this case the type we are listening to and building the chart with come from the dynamic type set:

h. Watch the data

Watch the data attribute and update the chart when changes occur:

How to Use

This is how to use this directive in your application:

1. Download or Use Bower

Download the production version or the development version.

Or use bower package manager:

2. Add Dependency

In the index.html page:

In the app.js file add jonniespratley.ngChartjsDirective to the dependencies:

3. Add Markup

Now add the following markup to your view:

4. Add Configuration

Now add the configuration inside of your controller:


The code is available on github for any suggestions, and an example is available on plunkr.


Be sure to look at the AngularJS resources that you can find in Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Developing an AngularJS Edge is intended for intermediate JavaScript programmers. No attempt has been made to explain the JavaScript syntax used (except in the cases where AngularJS may introduce a peculiarity), nor do we explain concepts such as closures, function chaining, callbacks, or other common patterns. What we do explain are basic AngularJS concepts, components, and their applications. We provide examples along the way, answer questions, and correct common misconceptions. Together, we’ll build a working single-page weblog application using AngularJS, which will help you become proficient with using AngularJS to go out and create your own applications.
Develop smaller, lighter web apps that are simple to create and easy to test, extend, and maintain as they grow. AngularJS is a hands-on guide that introduces you to AngularJS, the open source JavaScript framework that uses Model–view–controller (MVC) architecture, data binding, client-side templates, and dependency injection to create a much-needed structure for building web applications.
Instant AngularJS Starter is designed to get you ramped up on AngularJS as quickly and efficiently as possible. By the end of this book, you’ll possess all of the knowledge you need to make full-featured, real-life applications with AngularJS. The code samples are reusable, and specifically intended to give you a head start on your next project. This book will transform your curiosity about AngularJS into a set of production-ready AngularJS skills, through a broad overview of the framework and deep dives into its key features.

About the author

jonnie Jonnie Spratley is currently working for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products. He also teaches a variety of programming courses at AcademyX, and can be reached at @jonniespratley.

Tags: AngularJS, Bower, Canvas, ChartJS, Components, Generators, Grunt, html5, Yeoman, Yo,

Comments are closed.