woop Posted August 5, 2010 Share Posted August 5, 2010 At the moment i can retrieve information from a DB and display it nicely in a vertical line of boxes (some boxes with extra information as needed). I basically need a version of this with exactly the same information, but instead of a top-down list of divs (boxes), I need them to be displayed going around a circle (starting top centre, going clockwise). Does anyone know if this is possible? And how easy would it be? Any scripts? It's already taken me ages to get the list pulling the appropriate info and displaying in a straight line. Thanks for any help/direction. Added: The number of divs displayed will be variable depending on what's in the DB. So I can't count on their being a certain number. Therefore the 'circle' would need to re-size in some way?! Quote Link to comment Share on other sites More sharing options...
sinista Posted August 5, 2010 Share Posted August 5, 2010 could you position the div's, using $x for top and $y for left, something like <?php $x=0; $y=0; for($i=0; $i<=3; $i++) { echo '<div style="position:relative; border:solid 1px #000; top:'.$x.'; left:'.$y.';">some text</div>'; $x=$x+90; $y=$y+90; } ?> you will need to play around with the values but you might get it looking kind of circular Quote Link to comment Share on other sites More sharing options...
woop Posted August 6, 2010 Author Share Posted August 6, 2010 Thanks Sinista, I've been playing around with something similar - will test a few variations of your code. I don't think it's fully possible with php (having the circle drawn and sized to fit a variable number of differently sized <div>s. Thanks again. Quote Link to comment Share on other sites More sharing options...
sinista Posted August 6, 2010 Share Posted August 6, 2010 I know there is stuff out there to draw graphs and pie charts maybe you could use some of the pie chart stuff to draw or position stuff in a circular way Quote Link to comment Share on other sites More sharing options...
AtlasC1 Posted August 6, 2010 Share Posted August 6, 2010 Well, after taking a look at it for a while, I figured out the formula. All you need is a couple of trig functions. I wrote up a working sample to get you started. You'll have to adjust the scaling conditionally, depending on how big/how many items you have, but I'll leave that up to you <?php print <<< HTMLSTUFF <html> <head> <style type="text/css"> body { text-align:center; } #redbox { background-color:red; width:4px; height:4px; position:absolute; } </style> </head> <body> HTMLSTUFF; $items = 5; // Number of items around the circle $scale = 50; // A scale to adjust pixels $abcissa = 0; // Start the trig functions at x = 0 $inc = (2 * pi()) / $items; // Increment x by this much for each div for ($i = 0; $i < $items; $i++) { $x = 400 + $scale*sin($abcissa); // I made the inital x-coord 400px from top $y = 400 + $scale*cos($abcissa); // Same with y-coord, you can change these echo "<div id='redbox' style='left:{$x}px;top:{$y}px;'></div>"; $abcissa += $inc; } print <<< HTMLSTUFF </body> </html> HTMLSTUFF; ?> You can change the number of items to whatever integer you like. Hope this is what you're looking for. -jm Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.