0

I'm trying to draw an arc element using numbers (or coordinates) coming from a 2D array.

Imagine that the arc is like a clock that supposed to show up only in times of the day I declare.

For example: imagine "1" turns the arc on, and "0" turns it off. So you get this array:

1 | 16:00     
0 | 16:45

in these example i would like to see the arc "paints" the circle only for 45 minutes of the day.

Can someone please show me any example of how to do that????

AllInOne
  • 1,450
  • 2
  • 14
  • 32
user3707650
  • 11
  • you should probably start by picking a javascript graphics library, related: http://stackoverflow.com/questions/119969/javascript-chart-library – AllInOne Aug 12 '14 at 20:33
  • I didn't understand your comment... – user3707650 Aug 12 '14 at 22:15
  • If I were going to draw something, anything, using javascript, I'd want to start by selecting a javascript drawing library. What you are basically describing sounds a lot like a pie chart. I'd start by looking at existing solutions for drawing pie charts. I gave you a link to a thread where some of these are compared. My only experience is with Google Charts: https://developers.google.com/chart/ I expect you could use it to accomplish your drawing. – AllInOne Aug 12 '14 at 22:45

1 Answers1

1

Just use a canvas object and arc() will fill() to draw your arcs:

ctx.fillStyle = "#22dd22";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 50, startRads, endRads);
ctx.moveTo(100, 100);
ctx.fill();

Do a little math on your times to convert them to radians:

var time = timetext.split(/\:/);
var secs = 0;
while(time[x] != null) {
    secs += parseInt(time[x])*(3600/Math.pow(60,x));
    x++;
}
var radians = ((secs/21600) - 0.5) * Math.PI;

And of course some logic to determine which entries start/stop your arcs.

Demo (with some jQuery): http://jsfiddle.net/jtbowden/aqzbdhe3/

Jeff B
  • 29,943
  • 7
  • 61
  • 90