3

I have made this circular graph with the canvas. Canvas Circular Graph The green progress starts from 120 degrees clockwise and ends at 60 degrees clockwise. In canvas you do this with

context.arc(centerx, centery,radius, startangle, endangle, anticlockwise);

But I am finding it too dificult from the SVG. Can anyone tell me how to do it from svg. The reason why i like to do it from SVG is that when the progress is animated, the quality of the canvas degrades when the screen is zoomed. And by the way if you need a code for this i can give it to you. It is highly configurable:

Ujjwal Ojha
  • 1,340
  • 10
  • 17
  • Are you using any library to construct the SVG? Using SMIL from scratch for an `path` element could be a bit tricky. – musically_ut Dec 15 '13 at 10:40
  • I have not used any library! – Ujjwal Ojha Dec 15 '13 at 10:41
  • 1
    If the quality on canvas degrades you are doing something wrong. SVG will be converted to bitmap as well just like any shape drawn onto canvas so there is no difference here (except from bitmaps/images that are scaled). Please share the code you are using with canvas. It sounds as you are forgetting to clear the canvas for each frame or forgetting to use beginPath. –  Dec 15 '13 at 12:27
  • The quality degrades only when zoomed! – Ujjwal Ojha Dec 15 '13 at 15:04

1 Answers1

6

The arc command of canvas is pretty simple. But in SVG you have to use path to draw circular progress and it is a bit complex. The code for making progress is

<path d="M startx starty A radiusx radiusy x-axis-rotation large-arc-flag sweep-flag endx endy " />

The idea behind drawing the progress is that you have to draw a path that passes from the circumference of a circle which starts from specified angle and ends at specified angle. There is a mathematical formula for finding point in the circumference of circle which you can use to create path in svg

x = centerx + radius * Math.cos(anglein radians);
y = centery + radius * Math.cos(anglein radians);

To simplify things, i have found a function that calculates the path. You just have to write this:

progress(200, 200, 120, -150, 150);

The progress function takes the following parameters:

progress(centerx,centery,startangle,endangle);

This draws a full progress.If you want to change the progress change the end angle i.e decrease it.This is just the idea behind drawing circular path.

Here is the JSFiddle link

bring2dip
  • 886
  • 2
  • 11
  • 22