Cómo crear un gráfico circular dinámico en PHP con Google Charts

Un gráfico de tarta es un gráfico circular que está dividido en secciones que representar una proporción numérica. Este gráfico se suele utilizar para mostrar una comparación gráfica que ayude a entender mejor una serie de datos dada. El gráfico circular es la opción perfecta para ilustrar porcentajes.

Si debes mostrar datos estadísticos con un gráfico circular, existe un forma sencilla de llevarlo a cabo en una aplicación web. En este tutorial, te mostraremos cómo crear un gráfico circular dinámico con PHP y MySQL.

La Google Visualization API te proporciona una manera senculla de crear gráficos en tu sitio web. Meduante la API de Google Charts, podrás generar gráficos circulares para mostrar datos de una base de datos en cuestión de minutos. Para ello crearemos distintos tipos de gráficos circulares para mostrar datos dinámicos de una base de datos MySQL utilizando PHP y la API de Google Charts.

Creando un gráfico circular dinámico con PHP y MySQL

En este ejemplo, mostraremos unos cuantos lenguajes de programación dentro del gráfico circular. Además, la información se extraerá de una base de datos MySQL, la cual utilizaremos para poblar el gráfico.

Creación de la base de datos

Para almacenar la información sobre los lenguajes de programación necesitaremos crear una tabla en la base de datos. El siguiente SQL crea una tabla llamada programming_languages en la base de datos MySQL.

CREATE TABLE `programming_languages` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `rating` int(5) NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Datos dinámicos en el gráfico circular

Como he dicho antes, extraeremos los datos de la tabla programming_languages utilizando PHP. Después de eso, definiremos los nombres de los lenguajes de programación y su valoración en la variable data. En la variable options, puedes especificar el título, el ancho y el alto del gráfico circular.

<?php
// Database credentials
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'programacionnet';

// Create connection and select db
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Get data from database
$result = $db->query("SELECT name,rating FROM programming_languages WHERE status = '1' ORDER BY rating DESC");
?>

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['name']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);
    
    var options = {
        title: 'Most Popular Programming Languages',
        width: 900,
        height: 500,
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
    chart.draw(data, options);
}
</script>
</head>
<body>
    <!-- Display the pie chart -->
    <div id="piechart"></div>
</body>
</html>

Puedes crear varios tipos de gráficos circulares con Google Charts API. Implementaremos los más populares más abajo.

Creando un gráfico circular 3D dinámico

Define la opción is3D a true para crear un gráfico circular 3D

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['name']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);
    
    var options = {
        title: 'Most Popular Programming Languages',
        width: 900,
        height: 500,
        is3D: true,
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
    chart.draw(data, options);
}
</script>

Creando un gráfico de donut dinámico

El gráfico de donut es igual que el circular, solo que con un agujero en el centro. Para ello, define el ancho del agujero en la variable pieHole.

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['name']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);
    
    var options = {
        title: 'Most Popular Programming Languages',
        width: 900,
        height: 500,
        pieHole: 0.5,
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
    chart.draw(data, options);
}
</script>

Creando un gráfico circular con secciones separadas

Para separar las secciones unas de otras, utiliza correctamente la opción slices.

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['name']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);
    
    var options = {
        title: 'Most Popular Programming Languages',
        width: 900,
        height: 500,
        pieSliceText: 'label',
        slices: {
            0: {offset: 0.5},
            6: {offset: 0.4},
            8: {offset: 0.3}
        },
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
    chart.draw(data, options);
}
</script>