TransWikia.com

Quiero crear de forma automatica graficas mediante un plugin de acuerdo a una consulta SQL

Stack Overflow en español Asked on December 22, 2021

Actualmente quiero hacer que mi grafica se pinta de forma automáticamente con mi código php ya que este hace una consulta SQL y obtiene resultados requeridos para graficar.

Código JS:

    var conteo0=$(".GraficaConteo0").get(0);
    
    
    var total=$(conteo0).text();
    var dataStr="";
    var colorStr="";
    var StrComa=",";
    
    for(var i = 1; i <= total; i++){
    var conteo=$(".GraficaConteo0").get(i);
    var color0=$(".ColorGrafica0").get(i-1);
    var conteoFull=$(conteo).text();
    var ColorFull=$(color0).text();
    dataStr+="""+conteoFull+"""+StrComa;
    colorStr+="'"+ColorFull+"'"+StrComa;
    if(i==(total-1)){
    StrComa="";
    }
    
    }

alert(dataStr);

// Pie Chart Example
var ctx = document.getElementById("myPieChart1");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: [dataStr],
    datasets: [{
      data: [dataStr],
      backgroundColor: [colorStr],
      hoverBackgroundColor: [colorStr],
      hoverBorderColor: "rgba(234, 236, 244, 1)",
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
    },
    legend: {
      display: false
    },
    cutoutPercentage: 80,
  },
});

Código PHP:

$ConteoGrafica0="";
$grafica0="";
$sqlGrafica = "select count(*) as conteo, campo1 as retornocampo from tabla500 group by campo1";
$result=mysqli_query($conn,$sqlGrafica);
$conteo=0;
if ($result->num_rows > 0) {
      $ConteoGrafica0="<label class='GraficaConteo0 d-none'>".$result->num_rows."</label>";
    while($row = $result->fetch_assoc()) {
 $randomColor = rand(0,12);    
$grafica0.="<span class='mr-2'>
                      <i class='fas fa-circle' style='color:".$arrayGrafica[$randomColor]."'></i>".$row["retornocampo"]."
                    </span>";
$ConteoGrafica0.="<label class='GraficaConteo0 d-none'>".$row["conteo"]."</label>";
$ConteoGrafica0.="<label class='ColorGrafica0 d-none'>".$arrayGrafica[$randomColor]."</label>";
$conteo++;
    }

} else {

$grafica0="Sin Informacion";

} 

Codigo HTML5:

       <div class="col-xl-6 col-lg-5">
              <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-primary">Motivos de Cancelacion</h6>
                  <div class="dropdown no-arrow">
                  </div>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                  <div class="chart-pie pt-4 pb-2">
                    <canvas id="myPieChart1"></canvas>
                  </div>
                  <div class="mt-4 text-center small">
<?php echo $grafica0; ?>
<?php echo $ConteoGrafica0; ?>
                  </div>
                </div>
              </div>
            </div>

El problema es el siguiente yo imprimo en alert(dataStr); y obtengo "1","2","1" y lo pego con su respectivo atributo pero la grafica no se pinta si se supone que reemplazo los valores adecuados, ademas de que si los copio del alert y los pego manualmente si funciona.
Uso este plugin https://www.chartjs.org/.

One Answer

El dato que debes enviar es un arreglo con elementos separados por coma ["1", "2", "1"] y tú estás enviando una cadena '"1", "2", "1"' que, encerrada entre corchetes, sigue siendo una cadena, no 3 elementos.

Lo mismo pasa con colorStr

Crea un arreglo y agrega los elementos:

var conteo0=$(".GraficaConteo0").get(0);

var total=$(conteo0).text();
var dataStr=[]; // Arreglo, no cadena
var colorStr=[];

for(var i = 1; i <= total; i++){
    var conteo=$(".GraficaConteo0").get(i);
    var color0=$(".ColorGrafica0").get(i-1);
    var conteoFull=$(conteo).text();
    var ColorFull=$(color0).text();
    // Agrega el elemento al arreglo
    dataStr.push("'" + conteoFull + "'");
    colorStr.push("'" + ColorFull + "'");
}

Después lo agregas sin corchetes:

data: {
    labels: dataStr,
    datasets: [{
      data: dataStr,
      backgroundColor: colorStr,
      hoverBackgroundColor: colorStr,
// ***** resto de código

Finalmente, no estoy seguro de que sea necesario encerrar los valores entre comillas, si se trata de números probablemente no haya problema, pero si con valores alfanuméricos o cadenas, las comillas pueden hacer diferencia y evitar que funcione como lo necesitas. Si este es el caso:

    // Agrega el elemento al arreglo, sin comillas
    dataStr.push(conteoFull);
    colorStr.push(ColorFull);

Answered by Triby on December 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP