ui-dv v1.0.4
##UI-DV
####What is it?
UI-DV is an angular data visualization library. It has pre-set directives for various graphs (bar, dot, circle bar, pie chart) that are extensive and configurable for easy injection into your app.
####Installation & Setup:
Run npm install ui-dv and inject "ui-dv" as a dependency into your angular app. Don't forget to include the script tag for ui.dv.js in your html.
####Documentation:
Every directive has the following basic attributes: data, fcn, and options.
- Data is an array - the elements can be simply numbers, or they can be objects with number and string properties. It does not matter what you call the keys for the objects, but one value has to be a string and the other a number. The strings will be used as labels on the graph.
data = [1,2,3,4] || [{name: 'one', value: 1}, {name: 'two', value: 2}]- Fcn is a function - this function will be wired as an ng-click for each data element. It will receive the element itself as well as its index in the array.
- Options is an object - the available options slightly vary depending on the directive. Refer to the options section below for details.
- Bar, dot, and circle graphs take a width and height, while the pie chart takes a radius.
Example directive:
$scope.data = [1,2,3,4];
$scope.running = function() {
console.log('running');
}
$scope.options = {sideways: true};
<bar-graph width="100" height="100" data="data" fcn="running" options="options"></bar-graph>#####Options:
Options are optional - if not provided then default settings will apply. The following table provides a detailed description of what each option does and the type of data it receives:
| Option | Description |
|---|---|
| barcolor, dotcolor, piecolor, textcolor | Receives an array of colors/hex codes as strings. It can be any length - if shorter than the data set, it will automatically be repeated over. If not provided, the default blue color will be applied |
| bg | Receives an image url (string) to be used as the background of the graph |
| bg_dot | Receives an object with icon and size properties to set the background of the dots in the dot graph. Example: {icon: (url), size: (number)} |
| datafont, fontsize, labelfont | Receives a number to set the font size |
| factor | Receives a number to scale the font up by |
| inner | Receives a number to set the inner circle radius where the labels are |
| label | Receives a boolean to display or hide the labels |
| labelmargin | Receives a number to set the margin between the labels and the graph |
| sideways | Receives a boolean to set the graph sideways or normal |
Example:
options = {
barcolor: ['black', '#fff', 'blue'],
bg_dot: {
icon: 'http://myimage.png',
size: 10
},
datafont: 20,
sideways: true
};The following table details out exactly what options each graph type takes:
| Graph Type | Options | Image |
|---|---|---|
| Bar | barcolor, textcolor, bg, sideways, labelfont, labelmargin, datafont |  |
| Dot | dotcolor, textcolor, bg, bg_dot, labelfont, labelmargin, datafont |  |
| Circle | barcolor, textcolor, inner, label, fontsize |  |
| Pie | piecolor, textcolor, factor |  |
####Author: