0

Quiero llenar una grafica con un array que genero en PHP con una consulta en MYSQL pero no se como usarlo en el JS de la grafica.

En este PHP es donde genero el array:

$nmes = $mes;
$sumpt = 0;
$nestedData=array();


    $sqlven = "SELECT * FROM registros WHERE MONTH(fecha_entrega) =".$row["mes"]." and estado = 'entregado'";
    $queryven = mysqli_query($conexion, $sqlven) or die ("Error con la consulta");

    while($rowven = mysqli_fetch_array($queryven)){

        $summ3= $summ3 + $rowven["m3"];

        $sumpt = $sumpt + $rowven["pu"] * $rowven["m3"];

    }

    $nestedData["mes"] = $nmes;
    $nestedData["sumpt"] = $sumpt;

    $data[] = $nestedData;
}

Y el arreglo que me da es este:

[ { mes: "Junio", sumpt: 446131 }, { mes: "Julio", sumpt: 907135.8 }, { mes: "Agosto", sumpt: 1156675 }, { mes: "Septiembre", sumpt: 366161 }, { mes: "Octubre", sumpt: 1245362.5 }, { mes: "Noviembre", sumpt: 854915 }, { mes: "Diciembre", sumpt: 161905 } ]

Y aqui es donde la quiero insertar:

var areaChartData = {
      labels  : ["Aqui irian los datos"],
      datasets: [
        {
          label               : 'Electronics',
          fillColor           : 'rgba(210, 214, 222, 1)',
          strokeColor         : 'rgba(210, 214, 222, 1)',
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : ["Aqui irian los datos"]   
        }
      ]
    }

De antemano muchas gracias por sus respuestas.

1 respuesta 1

-1

Claro que si amigo, primero debes armar tu arreglo de labels y data para el chartjs

HTML :

<canvas id="myChart" width="400" height="400"></canvas>

Javascript :

array = [
{
mes: "Junio",
sumpt: 446131
},
{
mes: "Julio",
sumpt: 907135.8
},
{
mes: "Agosto",
sumpt: 1156675
},
{
mes: "Septiembre",
sumpt: 366161
},
{
mes: "Octubre",
sumpt: 1245362.5
},
{
mes: "Noviembre",
sumpt: 854915
},
{
mes: "Diciembre",
sumpt: 161905
}
]


//console.log(array)

var labels = []; 
var data = []; 

array.forEach(function(element) {
  //console.log(element);
  labels.push(element.mes)
  data.push(element.sumpt)
});

console.log(labels)

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [ {
          label               : 'Electronics',
          fillColor           : 'rgba(210, 214, 222, 1)',
          strokeColor         : 'rgba(210, 214, 222, 1)',
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : data  
        }]
    }
});

te paso la solucion en JSFiddle :

https://jsfiddle.net/xah23ftg/

Espero que te ayude, saludos.

2
  • Muchas gracias, amigo. Entiendo tu respuesta, pero creo que mi princpial problema es que no se como llevar el array que creo desde el archivo PHP hasta el HTML donde hago la grafica, ya que ambos estan en archivos separados. Commented el 12 dic. 2018 a las 20:10
  • okey, en este caso me imagino que tienes dos archivos por ejemplo archivo.php y index.html, si es asi tienes que hacer una consulta con ajax $.ajax({type: 'POST',url: 'php/procesar.php' eso te dara un response donde estara tu array
    – Euler
    Commented el 12 dic. 2018 a las 23:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.