Skip To Content
Back to Blog

Introducing Angular-Dimple


by Paul Pederson


At the office, AngularJS has become an indispensable part of our tech stack for internal projects. If you're not familiar with Angular, it's a terrific framework for creating JavaScript apps. Angular helps you write quickly by doing a lot under the hood like two-way data binding and other application logic.

One of the best parts of Angular, though, is the directive. Directives are reusable views that allow you to use custom html much like the web components spec. Angular ships with a wide range of directives built in for things like click handling, iteration, and animation. You can also write your own directives. This allows you to create reusable components that are called in a very declarative way.

What is Angular Dimple?

Angular-Dimple is a set of Angular directives for making graphs and charts with a D3-based data-visualization and analytics library called Dimple. Essentially, if you're using Angular already, all you need to do to show a graph of some data in your application is include Angular-Dimple in your app and use the <graph> element.

A Basic Example

Let's say you have some sales data from several different stores you manage over the past few months that looks something like this:

[
  {
    "Month": "Jan-11",
    "storeId": 1,
    "Sales": 14
  },{
    "Month": "Feb-11",
    "storeId": 1,
    "Sales": 14
  },{
    "Month": "March-11",
    "storeId": 1,
    "Sales": 17
  },{
    "Month": "Jan-11",
    "storeId": 2,
    "Sales": 14
  },{
    "Month": "Feb-11",
    "storeId": 2,
    "Sales": 16
  },{
    "Month": "March-11",
    "storeId": 2,
    "Sales": 8
  }
]

After you include links to d3.js and dimple.js in your html, you can add Angular-Dimple along with all the other modules in your app like this:

angular.module('myApp', [
  'angular-dimple',
  'myApp.controllers',
  '...'
]);

Then, in your controller, just set the data to a variable in your $scope like this:

angular.module('myApp.controllers', [])

.controller('appController', ['$scope', function($scope) {
  $scope.graphData = [ //all your data here ]
}]);

After that, start declaring some graphs!

<div ng-controller="appController">
    <graph data="graphData">
      <x field="Month"></x>
      <y field="Sales"></y>
      <stacked-area field="storeId"></stacked-area>
    </graph>
</div>

Checkout the GitHub repo and the project site for more information.