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/
.
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP