Angular Spider graph – Dynamic, Interactive Spidergraphs in HTML5

March 12th, 2017 . 2 minutes read
Blog featured image

Creating dynamic, interactive angular spider graph in HTML5

Angular spider graph is a directive library module that creates nice looking, interactive spider graphs 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 spider graphs 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 can use spider graphs:

Minimum use of spidergraphs:

Include https://github.com/jmstriegel/jquery.spidergraph jquery spider graph then

Download it from here or download via browser

angular spider graph

Include the module in your app like

First, make a div to contain your graph:

in your controller set active data

There is two way binding in model activeData That’s it.

Advanced uses of spidergraphs:

Change grid color in controller

In view

Changing configuration for active data=

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 an array. Here only data is a compulsory parameter.

Fork this on Github :


If you need anything to discuss on this topic then ask in comment box.

Hope you enjoyed this post so don’t forget to share with friends.

Author: morwal89