C3.js donut chart mit PHP und MySQL

In diesem Tutorial zeig ich dir wie du ganz einfach mit PHP und MySQL ein Donut Chart von C3.js mit Daten befüllen kannst.

Implementieren tust du das Donut Chart mit dem folgenden HTML und javascript code:

<div id="c3chart_category" style="height: 420px;"></div>

<?php
  $sql = "SELECT * FROM categories";
  $result = mysqli_query($conn, $sql);
  $chart_data = '';
  while ($row = mysqli_fetch_assoc($result)) {
      $id = $row['id'];
      $sql2 = "SELECT * FROM tutorials where category_id = $id";
      $result2 = mysqli_query($conn, $sql2);
      $num = $result2->num_rows;
      $chart_data .= "['" . $row['name'] . "'," . $num . "],";
  }
  $chart_data = substr($chart_data, 0, -1);
?>

<script>
$(function() {
	"use strict";


	var chart = c3.generate({
		bindto: "#c3chart_category",
		data: {
			columns: [
				<?php echo $chart_data; ?>
			],
			type: 'donut'
		},
		color: {
			pattern: ['#5969ff', '#ff407b', '#25d5f2', '#ffc750', '#2ec551']
		}
	});
});
</script>