A simple angular library wrapping dimple charts as angular directives.
To get setup, simply:
- Make sure you have d3 and dimple
- Download the minified javascript in dist
- Include the library as a module in your app
bower install angular-dimple
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>
<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>
<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>
<graph data="graphData">
<x-axis field="Month"></x-axis>
<y-axis field="Sales"></y-axis>
<stacked-area field="storeId"></stacked-area>
</graph>
<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>
<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 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.*
- Fork & clone
npm install
grunt
to run development environment- Test with
grunt test
- Open a pull request!