What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js

Consider a sequence of data along the following lines:

data = [{angle:1.2,value:1.2},...,{angle:355.2: value:5.6}]; 

I'd like to display this data on a radially scaled plot (i.e. circular bands indicating how high the value of each point is) to show angle vs value. Angles will change by a small but uncontrollable quantity for each data set but there will always be ~50 of them spaced fairly evenly around the chart.

It looks like chart.js has two options which don't quite fit the bill:

• A Radar plot which appears to require a label per point but without an obvious way to control where those labels are applied.
• An x-y scatter which I could calculate x/y co-ordinates for but which doesn't have the radial scale to help visualise the value of each point.

Is there a way to combine the two perhaps or some option I've missed to control them to achieve the result I'm looking for here?

Edit - for example, this shows the data but lacks a radial scale:

https://jsfiddle.net/7d7ghaxx/4/

**Edit2 - This is the sort of thing I Would expect to see as a result:

2 Answers

Answers 1

You can use D3 js Charts is usefull for radar chart check the example link bellow :

//////////////////////////////////////////////////////////////          //////////////////////// Set-Up //////////////////////////////          //////////////////////////////////////////////////////////////           var margin = {top: 100, right: 100, bottom: 100, left: 100},             width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,             height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);          //////////////////////////////////////////////////////////////          ////////////////////////// Data //////////////////////////////          //////////////////////////////////////////////////////////////           var data = [                   [//Yourchart values                     {axis:"",value:0.052},                     {axis:"",value:0.052},                     {axis:"",value:0.012},                     {axis:"",value:0.012},                     {axis:"",value:0.022},                     {axis:"",value:0.052},                     {axis:"",value:0.052},                     {axis:"",value:0.021}                              ]                 ];         //////////////////////////////////////////////////////////////          //////////////////// Draw the Chart //////////////////////////          //////////////////////////////////////////////////////////////           var color = d3.scale.ordinal()             .range(["#6cbb69","#CC333F","#00A0B0"]);          var radarChartOptions = {           w: 500,           h: 300,            maxValue: 0.15,           levels: 5,           roundStrokes: true,           color: color         };         //Call function to draw the Radar chart         RadarChart(".radarChart", data, radarChartOptions); 

https://codepen.io/Nighamza/pen/bKmjGE

Answers 2

Demo & Code :

https://stackblitz.com/edit/js-jp4xm4?file=index.js

Explanation:

1. Added (wrote) a chartjs plugin that converts points from polar to cartesian on beforeUpdate so you don't have to worry about converting before every update
2. Made x & y grid (not axes through origin) hide by adding gridLines: { color: 'transparent' } and ticks: { display: false }
3. Made min and max (options in ticks) of both axes equal so that the orgin is at the center
4. Added a radialLinear scale for the polar grid

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati