Line graph – joining the dots (responsive)

[grimski]

I have a mock up I’m working from which has a line graph/chart on it. This is purely presentational and doesn’t work off any data. You can see the idea here: http://tinypic.com/r/mn1cwl/8

I tried to put this together using CSS, it was simple enough to plot the points. I just set each dot as position:absolute; with a left value ranging from 0% – 100%. And also varying bottom values to get the ‘peak’ effect. Now, I thought I could use css rotating for the lines but this seems impossible as it is a responsive layout.

So I guess my question is how can I join the dots using javascript – or would something like Canvas be best?

Ideally I’d like the dots to fade in one by one (this is fine in the CSS) but how would I get the line to draw from 1 dot to the other?

Thanks for reading and I hope someone can shed some light or point me in the right direction of how to approach this.

Cheers,
Steve

[Paulie_D]

Exactly how would you like this to be responsive?

At best I can only assume that the whole thing would scale like an image..I’m assuming that you don’t want the graph to change height/width ratio?

[Soronbe]

No, the problem was that .offset() returns the coordinates of the upper left corner. But seeing the ball resizes, these wouldn’t be constant which sucks because I need the center. So now the ball resizes within the container and is centered within it so we can easily find the ball’s center through the container. This actually was the last bug I was talking about.

[Soronbe]

Half the height of the line is a nice estimate (which you used). I think you’d need to use cos(angle) and sin(angle) multiplied with half the width of the lines for the left and top respectively. I havn’t tested yet though. In my example the lines had a width of 1 px so I just neglected doing so.

[Author]

Posts