Treehouse: Grow your CSS skills. Land your dream job.

Line graph – joining the dots (responsive)

  • # July 28, 2014 at 2:31 am

    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

    # July 28, 2014 at 3:46 am

    Essentially this effect on-load but will work responsively?

    http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Graph-Animation/index.html

    Its the rotation of the lines that I can’t get as you need a pixel value for the degree in the CSS.

    # July 28, 2014 at 4:07 am

    So what exactly is the problem? How does the layout being responsive mess with the angle of the dots?

    # July 28, 2014 at 4:29 am

    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?

    # July 28, 2014 at 5:45 am

    @Soronbe on my first attempt I could line up the lines/dots but as soon as I resized the browser nothing lined up and the angle seemingly needed to change and possibly the line length. I’ll create a codepen.

    @Paulie_D that would be right, the height could be fixed if its easier – I’m not that precious about the height of each ‘peak’ staying the same and the points just moving closer together when the browser is resized.

    # July 28, 2014 at 5:58 am

    Heres the ‘original’ fixed width version in codepen.

    And here is the percentage width/responsive version in codepen.

    The first line on this version works ok at the size I have my browser window (chrome) but on resizing the dots/lines don’t connect.

    # July 29, 2014 at 2:27 am

    It might be just me, but I see no lines at all in the second version

    EDIT: found the problem: you can’t just delete the -moz- properties, and keep the -webkit- as this will bug your site in firefox. (-moz- is for firefox). Alternativly you can just delete them both and

    
    /*  -webkit-animation:move 1s linear forwards;
    
        -moz-animation:move 1s linear forwards;*/
        
            //becomes
        animation:move 1s linear forwards;
    

    The downside of this is that a few old browsers might not read the code properly.

    This wont solve your problem, but it’s a step forward.

    EDIT2: I just looked into it and saw you made the x-coordinates of the points variable using %. Are you planning to do the same with the y-coordinates? The solution will be similar, but it will require other input numbers. Also, are the coordinates randomly generated, or fixed? (if fixed, just pass them, allows for way easier math although it is possible with variable coordinates).

    # July 29, 2014 at 6:19 am

    Sorry I did chop out some of the -moz animation css!

    Yeah I used % so the dots are spaced out evening over the page. On my version they are set from 0% and at 10% intervals all the way to 100%. They y-coordinates I was just going to have a fixed pixel value but % would be fine, whatever would be easier!

    # July 29, 2014 at 7:40 am

    Are the coordinates randomly generated or always the same? If they’re changing I’ll probably need some javascript to do some calculations. If they’re constant I think I can just calculate the solutions and put them in the css.

    I do not known if px or % would be easier, but if you use px and your height gets a bit low, your design wouldn’t be as responsive anymore, would it?

    # July 29, 2014 at 7:48 am

    The coordinates will always be the same. There will be 11 ‘dots’ in total (the first being at 0% and the last at 100% from the left), always at 10% intervals. The heights will also be fixed as either pixel or the same percentage values.

    Yeah I don’t think pixel for the height of each peak would be as responsive but I could sacrifice it if needed – depending on how it looked!

    The line will be positioned absolute at the bottom of a container which will be 100% height & width of the browser window. There will be a vertically & horizontally centred title and short paragraph so I don’t think the line chart will ever be very tall. Maybe 300px max!

    # July 29, 2014 at 8:30 am

    Could you post the code of the graph with 11 dots? I’ll calculate the transform-origins when I got some time at hands.

    # July 29, 2014 at 8:37 am

    Sure, shall I just added it to the Codepen? And remove the transform-origins for now so it only has dots in there correct positions?

    EDIT: I’ve just created I stripped-back forked version on Codepen. Figured it might be best to see it with a little less mark-up/css – might be clearer ;)

    I’ve quickly set some bottom values for the position to get some different heights but I might change these – guessing it doesn’t matter right now as I can tweak it later.

    http://codepen.io/anon/pen/mlLaI

    # July 29, 2014 at 2:40 pm

    Just make a bit of progress on this and decided to rewrite a big part of the css because it just wasn’t fit for responsive design (atleast as far as I could see) because I need the width of the container, which I can’t rely on to be the full page.

    I hope you dont mind I’m not conserving the original idea of the graph? I wont be done today as I have plenty of other work to do.

    # July 30, 2014 at 1:03 am

    Thats fine, it was just an example that was really close to what I was after. I’m not precious over the mark-up/css how it was. Essentially all I need is a series of dots – set at 10% horizontal intervals and varying vertical values. With a line animating to each one. No ‘pulse’ or bubble on hover.

    Of course! I totally understand its not a priority and I really, really appreciate you looking at this for me :)

    # July 30, 2014 at 5:39 am

    This is what I have so far: http://jsfiddle.net/368dw/

    On resizing the screen, the lines are a little bit off (restart button fixes it). Also sometimes the restart button does seem to bug at random times. I suspect changing the delay from 10 to something higher might solve this, but as I havn’t been capable of finding this bugs reproduction steps I can’t know for sure.

    If anyone could help me with either of these 2 issues, that would save me some time next time I look into it.

    I only tested this in firefox, so if this doesn’t work properly in Chrome, check if all the -webkits- are there first.

    Thanks to the .line-box divs, this required less rewriting than I expected. Bless them.

    The pulses are also slightly off, but I trust that is something you can fix yourself :).

Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.