Php > Graphics

Svg-php diagram

Svg-php diagram

<?


 Variables 

$svgwidth=800;
$svgheight=400;
$graphheight = 300;
$graphwidth = 750;
$margin = 20;
$scaleSize = 125;   //Minimum value on Y-axis - use round numbers!
$minScaleCount = 5; //Maximum number of valuespoints on Y-axis



//serie colors
$serieAColor = 'green';
$serieBColor = 'orange';
$serieCColor = 'blue';
$serieDColor = 'purple';
$serieEColor = 'red';
$serieFColor = 'yellow';
$serieGColor = 'navy';
$serieHColor = 'gray';
$serieIColor = 'black';
$serieJColor = 'pink';

 Parameter passing 
/*
series are defined in the values of serieA=NAME... example:
    serieA=redhat
    serieB=mandrake
    serieC=turbo

the serievalues are then defined like NAME.N=VALUE. Where the first value of N = startDate... example:
    startDate=1
    endDate=3
    redhat1=225
    redhat2=325
    redhat3=1256
    mandrake3=556

store these parameters in a variable like this:
$parameters =  "?startMonth=1&endMonth=3&startYear=2002&serieA=redhat&serieB=mandrake";
$parameters .= "&redhat1=333&redhat2=444&mandrake1=0&mandrake2=555&mandrake3=666";

note that empty field should be written as zero



Usually a graph will be embedded in a another webpage. Do it like this:
<EMBED WIDTH="1000" HEIGHT="400" SRC="svgraphp.svg<? echo $parameters; ?>" type="image/svg+xml" pluginspage="http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.0/en/SVGView.exe" wmode="transparent">


Permanent Code
You don't need to alter anything below here.
*/
header("Content-type: image/svg+xml");
print('<?xml version="1.0" encoding="iso-8859-1"?>');
?>

<?

//find largest value of all series.
$largestValue = 0;
$stop = false;
for ($a = A; !$stop; $a++){
  $thisSerie = ${'serie'.$a}; //$thisSerie has variable value of FX $serieA. FX "Expected"
  if (!$thisSerie){ $stop = true; }
  else{
    for ($i = 0; $i <= $xPointCount - 1; $i++){
      $thisValue = ${$thisSerie.urldecode(${'xPoint'.$i})}; //$thisValue has variables value of $ExpectedAlbertazzi. FX "122"
      if ($thisValue > $largestValue){ $largestValue = $thisValue; }
    }
  }
}


//calculate scale for Y-Axis
$scaleCount = $largestValue / $scaleSize;
while ($scaleCount > $minScaleCount){
  $scaleSize *= 2;
  $scaleCount = $largestValue / $scaleSize;
}

$ySteps = $graphheight / ($scaleCount + 1);


//write Y-Axis
for ($i = 0; $i <= $scaleCount + 1 ; $i++ ){
  $y = $graphheight - ($i * $ySteps);
  $lineLength = $graphwidth;
  echo '<text x="'.$margin.'" y="'.$y.'" style="font-size:15;">'.$i * $scaleSize.'</text>';
  echo '<line x1="'.$margin.'" y1="'.$y.'" x2="'.$lineLength.'" y2="'.$y.'" stroke="gray" />';
}

//write legend
//initialize Legend variables
$legendXPos = -40;
$legendYPos = $graphheight + 85;
$legendTextYPos = $graphheight + 90;
$stop = false;

for ($a = A; !$stop; $a++){
  $thisSerie = ${'serie'.$a};  //$thisSerie has value of variable $serieA FX "Expected"
  if (!$thisSerie){ $stop = true; }
  else{
    $legendXPos += 70;
    $color = ${'serie'.$a.'Color'};
    echo '<rect x="'.$legendXPos.'" y="'.$legendYPos.'" width="8" height="8" fill="'.$color.'" stroke="'.$color.'" />';
    $legendXPos += 10;
    echo '<text x="'.$legendXPos.'" y="'.$legendTextYPos.'" style="font-size:15;">'.$thisSerie.'</text>';
  }
}


//draw diagram
//initialize diagramVariables
$yPixelFactor = $scaleSize/$ySteps;
$xSteps = ($graphwidth - $margin) / ($xPointCount + 1);
$coloumnWidth = $xSteps/3;
$xlabelYPos = $graphheight + 10;
$thisX = $margin + 30;


//echo '<text x="200" y="200" style="font-size:20;">'.$temp.'</text>'; //this if only for testing

for ($i = 0; $i <= $xPointCount - 1; $i++){
  //writes xPoint-labels
  $xLabelXPos = $thisX + 5;
  echo '<text x="'.$xLabelXPos.'" y="'.$xlabelYPos.'" style="font-size:15;" writing-mode="tb" direction="rtl" glyph-orientation-vertical="45deg">'.urldecode(${'xPoint'.$i}).'</text>';

  //write series coloumn
  $colX = $thisX;
  $stop = false;
  for ($a = A; !$stop; $a++){
    $thisSerie = ${'serie'.$a}; //$thisSerie has variable value of FX $serieA. FX "Expected"
    if (!$thisSerie){ $stop = true; }
    else{
      $color = ${'serie'.$a.'Color'};
      $thisValue = ${$thisSerie.urldecode(${'xPoint'.$i})}; //$thisValue has variables value of $ExpectedAlbertazzi. FX "122"
      $thisValue /= $yPixelFactor;
      $thisY = $graphheight - $thisValue;
      echo '<rect x="'.$colX.'" y="'.$thisY.'" width="'.$coloumnWidth.'" height="'.$thisValue.'"
        fill="'.$color.'" stroke="none" stroke-width="2"/>';
      $colX += $coloumnWidth;
    }
  }
  $thisX += $xSteps;
}



?>
<rect x="1" y="1" width="<? echo $svgwidth-4; ?>" height="<? echo $svgheight-4; ?>" fill="none" stroke="navy" stroke-width="2" />

</svg>