Skip to content
This repository has been archived by the owner on Jun 14, 2022. It is now read-only.

Angular Dimple is a series of Angular directives that help you create graphs and visualizations based on Dimple.js and d3. It's designed to create graphs as simply as possible from flat JSON data

Notifications You must be signed in to change notification settings

danielmcquillen/angular-dimple

 
 

Repository files navigation

Angular Dimple

A simple angular library wrapping dimple charts as angular directives.

Install

Manual

To get setup, simply:

  1. Make sure you have d3 and dimple
  2. Download the minified javascript in dist
  3. Include the library as a module in your app

Bower

bower install angular-dimple

Use

All the angular directives behave in pretty much the same way. Simply use the directive, passing in a model from your scope as the data= attribute.

For example, in the controller for your app, if you had something like $scope.graphData which is json that looks 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
  }
]

You'd set up a line-graph like this:

<graph data="graphData">
  <x-axis field="Month"></x-axis>
  <y-axis field="Sales"></y-axis>
  <line field="storeId" value="2"></line>
  <line field="storeId" value="1"></line>
</graph>

This would give you a line graph with an x-axis of "Month", a y-axis of "Sales" and two lines, each corresponding to a different store from your dataset.

Passing a line tag with a field and no value will draw a line on the chart for each unique value for that field in your data. So you could plot a line for each unique storeId without having to specify them all by name like this:

<graph data="graphData">
  <x-axis field="Month"></x-axis>
  <y-axis field="Sales"></y-axis>
  <line field="storeId"></line>
</graph>

Line Graphs

<graph data="graphData">
  <x-axis field="Month"></x-axis>
  <y-axis field="Sales"></y-axis>
  <line field="storeId" value="2"></line>
  <line field="storeId" value="1"></line>
</graph>

Area Charts

<graph data="graphData">
  <x-axis field="Month"></x-axis>
  <y-axis field="Sales"></y-axis>
  <area field="storeId" value="2"></area>
  <area field="storeId" value="1"></area>
</graph>

Stacked Area Charts

<graph data="graphData">
  <x-axis field="Month"></x-axis>
  <y-axis field="Sales"></y-axis>
  <stacked-area field="storeId"></stacked-area>
</graph>

Bar Graphs

<graph data="graphData" orientation="horizontal">
  <x-axis field="Month"></x-axis>
  <y-axis field="Sales"></y-axis>
  <bar field="storeId" value="2"></bar>
  <bar field="storeId" value="1"></bar>
</graph>

Stacked Bar Graphs

<graph data="graphData" orientation="horizontal">
  <x-axis field="Month"></x-axis>
  <y-axis field="Sales"></y-axis>
  <stacked-bar field="storeId" value="2"></stacked-bar>
</graph>

Scatter Plot

Scatter plots require one extra field (series) to be passed through to the <scatter-plot> element. Let's say you have some data with heights and weights formatted like this:

[
  {
    "Height": 64,
    "Weight": 190
  },{
    "Height": 68,
    "Weight": 195
  },{
    "Height": 69,
    "Weight": 198
  },{
    "Height": 70,
    "Weight": 205
  },{
    "Height": 67,
    "Weight": 198
  },{
    "Height": 76,
    "Weight": 195
  }
]

Assuming you set that on your scope as $scope.scatterData, you can use the following directive to make a scatter plot:

<graph data="scatterData" width="100%" height="600px">
  <x field="Height" type="Measure"></x>
  <y field="Weight" type="Measure"></y>
  <scatter-plot field="Weight" series="Height" label="Group A"></scatter-plot>
</graph>
  • Note: the label attribute will make all the points the same color and title the group with that label in the legend if you have one.*

Contributing

  1. Fork & clone
  2. npm install
  3. grunt to run development environment
  4. Test with grunt test
  5. Open a pull request!

License

ISC

About

Angular Dimple is a series of Angular directives that help you create graphs and visualizations based on Dimple.js and d3. It's designed to create graphs as simply as possible from flat JSON data

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%