Home/ Questions/Q 3615010
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T22:19:13+00:00

I am trying to create a scatter chart on my web page with CSS

  • 0

I am trying to create a scatter chart on my web page with CSS and few dots images. I have created the design successfully, but now I can’t figure out how a scatter chart actually works. Can anyone provide me any idea how I can arrange them? My chart width is 968 and height 432.
like this chart

http://chart.apis.google.com/chart?cht=s&chd=t:12,16,16,24,26,28,41,51,66,68,13,45,81|16,14,22,34,22,31,31,48,71,64,15,38,84&chs=250×100&chl=Hello|World

i cannot use this but i want to know how it works

Thanks for any 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 as $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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well your dot pitch is 20px square, and you need to position them on the graph with the bottom left corner as the origin (0,0).

    You need to know the scale of the axis, which you have not stated. Decide how many pixels per distance upon your axis.

    Then you need to convert the position you desire of each point P(x,y), to a position on the screen. You want the centre pixel of your .dot to be at that location.

    As the screen coordinate run from top-left, not bottom-left, you will need to reverse the vertical pixels, so maximum is zero, and zero (or full negative) is the height of the graph, plus/minus half the size of your 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, I think that is right – might need adjustment. In particular, subtract 2r from W and H if you need the dots to appear fully within the area (that applies to the whole of the 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 as $cPoint) {
    // Assuming $w, $h, $xmin, $ymin, $xmax, $ymax, $r are 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/

    • 0