An interactive HTML5 spider graph module for jQuery.
Switch branches/tags
Nothing to show
Clone or download
jmstriegel Merge pull request #3 from h0lyalg0rithm/patch-1
Fix broken div tag - merging from h0lyalg0rithm
Latest commit e8fbec5 Jun 18, 2013

jQuery Spidergraph Plugin - Dynamic, interactive spidergraphs in HTML5

jquery.spidergraph is a simple module that creates nice looking, interactive spidergraphs in HTML5, using the canvas element.

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?

First make a div to contain your graph:

    #spidergraphcontainer {
        width: 600px;
        height: 600px;
<div id="spidergraphcontainer"></div>

Apply the spidergraph and tell it what the data fields are. The spidergraph and labels will be drawn to fill the specified div.

    'fields': ['a','b','c','d','e'],
    'gridcolor': 'rgba(20,20,20,1)'

Add static layers to your data set. Opacity can be used to see through multiple layers.

$('#spidergraphcontainer').spidergraph('addlayer', { 
    'strokecolor': 'rgba(230,204,0,0.8)',
    'fillcolor': 'rgba(230,204,0,0.6)',
    'data': [5, 4, 9, 8, 1]
$('#spidergraphcontainer').spidergraph('addlayer', { 
    'strokecolor': 'rgba(230,204,230,0.8)',
    'fillcolor': 'rgba(230,204,230,0.6)',
    'data': [5, 4, 9, 8, 1]

Add a dynamic layer that allows mouse and iPad touch input to control the graph.

$('#spidergraphcontainer').spidergraph('setactivedata', { 
    'strokecolor': 'rgba(0,204,230,0.8)',
    'fillcolor': 'rgba(0,204,230,0.6)',
    'data': [5, 5, 5, 5, 5]

Respond to changes in user input on the active layer.

$('#spidergraphcontainer').bind('spiderdatachange', function( ev, data ) {
    alert( 'first field value is ' + data[0] );

Reset all of the data layers in the spidergraph.


If you wish to use a linear style layer (no curves), simply add attribute 'linear' with value true.

$('#spidergraphcontainer').spidergraph('addlayer', { 
    'strokecolor': 'rgba(230,204,230,0.8)',
    'fillcolor': 'rgba(230,204,230,0.6)',
    'data': [5, 4, 9, 8, 1],
    'linear': true

Can I see an example?

Yes you can. Right over here: