0

I want to look for tutorials for creating a graph like the one below, but i don't seem to know the name of such a graph. Image example

Can any one tell me the name of such a graph, or point me to tutorials i can check out.

Tatenda
  • 679
  • 2
  • 10
  • 24

1 Answers1

1

The kind of chart you have illustrated is more commonly referred to as a 'gauge', it shows progress towards some form of goal.

(as an aside, an axis in D3 is a visual rendering of a scale - so what you would want in this case is a scale, not an axis!)

Using D3 for this would be overkill. A simple ratio calculation will give you the 'size' of the filled section. You can then render this gauge as simple HTML with CSS to give you your rounded corners / fill.

ColinE
  • 68,894
  • 15
  • 164
  • 232
  • thank you. Is it all possible to show me an example on a fiddle of the code i can write for something like that using the simple technique of css and html? – Tatenda Jul 16 '15 at 15:34