PHP MySQL Google Chart JSON – Exemplo completo

Procurei muito para encontrar um bom exemplo para gerar um Google Chart usando dados de tabela MySQL como fonte de dados. Procurei por alguns dias e percebi que existem poucos exemplos disponíveis para gerar um Google Chart (torta, barra, coluna, tabela) usando uma combinação de PHP e MySQL. Eu finalmente consegui um exemplo trabalhando.

Eu já recebi muita ajuda da StackOverflow, então esta vez eu retornarei alguns.

Eu tenho dois exemplos; um usa o Ajax e o outro não. Hoje, vou mostrar apenas o exemplo não-Ajax.

Uso:

     Requisitos: PHP, Apache e MySQL

     Instalação:

       --- Crie um database usando phpMyAdmin e nomeie-o "gráfico"
       --- Crie uma tabela usando phpMyAdmin e nomeie-o "googlechart" e faça 
           A tabela segura tem apenas duas colunas, pois usei duas colunas.  Contudo, 
           Você pode usar mais de 2 colunas se quiser, mas você deve alterar o 
           codifique um pouco para isso
       --- Especifique os nomes das colunas da seguinte forma: "weekly_task" e "percentagem"
       --- Insira alguns dados na tabela
       --- Para a coluna de porcentagem, use apenas um número

           ---------------------------------
           Dados de exemplo: Tabela (googlechart)
           ---------------------------------

           percentual semanal de tarefas
           ----------- ----------
           Sono 30
           Watching Movie 10
           trabalho 40
           Exercício 20    

PHP-MySQL-JSON-Google Chart Exemplo:

 'Weekly Task', 'type' => 'string'), array('label' => 'Percentage', 'type' => 'number') ); $rows = array(); while($r = mysql_fetch_assoc($sth)) { $temp = array(); // the following line will be used to slice the Pie chart $temp[] = array('v' => (string) $r['Weekly_task']); // Values of each slice $temp[] = array('v' => (int) $r['percentage']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); //echo $jsonTable; ?>       // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(); var options = { title: 'My Weekly Plan', is3D: 'true', width: 800, height: 600 }; // Instantiate and draw our chart, passing in some options. // Do not forget to check your div ID var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }     

PHP-PDO-JSON-MySQL-Google Chart Exemplo:

 setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); /* select all the weekly tasks from the table googlechart */ $result = $conn->query('SELECT * FROM googlechart'); /* --------------------------- example data: Table (googlechart) -------------------------- weekly_task percentage Sleep 30 Watching Movie 10 job 40 Exercise 20 */ $rows = array(); $table = array(); $table['cols'] = array( // Labels for your chart, these represent the column titles. /* note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for Slice title */ array('label' => 'Weekly Task', 'type' => 'string'), array('label' => 'Percentage', 'type' => 'number') ); /* Extract the information from $result */ foreach($result as $r) { $temp = array(); // the following line will be used to slice the Pie chart $temp[] = array('v' => (string) $r['weekly_task']); // Values of each slice $temp[] = array('v' => (int) $r['percentage']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; // convert data into JSON format $jsonTable = json_encode($table); //echo $jsonTable; } catch(PDOException $e) { echo 'ERROR: ' . $e->getMessage(); } ?>       // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(); var options = { title: 'My Weekly Plan', is3D: 'true', width: 800, height: 600 }; // Instantiate and draw our chart, passing in some options. // Do not forget to check your div ID var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }     

Exemplo de gráfico PHP-MySQLi-JSON-Google

 query('SELECT * FROM googlechart'); /* --------------------------- example data: Table (googlechart) -------------------------- Weekly_Task percentage Sleep 30 Watching Movie 10 job 40 Exercise 20 */ $rows = array(); $table = array(); $table['cols'] = array( // Labels for your chart, these represent the column titles. /* note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for Slice title */ array('label' => 'Weekly Task', 'type' => 'string'), array('label' => 'Percentage', 'type' => 'number') ); /* Extract the information from $result */ foreach($result as $r) { $temp = array(); // The following line will be used to slice the Pie chart $temp[] = array('v' => (string) $r['weekly_task']); // Values of the each slice $temp[] = array('v' => (int) $r['percentage']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; // convert data into JSON format $jsonTable = json_encode($table); //echo $jsonTable; ?>       // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(); var options = { title: 'My Weekly Plan', is3D: 'true', width: 800, height: 600 }; // Instantiate and draw our chart, passing in some options. // Do not forget to check your div ID var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }     

Alguns podem encontrar esse erro localmente ou no servidor:

 syntax error var data = new google.visualization.DataTable(); 

Isso significa que seu ambiente não suporta tags curtas, a solução é usar isso em vez disso:

  

E tudo deve funcionar bem!

use isso, ele realmente funciona:

data.addColumn não da sua chave, você pode adicionar mais colunas ou remover

 "; $data=json_encode($chart_array); ?>          

Você pode fazer isso de maneira mais fácil. E 100% trabalha que você deseja

 connect_error) { die("Connection failed: " . $con->connect_error); } else { //echo ("Connect Successfully"); } $query = "SELECT Date_time, Tempout FROM alarm_value"; // select column $aresult = $con->query($query); ?>    Massive Electronics