PHP Doughnut / Donut Charts & Graphs

Download PHP Chart Samples

Doughnut / Donut Charts are similar to pie charts except for a blank center. Given example shows simple PHP Doughnut Chart along with source code that you can try running locally.

  1. <?php
  2.  
  3. $dataPoints = array( 
  4. 	array("label"=>"Oxygen", "symbol" => "O","y"=>46.6),
  5. 	array("label"=>"Silicon", "symbol" => "Si","y"=>27.7),
  6. 	array("label"=>"Aluminium", "symbol" => "Al","y"=>13.9),
  7. 	array("label"=>"Iron", "symbol" => "Fe","y"=>5),
  8. 	array("label"=>"Calcium", "symbol" => "Ca","y"=>3.6),
  9. 	array("label"=>"Sodium", "symbol" => "Na","y"=>2.6),
  10. 	array("label"=>"Magnesium", "symbol" => "Mg","y"=>2.1),
  11. 	array("label"=>"Others", "symbol" => "Others","y"=>1.5),
  12.  
  13. )
  14.  
  15. ?>
  16. <!DOCTYPE HTML>
  17. <html>
  18. <head>
  19. <script>
  20. window.onload = function() {
  21.  
  22. var chart = new CanvasJS.Chart("chartContainer", {
  23. 	theme: "light2",
  24. 	animationEnabled: true,
  25. 	title: {
  26. 		text: "Average Composition of Magma"
  27. 	},
  28. 	data: [{
  29. 		type: "doughnut",
  30. 		indexLabel: "{symbol} - {y}",
  31. 		yValueFormatString: "#,##0.0\"%\"",
  32. 		showInLegend: true,
  33. 		legendText: "{label} : {y}",
  34. 		dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
  35. 	}]
  36. });
  37. chart.render();
  38.  
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  44. <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  45. </body>
  46. </html>

Chart Customizations

Inner and outer radius of the Doughnut / Donut Chart can be changed using innerRadius and radius respectively. Some other commonly used customization options are indexLabelPlacement, color, etc.