PHP with Google Charts

Question

PHP with Google Charts

Navigation

#1 by (0 votes)

0

I'm implementing LMS (Moodle) reporting management program.

I've done all the reporting queries and I'm trying to implement graphics with Google Charts , but I'm not able to merge PHP with JavaScript , to display the graphs as per the queries.

</head> 
<body> 
    <img src="midias/logo02.jpg"> <br />  
    <h3>➡Relatório Curso por Categoria </h3>
    <legend>Pesquisa/Filtros</legend>
    <div class ="cont">
            <input type="text"  class="input-search"  alt="lista-clientes"  placeholder = "Pesquisar Informações" />
            <br style="clear:both">
            <div id="cabecalho">
                <div id="bt_voltar">
                <a href="menu.php"><img src="midias/icone_back.png" alt="Voltar" width="54" height="45" >
                </div>
                </a><div id='registros'></div><br />
            </div>
              <table class="lista-clientes" border =1 width="100%"> 
                  <thead><tr>  
                   <th>CATEGORIA </th> 
                <th>QUANTIDADE DE CURSO POR CATEGORIA</th>         
        </tr> </thead>     
    <tbody>            
<?php
//Conexão Moodle  
require_once("../../../config.php");       
//QUERY CURSO POR CATEGORIA   

         $sql ="SELECT k.name AS 'categoria',COUNT(c.category) AS 'qtd' FROM mdl_course c 
        INNER JOIN  
        mdl_course_categories k 
        ON c.category = k.id 
        GROUP BY 
        k.name, c.category";



 //EXECUTA A CONSULTA  
    $start_consulta=$DB->get_records_sql($sql); 

// LOOP DE EXIBIÇÃO DA CONSULTA 
         foreach($start_consulta as $consulta){                           
              echo "<tr ><td class='td_aling'>".$consulta->categoria."</td>
              <td class='td_aling'>" .$consulta->qtd."</td>
            </tr>";            
            $i++;   
          }

      echo"<script language='javascript'> 
      var total =  '{$i}';
      alert('Registros encontrados: '+total);
      </script>"; 
?>

</tbody>  
</table>   
</div>

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Categoria', 'Quantidade de Cursos'],
      <?php 
        echo "<script language='javascript'
            for(c=1;c<=i, c++){
             ['Work',     11]
            }"

      ?>

    ]);

    var options = {
      title: 'Gráfico de Curso do Por Categoria'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

php javascript google-charts

asked by anonymous 11.09.2017 / 20:45

1 answer

How to leave a Datagridbview column invisible to the user Reload with Jquery without cache (Chrome)

score 0 · Answer 1

You will first have to either throw your values into a php variable, with mysql would be something like:

$select_pacotes = "SELECT tabela.nome AS pacote, COUNT(tabela2.id) AS inscricoes FROM tabela2, tabela WHERE tabela.evento =  tabela2.id AND tabela2.status = 'Aprovado'";

	$result=$conexao->prepare($select_pacotes);
	$result->execute();
	$cont=$result->rowCount();
	if ($cont>0) {
		while($pacote=$result->FETCH(PDO::FETCH_OBJ)){
			$dados = $dados."['".$pacote->pacote."', ".$pacote->inscricoes."],\n";
		}
	}

With this variable the javascript of the chart would look like this:

<script type="text/javascript">
google.charts.load("visualization", "1", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

 var data = google.visualization.arrayToDataTable([
   ['Pacotes', 'Inscritos'],
   <?php echo $dados; ?>
]);

// Set chart options
var options = {'title':'',
              'pieHole': 0.4,
			   pieSliceTextStyle: {
				color: 'black',
			   },
			  'legend': 'none',
			  'width':'100%',
			  'height':450};

// Instantiate and draw our chart, passing in some options.
			var chart = new 
  google.visualization.PieChart(document.getElementById('chart_div'));
			chart.draw(data, options);
		}
	</script>

And, it would just create your div in HTML, like this:

<div class="panel-body">
  <div id="chart_div" class="col-md-6" style="width:100%;"></div>
</div>