1

I've been tasked with trying to build the example shown below. I'm having trouble drawing the curved line and filling it in according to a range of given data. I was trying to do it by using a div within a div but then I realized that there isn't a way to bend the div to look like the example, therefore I think SVGs are the way to go. What are the svg path coordinates to draw this and how do I fill it in with Javascript according to a range of given data? I will be making this a React component which accepts the data through props. I don't need help coding it up in React but I do need help getting this first part started.

[Example of what I'm trying to make]

MC10
  • 552
  • 1
  • 12
  • 26
Ben
  • 33
  • 1
  • 3
  • Unfortunately I can't see Imgur images – Chris B. Jan 02 '20 at 20:17
  • It looks like something similar was done here: https://stackoverflow.com/a/47910783/3417978 – MC10 Jan 02 '20 at 20:17
  • You can do it with a SVG circle and a `strokeDashoffset`. Like in the following [Sandbox](https://codesandbox.io/s/oow93n58pz). – AWolf Jan 02 '20 at 20:29
  • This is an very common question. There are numerous examples on stack overflow. Search for "circular progress bar". I'm going to close this question with one example answer chosen at random. But there are *many* others to choose from. – Paul LeBeau Jan 03 '20 at 10:36

1 Answers1

1

As you said you're only looking for help getting started, you should have a look here:

http://xahlee.info/js/svg_circle_arc.html

Basically, what you want to draw is a circle arc. You could use SVG or a canvas.

From the link above, here is a JS code that draw a circle arc:

const cos = Math.cos;
const sin = Math.sin;
const π = Math.PI;

const f_matrix_times = (( [[a,b], [c,d]], [x,y]) => [ a * x + b * y, c * x + d * y]);
const f_rotate_matrix = ((x) => [[cos(x),-sin(x)], [sin(x), cos(x)]]);
const f_vec_add = (([a1, a2], [b1, b2]) => [a1 + b1, a2 + b2]);

const f_svg_ellipse_arc = (([cx,cy],[rx,ry], [t1, Δ], φ ) => {
/* [
returns a SVG path element that represent a ellipse.
cx,cy → center of ellipse
rx,ry → major minor radius
t1 → start angle, in radian.
Δ → angle to sweep, in radian. positive.
φ → rotation on the whole, in radian
url: SVG Circle Arc http://xahlee.info/js/svg_circle_arc.html
Version 2019-06-19
 ] */
Δ = Δ % (2*π);
const rotMatrix = f_rotate_matrix (φ);
const [sX, sY] = ( f_vec_add ( f_matrix_times ( rotMatrix, [rx * cos(t1), ry * sin(t1)] ), [cx,cy] ) );
const [eX, eY] = ( f_vec_add ( f_matrix_times ( rotMatrix, [rx * cos(t1+Δ), ry * sin(t1+Δ)] ), [cx,cy] ) );
const fA = ( (  Δ > π ) ? 1 : 0 );
const fS = ( (  Δ > 0 ) ? 1 : 0 );
const path_2wk2r = document. createElementNS("http://www.w3.org/2000/svg", "path");
path_2wk2r.setAttribute("d", "M " + sX + " " + sY + " A " + [ rx , ry , φ / (2*π) *360, fA, fS, eX, eY ].join(" "));
return path_2wk2r;
});
Scalpweb
  • 1,971
  • 1
  • 12
  • 14