>

Let's make a bar chart with an angular directive and distribute it with npm.

Overview

Here is a simple barchart directive with awful css based on a blog post about d3 called Let’s Make a Bar Chart by Mike Bostock.

It is a basic excercise to demonstrate one way to distribute client side angular directives as node modules.

This blog uses npm, the node package manager to install and browserify to require the module into the local javascript.

For a more thorough treatment, please see this blog post by Kyle Young on Using npm on the client side.

The code is available on github from this repository.

For for expediency's sake, the css is distributed inside the directive's template, which is not optimal. There is no generally accepted method to bundling style with npm, but there are some options.

Portland neighborhoods by count of heritage trees

Usage

Install using npm.

        
          npm install angular-chart-components --save

Require the module in your code and list it as a dependency.

        
          var chartComponents = require('angular-chart-components');
          var module = angular.module('myApp', [
            'ChartComponents.barchart'
          ]);

Use the barchart directive in your markup with some inline data.

        
          <barchart data="[
             {value: 28, label: 'IRVINGTON'},
             {value: 16, label: 'SELLWOOD-MORELAND IMPROVEMENT LEAGUE'},
             {value: 13, label: 'NORTHWEST DISTRICT'},
             {value: 12, label: 'HILLSDALE'},
             {value: 12, label: 'GOOSE HOLLOW'},
             {value: 11, label: 'SOUTHWEST HILLS'},
             {value: 11, label: 'MT. TABOR'},
             {value: 10, label: 'LAURELHURST'},
             {value: 10, label: 'OVERLOOK'},
             {value: 10, label: 'HOSFORD-ABERNETHY'},
             {value: 9, label: 'WOODSTOCK'},
             {value: 8, label: 'RICHMOND'}
           ]"></barchart>

Use the barchart directive in your markup with some data on a controller.

        
          <barchart data="items"></barchart>
        
      
        
          $scope.items = [
            {value: 28, label: 'IRVINGTON'},
            {value: 16, label: 'SELLWOOD-MORELAND IMPROVEMENT LEAGUE'},
            {value: 13, label: 'NORTHWEST DISTRICT'},
            {value: 12, label: 'HILLSDALE'},
            {value: 12, label: 'GOOSE HOLLOW'},
            {value: 11, label: 'SOUTHWEST HILLS'},
            {value: 11, label: 'MT. TABOR'},
            {value: 10, label: 'LAURELHURST'},
            {value: 10, label: 'OVERLOOK'},
            {value: 10, label: 'HOSFORD-ABERNETHY'},
            {value: 9, label: 'WOODSTOCK'},
            {value: 8, label: 'RICHMOND'}
          ];