PHP MySQL Google Chart JSON - полный пример

Я много искал, чтобы найти хороший пример для создания Google Chart с использованием данных таблицы MySQL в качестве источника данных. Я искал пару дней и понял, что существует несколько примеров создания диаграммы Google (круговая диаграмма, столбец, столбец, таблица) с использованием комбинации PHP и MySQL. Мне наконец удалось заставить работать один пример.

Ранее я получал большую помощь от StackOverflow, поэтому на этот раз я вернусь.

У меня есть два примера; один использует Ajax, а другой нет. Сегодня я покажу только пример без Ajax.

Использование:

    Requirements: PHP, Apache and MySQL

    Installation:

      --- Create a database by using phpMyAdmin and name it "chart"
      --- Create a table by using phpMyAdmin and name it "googlechart" and make 
          sure table has only two columns as I have used two columns. However, 
          you can use more than 2 columns if you like but you have to change the 
          code a little bit for that
      --- Specify column names as follows: "weekly_task" and "percentage"
      --- Insert some data into the table
      --- For the percentage column only use a number

          ---------------------------------
          example data: Table (googlechart)
          ---------------------------------

          weekly_task     percentage
          -----------     ----------
          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20    



Пример диаграммы PHP-MySQL-JSON-Google:

     '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:

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);
        }
        
      

      
        
        
      
    



Пример PHP-MySQLi-JSON-Google Chart

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);
    }
    
  

  
    
    
  

 Brick24 июл. 2017 г., 02:29
m +1, но это было бы действительно более полезно, если вы перенесете примеры в ответ и примете это.
 Peter10 февр. 2019 г., 11:46
Большое, большое спасибо за этот очень полезный пример. Мне удалось внести изменения в базовую линейную диаграмму с моими собственными данными из базы данных. В HTML-коде была только одна строка, которую я должен заменить в вашем скриптеПример диаграммы PHP-PDO-JSON-MySQL-Google: закомментировал эту строку: и заменить на эту строку:, Это основано на примере здесь: [developers.google.com/chart/interactive/docs/gallery/linechart].
 mickmackusa14 сент. 2018 г., 13:52
@ КОМАНДА МОДЕРАЦИИ, пожалуйста, перенастройте эту страницу, чтобы образовательная часть была в ответе. (На самом деле ОП отрывается, повторяя точку зрения, потому что положительные отзывы по вопросам стоят только наполовину). Эта страница нев настоящее время приглашают ответы. Пожалуйста, исправьте как-нибудь.
 mickmackusa14 сент. 2018 г., 13:55
Я голосую, чтобы закрыть этот вопрос как не по теме, потому что это не вопрос, а учебник. Он не поддается ответу и образцом для подражания некорректно ведет публикацию контента.
 Ömer An09 сент. 2016 г., 06:45
Это не вопрос, а очень полезный ответ.
 Carlos Campderrós09 апр. 2013 г., 09:56
не должен»Не лучше ли привести примеры в качестве ответов?
 thaJeztah03 февр. 2013 г., 01:12
Пожалуйста, не'т использоватьmysql_* функции в новом коде, Они больше не поддерживаютсяи официально устарели, Увидетькрасная коробка? Узнать оготовые заявления вместо этого и использоватьPDO или жеMySQLi -Эта статья поможет вам решить, какой. Если вы выбираете PDO,Вот хороший учебник.

Ответы на вопрос(4)

data.addColumn нет вашего ключа, вы можете добавить больше столбцов или удалить

<!--?php
$con=mysql_connect("localhost","USername","Password") or die("Failed to connect with database!!!!");
mysql_select_db("Database Name", $con); 
// The Chart table contain two fields: Weekly_task and percentage
//this example will display a pie chart.if u need other charts such as Bar chart, u will need to change little bit to make work with bar chart and others charts
$sth = mysql_query("SELECT * FROM chart");

while($r = mysql_fetch_assoc($sth)) {
$arr2=array_keys($r);
$arr1=array_values($r);

}

for($i=0;$i<count($arr1);$i++)
{
    $chart_array[$i]=array((string)$arr2[$i],intval($arr1[$i]));
}
echo "<pre-->";
$data=json_encode($chart_array);
?>


  
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // 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();
        data.addColumn("string", "YEAR");
        data.addColumn("number", "NO of record");

        data.addRows(<?php $data ?>);

        ]); 
      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 ur div ID
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  

  
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  

 Squig11 мая 2013 г., 21:54
Старший "MySQL» API (включая mysql_connect и связанные с ним функции) теперь устарел и не рекомендуется для использования в новом коде. Вместо этого рекомендуются более новые API PDO или MySQLi. Увидетьphp.net/manual/en/function.mysql-connect.php,php.net/manual/en/mysqlinfo.api.choosing.php а такжеphp.net/manual/en/... Больше подробностей.

иPHP-MySQLi-JSON-Google Chart Пример):

Вы вызвали метод draw () с неверным типом данных, а не с DataTable или DataView.

Решение будет таким: замените jsapi и просто используйте loader.js с:

google.charts.load('current', {packages: ['corechart']}) and 
google.charts.setOnLoadCallback 

- в соответствии с примечаниями к выпуску -> Версия Google Charts, которая остается доступной через загрузчик jsapi, больше не обновляется постоянно. Пожалуйста, используйте новый gstatic loader с этого момента.

что вы хотите

<!--?php
    $servername = "localhost";
    $username = "root";
    $password = "";  //your database password
    $dbname = "demo";  //your database name

    $con = new mysqli($servername, $username, $password, $dbname);

    if ($con--->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);

?>




    <title>Massive Electronics</title>
    <script type="text/javascript" src="loder.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){
            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([
                ['Date_time','Tempout'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Date_time"]."', ".$row["Tempout"]."],";
                    }
                ?>
               ]);

            var options = {
                title: 'Date_time Vs Room Out Temp',
                curveType: 'function',
                legend: { position: 'bottom' }
            };

            var chart = new google.visualization.AreaChart(document.getElementById('areachart'));
            chart.draw(data, options);
        }

    </script>


     <div id="areachart" style="width: 900px; height: 400px"></div>


Ссылка на loder.js здесьloder.js

 Max07 мая 2018 г., 10:08
Большое спасибо! это работает сейчас. Можете ли вы сказать мне, как настроить таблицу? где я могу получить информацию об этом? потому что у меня большой диапазон данных, график очень маленький и плотный.
 A.A Noman07 мая 2018 г., 10:05
Loder Js это ссылкаgstatic.com/charts/loader.js
 Max07 мая 2018 г., 09:52
Это полный код? что такое loder.js? Я не могзаставить его работать.
 A.A Noman07 мая 2018 г., 09:57
Это 100% работает для меня. Где твоя проблема? Данные собирают из базы данных и создают диаграммы этих данных.
 Max07 мая 2018 г., 10:01
Я создал php-файл с вашим кодом, установил соединение с БД, изменил имена полей таблицы и т. Д. Он показывает пустую страницу. Я нене может быть loder.js. Где я могу получить это? это может быть проблемой.
 A.A Noman07 мая 2018 г., 10:13
Перейдите по этой ссылкеdevelopers.google.com/chart/interactive/docs/quick_start  Может быть, это поможет вам. Если вы настраиваете свою таблицу просто отредактируйте$query = "SELECT Date_time, Tempout FROM alarm_value"; // select column этот

либо на сервере:

syntax error var data = new google.visualization.DataTable(<!--?=$jsonTable?-->);

Это означает, что их среда не поддерживает короткие теги, решение состоит в том, чтобы использовать это вместо:

<!--?php echo $jsonTable; ?-->

И все должно работать нормально!

Ваш ответ на вопрос