https://github.com/morwalz/angular.spidergraph
A directive library for interactive HTML5,jquery spider graph Angular module
https://github.com/morwalz/angular.spidergraph
angular graph jquery-spider-graph spider spiderchart
Last synced: about 2 months ago
JSON representation
A directive library for interactive HTML5,jquery spider graph Angular module
- Host: GitHub
- URL: https://github.com/morwalz/angular.spidergraph
- Owner: morwalz
- Created: 2015-03-29T10:18:18.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-03-29T14:53:49.000Z (about 11 years ago)
- Last Synced: 2026-01-23T09:16:39.842Z (2 months ago)
- Topics: angular, graph, jquery-spider-graph, spider, spiderchart
- Language: JavaScript
- Homepage: http://morwalz.github.io/angular.spidergraph/
- Size: 500 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Angular Spidergraph - Dynamic, interactive spidergraphs in HTML5
========================================================================
Angular spidergraph is a directive library module that creates nice looking, interactive spidergraphs in HTML5, using the canvas element.
It is using https://github.com/jmstriegel/jquery.spidergraph internally.
For more information visit https://github.com/jmstriegel/jquery.spidergraph
What are spidergraphs good for?
---------------------------------
- illustrating scaled quantitative data for several subjective attributes
- overlaying multiple data measurements for attribute comparison
- visualizing the intersection of several data measurements
How do I use it?
----------------
Minimum use:
----------------
Include https://github.com/jmstriegel/jquery.spidergraph jquery spider graph then
Download it from here or download via bower
```
bower install angular-spider-graph
```
angular spider graph
Include the module in your app like
```
angular.module('myApp', ['morwal.spiderGraph'])
```
First make a div to contain your graph:
```
```
in your controller set active data
```
$scope.labels =[ "Designing", "Coding", "Cycling", "Running"];
$scope.activeData = [0,1,4,0];
```
There is two way binding in model activeData
Thats it.
Advanced uses
----------------
Change grid color
in controller
```
$scope.gridColor='rgba(20,20,20,0.2)'
```
In view
```
```
Changing configurtion for active data=
```
$scope.activeConfig={
'strokecolor': 'rgba(0,204,230,0.8)',
'fillcolor': 'rgba(0,204,230,0.6)',
'linear':true
};
```
It is options to set these parameters. linear is default true. You can set it to false on need.
```
```
Add static layers to your data set. Opacity can be used to see through multiple layers.
```
```
This model will be array. Here only data is complusary paramater.
```
$scope.layers=[
{
'strokecolor': 'rgba(230,204,0,0.8)',
'fillcolor': 'rgba(230,204,0,0.6)',
'data': [5, 4, 9, 8, 1]
}
];
```
Can I see an example?
-----------------------
Yes you can. Right over here:
Who created this
-----------------------
Shankar Morwal (https://github.com/morwalz)