Ir ao conteúdo
  • Cadastre-se

PHP Como colocar dados no google charts vindo de uma tabela php


Posts recomendados

criei uma tabela de registros que salva em um banco de dados php mysql, onde na coluna titulo, eu coloco em cada item, uma situacao disponivel (ativo, inativo, suspenso)

2142225327_download(1).png.27dcc3de71ecc526d6fe505132eb30a7.png

 

Eu gostaria que essas 3 situações fosse representadas tambem no grafico do google charts, ja tentei procurar em varios sites mas não obtive sucesso.

 

meu codigo da tabela php 

<?php	
	$pdo_statement = $pdo_conn->prepare("SELECT * FROM posts ORDER BY id DESC");
	$pdo_statement->execute();
	$result = $pdo_statement->fetchAll();

	
?>
<div style="text-align:right;margin:20px 0px;"><a href="add.php" class="button_link"><img src="crud-icon/add.png" title="Add New Record" style="vertical-align:bottom;" /> Create</a></div>
<table class="tbl-qa">
  <thead>
	<tr>
	  <th class="table-header" width="20%">Title</th>
	  <th class="table-header" width="40%">Description</th>
	  <th class="table-header" width="20%">Date</th>
	  <th class="table-header" width="5%">Actions</th>
	</tr>
  </thead>
  <tbody id="table-body">
	<?php
	if(!empty($result)) { 
		foreach($result as $row) {
		
	?>
	  <tr class="table-row">
		<td><?php echo $row["post_title"]; ?></td>
		<td><?php echo $row["description"]; ?></td>
		<td><?php echo $row["post_at"]; ?></td>
		<td><a class="ajax-action-links" href='edit.php?id=<?php echo $row['id']; ?>'><img src="crud-icon/edit.png" title="Edit" /></a> <a class="ajax-action-links" href='delete.php?id=<?php echo $row['id']; ?>'><img src="crud-icon/delete.png" title="Delete" /></a></td>
	  </tr>
    
    <?php
		}
	}
	?>

Codigo do grafico do google charts

 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

 

Link para o comentário
Compartilhar em outros sites

  • Moderador

@MarcosCM Olá,

Basicamente, dentro do javascript você pode colocar o php também!

No seu exemplo acima, os dados que compõem  o gráfico é:

var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

Então basta fazer a consulta certa e montar esta estrutura com o resultado dela.

var data = google.visualization.arrayToDataTable([
 ['Situação', 'Total'],
 <?php 

 $consulta = mysqli_query($conexao,"SELECT count(title) AS count, title 
                                    FROM usuarios GROUP BY title");
 while($resultado = mysqli_fetch_object($consulta)):

 echo "['". $resultado->title ."',". $resultado->count."],";
 endwhile;
?>
 ]);

Como podes ver no exemplo acima, colocamos dentro da estrutura, o php fazendo a busca dos dados, somando os registros e agrupando pelo title.  Claro, que isso são exemplos porque não sei como é o nome do campo na sua tabela.

Então dentro do laço de while, coloque o resultado que vai ser inserido na estrutura.

 

Se tudo der certo, de acordo com o primeiro print o que vai ser gerado no php será:

var data = google.visualization.arrayToDataTable([
          ['situação', 'Total'],
          ['Ativo',     3],
          ['Invativo',  2],
          ['Suspenso',  1]
        ]);

Lembrando, que todo código contido aqui é mero exemplo, por isso não recomendo copiar. Garanta  que tenha entendido o funcionamento, possibilitando que você implemente de acordo com suas necessidades. :thumbsup:

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...