Jump to content


Photo

GD or SVG graphing math


  • Please log in to reply
7 replies to this topic

#1 possien

possien
  • Members
  • PipPipPip
  • Advanced Member
  • 80 posts
  • LocationArizona

Posted 05 May 2014 - 11:15 PM

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>



#2 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,164 posts

Posted 06 May 2014 - 10:51 AM

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 ?>


Edited by Barand, 06 May 2014 - 10:53 AM.

If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts

#3 gizmola

gizmola
  • Administrators
  • Advanced Member
  • 4,722 posts
  • LocationLos Angeles, CA USA

Posted 06 May 2014 - 06:51 PM

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.oreil...ordinate_System

#4 possien

possien
  • Members
  • PipPipPip
  • Advanced Member
  • 80 posts
  • LocationArizona

Posted 06 May 2014 - 08:24 PM

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.



#5 gizmola

gizmola
  • Administrators
  • Advanced Member
  • 4,722 posts
  • LocationLos Angeles, CA USA

Posted 06 May 2014 - 08:44 PM

Well those links suggest you just plot the item using your cartesian coordinates and then transform the Y coordinate. But whatever works for you ;)

#6 possien

possien
  • Members
  • PipPipPip
  • Advanced Member
  • 80 posts
  • LocationArizona

Posted 07 May 2014 - 08:23 PM

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...



#7 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,164 posts

Posted 08 May 2014 - 06:33 PM

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.


If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts

#8 dragonmom0

dragonmom0
  • New Members
  • Pip
  • Newbie
  • 1 posts

Posted 12 January 2018 - 08:50 PM

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>

Edited by dragonmom0, 12 January 2018 - 08:56 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users