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

    function drawChart() {
      // Crear una instancia de DataTable
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Tweets');
      
      <?php
          require_once 'conexion.php';

          // Consulta SQL para obtener los datos de la tabla
          $sql = "SELECT tweets_totales, tweets_positivos, tweets_negativos, tweets_neutrales FROM sentimiento";
          $result = $conn->query($sql);
          $id = 0;
          // Agregar las filas correspondientes a los datos obtenidos en la consulta
          while ($row = mysqli_fetch_assoc($result)) {
              $id++;
              echo sprintf("<div id='chart_div_%s'></div>", $id);

              // Crear una nueva tabla de datos para el gráfico
              echo "var data_" . $id . " = new google.visualization.DataTable();";
              echo "data_" . $id . ".addColumn('string', 'Tweets');";
              echo "data_" . $id . ".addColumn('number', 'Cantidad');";
              echo "data_" . $id . ".addRows([";
              echo "['Tweets Totales', " . (int)$row['tweets_totales'] . "],";
              echo "['Tweets Positivos', " . (int)$row['tweets_positivos'] . "],";
              echo "['Tweets Negativos', " . (int)$row['tweets_negativos'] . "],";
              echo "['Tweets Neutrales', " . (int)$row['tweets_neutrales'] . "]";
              echo "]);";

              // Crear un nuevo gráfico
              echo "var chart_" . $id . " = new google.visualization.PieChart(document.getElementById('chart_div_" . $id . "'));";
              echo "chart_" . $id . ".draw(data_" . $id . ");";
          }
          // Cerrar conexión
          mysqli_close($conn);
      ?>
    }
  </script>
</head>
<body>
  
</body>
</html>
