jQuery-radar-graph

Create a customizable radar graph with minimal code.

DEMO / JSFIDDLE: https://jsfiddle.net/ewvxonj3/

Normal version or .min available.

Step 1: Link the radarGraph.js file:

<script type="text/javascript" src="FILEPATH/TO/radarGraph.js"></script> 

Link to a separate js file: (Optional)

<script type="text/javascript" src="FILEPATH/TO/ANOTHER/JSFILE.js"></script> 

Or add script tags:

<script></script> 

Step 2: create a canvas element with an ID in an html file:

<canvas id="canvas1">This text would show if browser does not support canvas.</canvas> 

Step 3: Inside your custom js file or inside the script tags add the following at a minimun to test:

$(document).ready(function (){   $('#canvas1').radarGraph(); }); 

This should display an example graph to confirm that it works.

Step 4: To customize the graph to your needs, create an object to pass to the plug in.

// create obj var obj = {   // fill the shapes drawn or not default = false /boolean     polyfill: false   // how much indent margin you want around graph default = 25 int     borderOffset: 25,   // how many lines will be drawn on graph: default = 4 int     dataPoints: 4,   // how many rings will be drawn default = 5 int     levels: 5,   // maximum score to be used default = 25 int     maxValue: 25,   // array labels for the data points, default array length = 4      labels: [       'data point 1',       'data point 2',       'data point 3',       'data point 4',     ]   // object using numbered indexes for each person/ criteria you are graphing     chartData: {       // name = what you want to graph,       // score = an array of ints with a length equal to the dataPoints, default = 4,       // color = color that will be used for each obj index          {'0':{'name':'person1', 'score':[20,15,15,16.6],'color':'red'}     }  };