0

Attaching with this a screen grab from strapfork.com. (If you scroll slightly below on the strapfork.com page, in the stats, you'll see circular arc the colored portion of which is in proportion to the number.) How to build a widget like that?

They are using some kind of javascript it seems but, I can't figure out how to replicate same.

Image from strapfork

zsaat14
  • 1,110
  • 2
  • 10
  • 20
Grishma U
  • 767
  • 1
  • 7
  • 13
  • Probably with the canvas element, SVG, or a combo. – j08691 Jan 29 '14 at 16:10
  • 2
    Take a look http://jsfiddle.net/Moritur/FTqkG/4/ – Yuriy Galanter Jan 29 '14 at 16:12
  • 1
    You can also refer to this question, http://stackoverflow.com/questions/21205652/how-to-draw-a-circle-sector-in-css. – Josh Powell Jan 29 '14 at 16:13
  • @YuriyGalanter this looks good, but, it (the size of colored arc) needs to be in proportion to the percentage, is there a single number in the css which can be changed to make it proportional? – Grishma U Jan 29 '14 at 16:19
  • @GrishmaU You could try using the calc function to work out the angles of rotation based on percentage. https://developer.mozilla.org/en-US/docs/Web/CSS/calc NOTE: I've never tried the calc functionality before so can't vouch for it's effectiveness. – aaron-bond Jan 29 '14 at 16:31
  • 1
    Use SVG for graphical stuff like this. It can be done with pure HTML+CSS, but there are limits to what CSS can do; use SVG instead and you'll thank yourself later when you need to make a minor change that would be really difficult in CSS. – Spudley Jan 29 '14 at 16:37
  • @Spudley Actually, I would prefer a javascript solution, HTML+CSS as you correctly pointed out has limits. SVG means I have to stop supporting ie8 – Grishma U Jan 29 '14 at 16:40
  • 1
    Any solution (including SVG) would probably involve javascript as well. Most other options also mean dropping IE8 support. The best I can suggest is the [Raphael library](http://raphaeljs.com/), since that does use SVG but also supports old IE as well. – Spudley Jan 29 '14 at 16:49
  • @Spudley Raphael library might just work, thanks :) – Grishma U Jan 29 '14 at 17:16

1 Answers1

1

Same as Spudley's comment : Raphael does the job and it works even on older browsers (IE7 ...)

A little bit of trigonometry and the Raphael Path object are what you need. Try the code below as an example:

HTML :

<div id="mytest"></div>

JS :

var paper = Raphael('mytest', 500, 400);

var background = paper.rect(0, 0, 500, 400, 0);
background.attr("fill", "#ffffff").attr("stroke", "none");

var centerX = 200, centerY = 200, Radius = 100, percent = 95;
// change the percent value between 0 and 100

var startArcX = centerX + Radius * Math.cos(Math.PI/2);
var startArcY = centerY - Radius * Math.sin(Math.PI/2);

var endArcX = Math.round(centerX + Radius * Math.cos(Math.PI * (0.5 - 0.02 * percent)));
var endArcY = Math.round(centerY - Radius * Math.sin(Math.PI * (0.5 - 0.02 * percent)));

var bigArc = (percent>50)?1:0;

var directionDrawing = 1;

var stringPath = 'M' + startArcX.toString() + ',' + startArcY.toString() 
               + ' A' + Radius.toString() + ',' + Radius.toString() 
               + ' 0 '
               + bigArc.toString() + ',' + directionDrawing.toString() + ' '
               + endArcX.toString() + ',' + endArcY.toString();



var path1 = paper.path(stringPath);
path1.attr("stroke", "#ff0000").attr("stroke-width", "20px");
Naypa
  • 182
  • 6