SVG Pie Chart using PHP

SVG Pie Chart using PHP

SVG, or Scalable Vector Graphics are widely used for dynamic shapes and icons in web applications. They are usually implemented because it is a vector graphic - meaning it can be scaled in any size without losing its quality. Also, charts and other graphical data representation can be easily implemented with SVG because it is very dynamic. You can basically draw any shapes by just providing certain parameters.

A dynamic SVG Pie Chart made using PHP. It accepts 10 names and corresponding values then it will automatically generate a pie chart (with legend). The program uses the path command for SVG.

The key here is you first decide where would be the point of origin. This will involve a little bit of trigonometry. After that, everything will be just like plotting points to a Cartesian coordinate system. Supply the start point and end point for the path, and it will automatically create the shape.

Technically, the code you really need to focus on is:

foreach($_POST['value'] as $value){
 if($value==""||$value==0){
  $x++;
  continue;
 }
 $angle=deg2rad((($value+$prev)/$total)*360);
 $end_point[0]=round(200-((cos($angle))*180),2);
 $end_point[1]=round(200-((sin($angle))*180),2);
 
 if((rad2deg($angle))<180){
  $path=0;
 }
 else{
  $path=1;
 }
 
 //for same start and end points
 if($start_point[0]==$end_point[0]&&$start_point[1]==$end_point[1]){
  $end_point[1]=$end_point[1]+0.001;
  $stroke=0;
 }
 else{
  $stroke=3;
 }
 //breakpoint
 echo "<path d='M200,200 L".$start_point[0].",".$start_point[1]." A180,180 0 ".$path.",1 ".$end_point[0].",".$end_point[1]." z'
   style='fill:#".$color[$x].";stroke:white;stroke-width:".$stroke."; mask:url(#hole) '/>    

 "; 
 $start_point[0]=$end_point[0];
 $start_point[1]=$end_point[1];
 $prev=$prev+$value;
 $x++;
}

First, calculate for the angle of the certain point: $angle=deg2rad((($value+$prev)/$total)*360);

So initially, when you plot the point, you start at the origin, which is (0,0) - the center of the circle.

By Pythagorean Theorem, you can solve for adjacent side, which is from 0 to y axis, by: $end_point[0]=round(200-((cos($angle))*180),2);

And solve for the base, which is from 0 to x: $end_point[1]=round(200-((sin($angle))*180),2);

Now you have the 3 points: the origin, the end_point[0] and end_point[1], that being said, we now have a triangle. This is basically the segment of our pie chart, but we need to draw the hypotenuse in a curve, so it will look like a segment of the circle.

After that, you need to determine if the angle is greater than 180. Why? Because if the angle is greater than 180, we would let the path draw the LONGEST path from end_point[1] to end_point[0]. Else, it should use the shortest path.

Now the path command will draw the path from origin, end_point[0] and end_point[1].

And since we are on a loop, the formula will just repeat for each values in the array.

This pie chart can chart more values easily by just extending the array where the data are saved. You can just add textboxes or more values to the array and it will automatically be interpreted in a chart.

Most of the chart functions now are using SVG because it can be easily implemented even with simple PHP code. You just have to be familiar with the properties and parameters the certain SVG command have.

Download here.

Feel free to ask questions if you are confused or if you want to modify the program.