Featured post
php - scatter chart formula -
i trying create scatter chart on web page css , few dots images. have created design successfully, can't figure out how scatter chart works. can provide me idea how can arrange them? chart width 968 , height 432. chart
i cannot use want know how works
thanks help.
<?php $w = 968; $h = 432; $xmin = 0; $xmax = 968; $ymin = 10; $ymax = 100; $x = 10; $y = 10; $xc = 20; $yc = 20; $r = (20)/ 2; $xc = $w * (($x - $xmin)/($xmax - $xmin)) - $r . "<br>"; $yc = $h * (($ymax - $y)/($ymax - $ymin)) -$r; $tr =''; $data = array("120|90","345|456","45|66","45|45"); foreach($data $value){ $new = explode("|",$value); $tr .='<a href="#" style="top:'.$new[0].'px; left:'.$new[1].'px;" class="dot"></a>'; } ?> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style type="text/css"> #most_engaged_graph{ width:968px; height:432px; background-color:#cccccc; } a.dot { height:20px; width:20px; position:absolute; background-color:#0033ff; } </style> </head> <body> <div id="most_engaged_graph"> <?=$tr?> </div> </body> </html>
well dot pitch 20px
square, , need position them on graph bottom left corner origin (0,0)
.
you need know scale of axis, have not stated. decide how many pixels per distance upon axis.
then need convert position desire of each point p(x,y)
, position on screen. want centre pixel of .dot
@ location.
as screen coordinate run top-left, not bottom-left, need reverse vertical pixels, maximum zero, , 0 (or full negative) height of graph, plus/minus half size of dot in both cases.
given:
w = graph width (px), h = graph height (px)
xmin = minimum x axis, xmax = maximum x axis
ymin = minimum y axis, ymax = maximum y axis
x = x value on graph (xmin <= x <= xmax), y = y value on graph (ymin <= y <= ymax)
xc = x-center of dot, yc = y-center of dot
r = dot radius = (dot width) / 2
then:
xc = w * [(x - xmin)/(xmax - xmin)], yc = h * [(ymax - y)/(ymax - ymin)]
left = xc - r, top = yc - r
untested, think right - might need adjustment. in particular, subtract 2r
w
, h
if need dots appear within area (that applies whole of graph, axis et al).
example code:
<div id="most_engaged_graph"> <?php $datapoints = array( array('x' => 5, 'y' => 20), array('x' => 80, 'y' => 50), array('x' => 45, 'y' => 5), array('x' => 68, 'y' => 89), array('x' => 22, 'y' => 43) ); foreach ($datapoints $cpoint) { // assuming $w, $h, $xmin, $ymin, $xmax, $ymax, $r defined above $xc = $w * (($cpoint['x'] - $xmin) / ($xmax - $xmin)); $yc = $h * (($ymax - $cpoint['y']) / ($ymax - $ymin)); $cleft = $xc - $r; $ctop = $yc - $r; ?> <a href="#" style="top: <?php echo $ctop; ?>px; left: <?php echo $cleft; ?>px;" class="dot"></a> <?php } ?> </div>
jquery version demo: http://jsfiddle.net/75mz5/1/
- Get link
- X
- Other Apps
Comments
Post a Comment