Databases
StackOverflow2013
Postsdbo
POPHP MySQL Google Chart JSON - Complete Example
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP MySQL Google Chart JSON - Complete Example
    primarykey
    data
    text
    <p>I have searched a lot to find a good example for generating a Google Chart using MySQL table data as the data source. I searched for a couple of days and realised that there are few examples available for generating a Google Chart (pie, bar, column, table) using a combination of PHP and MySQL. I finally managed to get one example working.</p> <p>I have previously received a lot of help from StackOverflow, so this time I will return some.</p> <p>I have two examples; one uses Ajax and the other does not. Today, I will only show the non-Ajax example.</p> <p><strong>Usage:</strong></p> <pre> 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 </pre> <p><br/></p> <p><strong>PHP-MySQL-JSON-Google Chart Example:</strong> </p> <pre><code> &lt;?php $con=mysql_connect("localhost","Username","Password") or die("Failed to connect with database!!!!"); mysql_select_db("Database Name", $con); // The Chart table contains two fields: weekly_task and percentage // This example will display a pie chart. If you need other charts such as a Bar chart, you will need to modify the code a little to make it work with bar chart and other charts $sth = mysql_query("SELECT * FROM chart"); /* --------------------------- example data: Table (Chart) -------------------------- weekly_task percentage Sleep 30 Watching Movie 40 work 44 */ //flag is not needed $flag = true; $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 column title array('label' =&gt; 'Weekly Task', 'type' =&gt; 'string'), array('label' =&gt; 'Percentage', 'type' =&gt; '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' =&gt; (string) $r['Weekly_task']); // Values of each slice $temp[] = array('v' =&gt; (int) $r['percentage']); $rows[] = array('c' =&gt; $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); //echo $jsonTable; ?&gt; &lt;html&gt; &lt;head&gt; &lt;!--Load the Ajax API--&gt; &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; // 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(&lt;?=$jsonTable?&gt;); 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); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!--this is the div that will hold the pie chart--&gt; &lt;div id="chart_div"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><br/> <strong>PHP-PDO-JSON-MySQL-Google Chart Example:</strong></p> <pre><code>&lt;?php /* Script : PHP-PDO-JSON-mysql-googlechart Author : Enam Hossain version : 1.0 */ /* -------------------------------------------------------------------- Usage: -------------------------------------------------------------------- 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 */ /* Your Database Name */ $dbname = 'chart'; /* Your Database User Name and Passowrd */ $username = 'root'; $password = '123456'; try { /* Establish the database connection */ $conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password); $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); /* select all the weekly tasks from the table googlechart */ $result = $conn-&gt;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' =&gt; 'Weekly Task', 'type' =&gt; 'string'), array('label' =&gt; 'Percentage', 'type' =&gt; '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' =&gt; (string) $r['weekly_task']); // Values of each slice $temp[] = array('v' =&gt; (int) $r['percentage']); $rows[] = array('c' =&gt; $temp); } $table['rows'] = $rows; // convert data into JSON format $jsonTable = json_encode($table); //echo $jsonTable; } catch(PDOException $e) { echo 'ERROR: ' . $e-&gt;getMessage(); } ?&gt; &lt;html&gt; &lt;head&gt; &lt;!--Load the Ajax API--&gt; &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; // 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(&lt;?=$jsonTable?&gt;); 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); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!--this is the div that will hold the pie chart--&gt; &lt;div id="chart_div"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><br/> <strong>PHP-MySQLi-JSON-Google Chart Example</strong></p> <pre><code>&lt;?php /* Script : PHP-JSON-MySQLi-GoogleChart Author : Enam Hossain version : 1.0 */ /* -------------------------------------------------------------------- Usage: -------------------------------------------------------------------- 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 */ /* Your Database Name */ $DB_NAME = 'chart'; /* Database Host */ $DB_HOST = 'localhost'; /* Your Database User Name and Passowrd */ $DB_USER = 'root'; $DB_PASS = '123456'; /* Establish the database connection */ $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME); if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); } /* select all the weekly tasks from the table googlechart */ $result = $mysqli-&gt;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' =&gt; 'Weekly Task', 'type' =&gt; 'string'), array('label' =&gt; 'Percentage', 'type' =&gt; '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' =&gt; (string) $r['weekly_task']); // Values of the each slice $temp[] = array('v' =&gt; (int) $r['percentage']); $rows[] = array('c' =&gt; $temp); } $table['rows'] = $rows; // convert data into JSON format $jsonTable = json_encode($table); //echo $jsonTable; ?&gt; &lt;html&gt; &lt;head&gt; &lt;!--Load the Ajax API--&gt; &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; // 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(&lt;?=$jsonTable?&gt;); 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); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!--this is the div that will hold the pie chart--&gt; &lt;div id="chart_div"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UST30
    1. USAnam
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPHP MySQL Google Chart JSON - Complete Example
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POPHP MySQL Google Chart JSON - Complete Example
      1. USjimbo
      1. VTFavorite
    3. VO
      singulars
      1. POPHP MySQL Google Chart JSON - Complete Example
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO[**Please, don't use `mysql_*` functions in new code**](http://bit.ly/phpmsql). They are no longer maintained [and are officially deprecated](http://j.mp/XqV7Lp). See the [**red box**](http://j.mp/Te9zIL)? Learn about [*prepared statements*](http://j.mp/T9hLWi) instead, and use [PDO](http://php.net/pdo) or [MySQLi](http://php.net/mysqli) - [this article](http://j.mp/QEx8IB) will help you decide which. If you choose PDO, [here is a good tutorial](http://j.mp/PoWehJ).
      singulars
      1. POPHP MySQL Google Chart JSON - Complete Example
      1. USthaJeztah
    2. COThank you for the example. Perhaps you or someone else could give an example using PDO as well?
      singulars
      1. POPHP MySQL Google Chart JSON - Complete Example
      1. USengineerX
    3. COI Will do PDO and MYSQLI example soon..
      singulars
      1. POPHP MySQL Google Chart JSON - Complete Example
      1. USAnam
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload