16

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:

enter image description here

Rishabh Shah
  • 541
  • 7
  • 28
Jon Cage
  • 36,366
  • 38
  • 137
  • 215

2 Answers2

8

Demo & Code :

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

Explanation:

  1. Used a scatter chart to plot points
  2. 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
  3. Made x & y grid (not axes through origin) hide by adding gridLines: { color: 'transparent' } and ticks: { display: false }
  4. Made min and max (options in ticks) of both axes equal so that the orgin is at the center
  5. Added a radialLinear scale for the polar grid

(Update 1)

  1. Added a tooltip label callback to show tooltip as (r,θ) instead of default (x,y)

(Update 2)

  1. Added (wrote) a beforeDraw plugin to fill the ctx with light blue color as the OP wanted

PS: (Pointing out just to be a little competitive) I have used chartjs (unlike other answers) because the OP wants a chartjs solution as it's clearly written in the question: "using chart.js". There might be solutions better than chartjs but that's irrelevant.

Devansh J
  • 4,006
  • 11
  • 23
  • Thanks for the help. Can you please help me in these below questions? I have taken reference of your example. 1) https://stackoverflow.com/questions/53011177/charts-js-plot-values-ticks-on-x-axis 2) https://stackoverflow.com/questions/53006335/charts-js-show-labels-outside-gridlines 3) https://stackoverflow.com/questions/52994989/chart-js-polar-scatter-plot-values-on-chart-and-x-axis – Rishabh Shah Oct 26 '18 at 18:13
6

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

HamzaNig
  • 1,019
  • 1
  • 10
  • 33