We Keep Coding

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:

Demo & Code :
https://stackblitz.com/edit/js-jp4xm4?file=index.js
Explanation:
Used a scatter chart to plot points
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
Made x & y grid (not axes through origin) hide by adding gridLines: { color: 'transparent' } and ticks: { display: false }
Made min and max (options in ticks) of both axes equal so that the orgin is at the center
Added a radialLinear scale for the polar grid
(Update 1)
Added a tooltip label callback to show tooltip as (r,θ) instead of default (x,y)
(Update 2)
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.

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

leaflet - Calculate a rectangle coordinates from two midline points

I have a LineString geometry feature with weight in GeoJSON. Now I want to determine coordinates of 4 vertices of that rectangle. I know how to calculate on plane geometry by using line equation. But on geographic geometry, I'm new. I already read how to calculate one unit of latitude and longitude decimal degree as well as metres per pixel but I'm still confused how to add them to a given point to calculate wanted points. My problem is like this:
Given:
Broadth of rectangle
Coordinates of two points making the midline,
distance between these two points are equal to the width
Result: Coordinates of 4 vertices of rectangle
For example: Two point of LineString
A (10.767008,106.665884)
B (10.767715,106.667151)
Weight of LineString is 6 pixels at zoom level 18
I can calculate width of rectangle (distance between these two points), broadth of rectangle (number of metres per pixel, then multiply). How can I use them to calculate 4 vertices' coordinates of this rectangle?
All of my calculated cases are on small scale (part of one street of a city) so I think altitude can be excluded

It sounds like you want to get the "extent" of your linestring (a.k.a. the "bounding box" of your linestring). You can use turf.js' turf-extent function to get the extent of your GeoJSON linestring. That extent will be the rectangle you're looking for, as a GeoJSON polygon. You can then use other turf.js functions on that polygon to get the width, length, area, etc

Plotting a line chart with four quadrants

I am trying to create a line chart in using graphael. Both my x and y data have both positive and negative values. The way I am able to plot it now, the x and y axis end up intersecting and the least values in the arrays. For example, they could intersect at (-12,-12).
I want to create the plot such that the axis intersect at (0,0) to make a quadrant plot. Is it possible to do this using graphael?

After searching all over the web, I figured out out there is no option of achieving this in the library itself. I ended up drawing two extra lines for the X and Y axes to create a four quadrant graph.

maintain distance between axis ticks in d3 chart

I am trying to draw a chart using d3-js. I want X axis values to be [0.25yrs; 0.50yrs; 1yr; 2yrs; 5 yrs; 10yrs; 15yrs; 20yrs; 30 yrs; 50 yrs]. This can be done using d3's tickValues() & tickFormat() functions. But I need to maintain certain distance between 0.25, 0.50 & 1 year ticks, because most values belong to these years & more distance between them will reduce overlapping of drawn circles.
The tick position I need is something like :
You can see the distance between .01 and .02 in above image. How can we do that?

You will need to implement a custom scale that maps your input range to this non-uniform output range. Then you can give this scale to your axis and it will draw the ticks accordingly.
You could have a look at the scales that D3 provides if anything is close enough to what you want (a log scale maybe?), but if you can't find anything you have no choice but to implement your own.

How to provide x-axis and y-axis values in WebGL?

am trying to use WebGL to plot a 3D surface. My problem is that it is not letting me provide the x and the y values. It plots the z axis values against the values of x ranging from 0 to n and the values of y ranging from 0 to m (all integral values).
How can I make a surface where I can also provide the x and the y values for the 3D surface construction. Also if its not possible to do it in WebGL then what solution can I use?
PS Also, WebGL tooltip function doesnt function. any comments on that?

I'm guessing that you are saying that you can't specify the scale of x and y relative to the plotted (z) value?
What you need is to apply a non-uniform scale to the entire surface (the modelview matrix), so that the X and Y axes are stretched into the shape you want. Are you using three.js or a similar library, or... ? The answer will define the specific commands you should use.
As an example, let's say that you have a 100x50 plot, with the spacing forced by the library to 1.0 between x and y. Instead, you want the size to be 300x200 in x and y. You would scale the matrix by (3,4,1).
If you want to change the displayed range of your Z data, I would suggest adjusting its zero point (i.e., translating it up or down to be centered) and then scaling appropriately as-needed.