This time I will share jQuery Plugin and tutorial about Dynamic Customizable Radar Chart In JavaScript – jQuery radarGraph.js, hope it will help you in programming stack.
radarGraph.js is a small jQuery plugin which dynamically renders a customizable, canvas-based radar chart (radar graph, radar diagram) with legends from JavaScript objects.
How to use it:
1. Put the latest version of the jQuery radarGraph plugin after jQuery slim build.
2 |
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" |
3 |
crossorigin="anonymous"> |
5 |
<script src="radarGraph.min.js"></script> |
2. Create an empty canvas element on which you want to draw the radar chart.
1 |
<canvas id="example" width="300" height="300"></canvas> |
3. Call the function on the canvas element and override the default chart data.
02 |
$('#example').radarGraph({ |
11 |
'0':{'name':'thing1','score':[20,15,15,16.6], 'color':'red'}, |
12 |
'1':{'name':'thing2','score':[17,15,15,15.6], 'color':'blue'}, |
13 |
'2':{'name':'thing3','score':[20,25,20,21.6], 'color':'green'}, |
14 |
'3':{'name':'thing4','score':[25,15,25,21.6], 'color':'purple'}, |
4. Customize the number of lines and rings to draw on the radar chart.
1 |
$('#example').radarGraph({ |
5. Set the maximum score. Default: 25.
1 |
$('#example').radarGraph({ |
6. Customize the ring color.
1 |
$('#example').radarGraph({ |
7. Customize the padding of the radar chart. Default: 25.
1 |
$('#example').radarGraph({ |
This awesome jQuery plugin is developed by modnar1226. For more Advanced Usages, please check the demo page or visit the official website.
