Return category in google charts bar graph

Viewed 36

I have the following code to create the chart.

PHP:

SELECT A.Mes, A.Total, A.Categoria
FROM 
(SELECT raddb.Categorias.Categoria, DATE_FORMAT(Reportado, '%Y-%m') AS Mes, COUNT(raddb.Denuncias.Categoria) AS Total
FROM raddb.Categorias LEFT OUTER JOIN raddb.Denuncias ON raddb.Denuncias.Categoria = raddb.Categorias.id
GROUP BY DATE_FORMAT(Reportado, '%Y-%m'), raddb.Categorias.Categoria) AS A WHERE A.Total > '0'");
$stmt->execute();
$json = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
    extract($row);
    $json[]= [(string)$Mes, (int)$Total, (string)$Categoria];
}
echo json_encode($json);

Data returned from php:

Mes,   Total, Categoria
2022-05, 1, Bullying (Mobbing, Bossing, Pessoal, Gossip)
2022-05, 1, Preocupação relativas à saúde e segurança
2022-05, 2, Suspeita de Roubo, Corrupção ou Desfalque
2022-05, 1, Feedback positivo ou elogio

Then the html and javascript:

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart1);

function drawChart1() {
  $.getJSON('denunciasmes.php', function (data) {

    var tdata = new google.visualization.DataTable();

    tdata.addColumn('string', '');
    tdata.addColumn('number', 'Total');

    for (var i = 0; i < data.length; i++) {
      tdata.addRow([data[i][0], parseInt(data[i][1]) ]);
    }

    var options = {
      chart: {
       
      }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(tdata, google.charts.Bar.convertOptions(options));
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="columnchart_material" style="height: 500px;"></div>

Now the problem is that the graph only returns the month and the total of each category as shown here in the image enter image description here

But I wanted the category to appear instead of Total. Only then does the graph make sense, because that way it identifies the month, the total for each month and the category it refers to.

Can you help?

I've tried a few ways and I can't. This way it doesn't loop:

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart1);

function drawChart1() {
  $.getJSON('denunciasmes.php', function (data) {

    for (var i = 0; i < data.length; i++) {

      var tdata = new google.visualization.DataTable();

      tdata.addColumn('string', '');
      tdata.addColumn('number', data[i][2]);

      tdata.addRow([data[i][0], parseInt(data[i][1]) ]);
    }

    var options = {
      chart: {
       
      }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(tdata, google.charts.Bar.convertOptions(options));
  });
}

I've also tried this way:

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart1);

function drawChart1() {
  $.getJSON('denunciasmes.php', function (data) {
     
   
    for (var i = 0; i < data.length; i++) {

      teste = data[i][0];
      teste1 = data[i][1];
      teste2 = data[i][2];

      var tdata = new google.visualization.DataTable();

      tdata.addColumn('string', '');
      tdata.addColumn('number', teste2);
    }
    for (var i = 0; i < data.length; i++) {
      
      tdata.addRow([data[i][0], parseInt(data[i][1]) ]);
    }

    var options = {
      chart: {
       
      }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(tdata, google.charts.Bar.convertOptions(options));
  });
}

But it returns the same category on all bars created in the chart.

The problem is that I should put the code in js to create the columns according to the data returned from the database, but I'm not able to.

1 Answers

You have to add a third column and then provide the data for it.

tdata.addColumn('string', '');
tdata.addColumn('number', 'Total');
tdata.addColumn('string', 'Category'); // add category column
    
for (var i = 0; i < data.length; i++) {
   tdata.addRow([data[i][0], parseInt(data[i][1]), data[i][2] ]); //add category info
}
Related