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 axisymin = minimum y axis, ymax = maximum y axisx = x value on graph (xmin <= x <= xmax), y = y value on graph (ymin <= y <= ymax)xc = x-center of dot, yc = y-center of dotr = 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