Fill ChartJS with PHP

Question

Fill ChartJS with PHP

Navigation

#1 by (0 votes)

0

I want to fill a graph with an array that I generate in PHP with a query in MYSQL but I do not know how to use it in the JS of the graph.

This PHP is where I generate the 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;
}

And the arrangement he gives me is this:

[ { 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 } ]

And here is where I want to insert it:

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"]   
        }
      ]
    }

Thank you in advance for your answers.

mysql php chart.js

asked by Carlos Roberto Luna Ochoa 12.12.2018 в 20:41

source

1 answer

problems when inserting new data to excel using datatables How do I send the value of a file type input by ajax to be used in the controller?

score 0 · Answer 1

Of course, if you are a friend, you must first build your arrangement of labels and data for the 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  
        }]
    }
});

I give you the solution in JSFiddle:

link

I hope you help, greetings.