Log in

View Full Version : Resolved Creating a diagonal line (as on a graph) in HTML?


djr33
10-10-2012, 04:55 AM
I'm doing pretty well making a scatterplot graphs (just one with X-Y coordinate points) in HTML for a current data analysis project. And I'm generating statistics, etc. (All based in PHP and HTML for presentation; no images.)

Is there any easy way to make a diagonal line in HTML to connect two points and create a line graph? Assuming I can deal with the math (figuring out length, angle and coordinates for both endpoints, based on relative locations on the page).

I don't want to use a canvas or images because that would make it too complicated and defeat the point in some sense, and it also might make the page sluggish if I end up with a lot of lines.


My current idea is maybe to use an <hr> and rotate it. Would this work out?


I'm also not particularly attached to cross-browser compatibility-- if it works for me in Firefox (or perhaps another browser instead) then I'm happy. This is for personal use, though I wouldn't mind working up to something more stable later.
bernie1227
10-10-2012, 05:17 AM
You can rotate an <hr> tag using the css transform property, I've set up a jsfiddle for you here (http://jsfiddle.net/q9DhU/) demonstrating what I mean.

The jsfiddle is blank for some reason, so here is the code:


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
hr {
transform:rotate(5deg);
-ms-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
}
</style>
</head>
<body>

<hr></hr>

</body>
</html>



Ok, fixed now, see here (http://jsfiddle.net/bernie1227/FDCfx/) for the fiddle
djr33
10-10-2012, 04:55 PM
Great, thanks! I thought something like that might work, but last night I was too exhausted after writing the rest of my code to figure it out. Thanks for filling in the various cross-browser CSS codes as well.

For anyone else looking for a similar answer, here's everything worked out in a little more detail:

1. Calculate start points and end points, however that works on your page. (Hopefully that's just x and y values for each, within one region on the page-- not as complex as my page is right now, haha-- but I'll still get it there, just with a few more steps.)
2. Convert the ordered pair of points to an angle for the line (fun trigonometry! rise over run and all that...).
3. Calculate the distance from point1 to point2-- pythagorean equation (again, rise and run for the sides and calculate the hypotenuse).
3. Dynamically set the values for the HTML and CSS below:


hr
{
/*Replace 5 below with whatever angle you calculated*/
transform:rotate(5deg);
-ms-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
}

--------------

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--Replace width of 50 with length; top of 80 with height-y; and left of 20 with x-->
<hr style="width:50px;position:absolute;top:80px;left:20px;">

</body>
</html>


And now for some trigonometry to get it setup on my page.


EDIT: There's a problem. I'll need to test it further. The rotation is going to be based on the center of the object, I expect. Therefore, it will be necessary to slide it up half of the rise (or down if rise is negative) and over (half length - half of the run) to move it to be attached to the starting point at one end-- I'll play with this later.
molendijk
10-10-2012, 07:32 PM
See also this (http://samuli.hakoniemi.net/cross-browser-rotation-transformation-with-css/). Works even with IE7.
Arie.
djr33
10-11-2012, 01:17 AM
Thanks Arie, but that looks like the same code posted by Bernie above. Am I missing an important difference? I might be-- it has been a long day.


Oh, I see. It works for earlier versions of IE? Hm. That's useful. For this particularly project I don't care about IE at all, but that would be useful for future versions of my script if I end up generalizing/releasing it.
bernie1227
10-11-2012, 01:18 AM
the only difference appears to be this line of code:


behavior:url(-ms-transform.htc);
djr33
10-11-2012, 02:09 AM
Right. Which (I think) makes IE7 work.... right?
bernie1227
10-11-2012, 02:19 AM
Yes, hence the name of the link.