Jump to content

GD or SVG graphing math


possien

Recommended Posts

I have tasking to produce graphs that convert polar coordinates to x,y and spherical trig plots.  Since GD and SVG origins are inverted or backwards from a normal xy graph, is there a way to convert xy to GD or SVG using math?  The calculations to plot in normal xy are relatively easy and some have negative values but I am not having success at putting the output to a usable display.  Any suggestions?

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>

<h2>HTML5 SVG Plot Polar to XY Line</h2>
<?php
$rad = 25;
 $x = round($rad*cos(45));
 $y = round($rad*sin(45));
 echo "Value of x: ".$x."<br>";
 echo "Value of y: ".$y."<br>";
 echo "Plot of a 45 deg's with PHP in red, correct plot in blue";
?>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
     <svg width="100" height="100">
   <circle cx="50" cy="50" r="48" stroke="green" stroke-width="2" fill="#EFA" />
   <line x1="50" y1="50" x2="<?php $x;?>" y2="<?php $y;?>" style="stroke:red;stroke-width:2"/>
   <line x1="50" y1="50" x2="100" y2="0" style="stroke:blue;stroke-width:2"/>  
</svg>
</body>
</html>

Link to comment
Share on other sites

try

<?php
$rad = 125;
$x = 50 + round($rad*cos(deg2rad(45)));
$y = 50 - round($rad*sin(deg2rad(45)));
echo "Value of x: ".$x."<br>";
echo "Value of y: ".$y."<br>";
echo "Plot of a 45 deg's with PHP in red, correct plot in blue";
?>

edit : PS <?php $x ?> should be <?php echo $x ?>

Link to comment
Share on other sites

FWIW, while Barand's code is probably right, because.. well it's Barand and he wrote a bunch of libraries that do graphing (see links in his signature), I feel you might also benefit from just reading about how you can do this purely in SVG, covered fairly completely here: http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

Link to comment
Share on other sites

I think I am getting there, I changed the origin to x=0 and y=max of the plot area and for negative values origins are x=max and y = max of the plot area (separate SVG graphic).

Thanks for the math help and links.  I do believe SVG is much easier.

Link to comment
Share on other sites

Ok, I finally got it now, understanding transform:

function compass(){

$angle = array(0,45,90,135,180,225,270,315);
for ($i = 0; $i <= 7; $i++) {
    $a = $angle[$i];
    $Ox1 = 50;
	$Oy1 = 50;
    $rad = 40;
	$x = 50 + round($rad*cos(deg2rad($a)));
	$y = 50 - round($rad*sin(deg2rad($a)));
	//echo 'x= '.$x.' | y= '.$y.'<= for angle '.$a.'<br>';
	$html = '<line x1="'.$Ox1.'" y1="'.$Oy1.'" x2="'.$x.'" y2="'.$y.'" style="stroke:red;stroke-width:2"/>';
	$html = $html++;
	echo $html;
	}
}

?>

<svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
     <svg width="100" height="100">
	 <g transform="translate(0,100) scale(1,-1)">
	<circle cx="50" cy="50" r="48" stroke="green" stroke-width="2" fill="#EFA" />
	<?php compass();?>
</svg>

Thanks gizmola and Barand! Now to spherical trig...

Link to comment
Share on other sites

I haven't used SVG and your post has piqued my interest in using it. A couple of things confuse me though.

 

1. What is this line supposed to achieve...

           $html = $html++;

 

2. If I remove the line containing the transform I get exactly the same output as with the line.

Link to comment
Share on other sites

  • 3 years later...

The original problem presented includes an error in how to integrate the value of PHP variables inside SVG code.  Since the point of the posting was to solve this problem, I debugged the original code and present the solution below. As Barand points out, the "final" correct code posted by Possien has a no operation line "$html = $html++;" and doesn't clearly "correct" his original problem which is how to integrate PHP variables within SVG code.  The coder needed to "echo" the variables $x and $y not just reference them.   Let me explain Barand's correction first and then mine.

 

Barand first corrects mathematical errors:  

  • Barand changes the size of the radius from 25 to 125.  In actuality the size has to be > 48 to reach the edge of the size-50 radius circle with a stroke size of 2.  
  • Barand also corrects the calc for $x and $y.  The addition of the number 50 in each x and y calculation is to take into consideration the center point of the circle which is x=50, y=50. Cosine and Sine functions require parameters in radians not degrees hence the deg2rad() function which translates the number 45 degrees to radians.  

 

The "Final" code Possien posted changes how he references variables but I felt it confused the point.  He was so close originally, I thought I would point out the small correction for other's benefit.  

 

My correction is the fourth changed line.   Echo the variables don't just reference them.  

 

From the first set of code, change only these four lines:

  1. $rad = 25;
  2. $x = round($rad*cos(45));
  3. $y = round($rad*sin(45));
  4. <line x1="50" y1="50" x2="<?php $x;?>" y2="<?php $y;?>" style="stroke:red;stroke-width:2"/

to these lines:

  1. $rad = 48;
  2. $x = 50+round($rad*cos(deg2rad(45))); 
  3. $y = 50-round($rad*sin(deg2rad(45)));
  4. <line x1="50" y1="50" x2="<?php echo $x;?>" y2="<?php echo $y;?>" style="stroke:red;stroke-width:2"/  

Final Code which works is as follows:

  1. <!DOCTYPE html>
  2. <head>
  3. <title>SVG</title>
  4. <meta charset="utf-8" />
  5. </head>
  6. <body>
  7. <h2>HTML5 SVG Plot Polar to XY Line</h2>
  8. <?php
  9. $rad = 48;
  10. $x = 50+round($rad*cos(deg2rad(45)));
  11. $y = 50-round($rad*sin(deg2rad(45)));
  12. echo "Value of x: ".$x."<br>";
  13.   echo "Value of y: ".$y."<br>";
  14.   echo "Plot of a 45 deg's with PHP in red, correct plot in blue";
  15. ?>
  16. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> 
  17.    <svg width="100" height="100">
  18.  <circle cx="50" cy="50" r="48" stroke="green" stroke-width="2" fill="#EFA" />
  19. <line x1="50" y1="50" x2="<?php echo $x;?>" y2="<?php echo $y;?>" style="stroke:red;stroke-width:2"/> 
  20. </svg>
  21. </body>
  22. </html>
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.