Google Charts & Tables

Present your data in a beautiful way with Google Charts – no additional software needed, just a little bit of coding…

On this page examples with code are listed, just copy them to your file and adept the text and static values.
If you want to include real-time data from your database, just write your query as usual and add the value to the JavaScript, don’t forget to connect to your database:

$query = "SELECT COUNT(ID) FROM table_dog";
$result = mysqli_query($link, $query); 
$total = mysqli_fetch_row($result);
...
['11/2015',  142228],
['11/2016',  152443],
...
['today', <?php echo $total[0]; ?> ]

If you choose the chart “Table” – there is a lot of features to show your data in tables!

For the example below you need 3 files to make it work:
breederDirectory.php

<?php
include_once $abs_us_root.$us_url_root.'json/breeders.php';
?>
<h3>Breeder Directory </h3>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table', 'controls']});
google.charts.setOnLoadCallback(drawmsgtable);
function drawmsgtable() {
var msgdata = $.ajax({
url: "ajax/getBreeders.php",
dataType: "json",
async: false
}).responseText;
var messagedatatable = new google.visualization.DataTable(msgdata);

var options = {
backgroundColor: 'transparent',
allowHtml: true,
page: 'enable',
pageSize: 20,
pagingSymbols: {
prev: 'prev',
next: 'next'
},
pagingButtonsConfiguration: 'auto',
width: 'auto'
};

$('#table_div').empty();

var dashboard = new google.visualization.Dashboard(document.getElementById('dash'));

var msgTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: options
});

var control = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
matchType: ('any')
}
});

var control1 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'control1_div',
options: {
filterColumnIndex: 2,
matchType: ('any')
}
});

var control4 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'control4_div',
options: {
filterColumnIndex: 5,
matchType: ('any')
}
});

dashboard.bind([control, control1, control4], [msgTable]);
dashboard.draw(messagedatatable);
};
</script>
<div id="dash">
<table>
<tr>
<td><div id="control_div"></div></td>
<td><div id="control1_div"></div></td>
<td><div id="control4_div"></div></td>

</tr>
</table>

json/breeders.php

<?php
$result = $dbh->query("SELECT Name,Page, Country, Phone, Homepage, Kennel, Email FROM breederDirectory ");
$table = array();
$table['cols'] = array(
array('id' => "", 'label' => 'Name', 'pattern' => "", 'type' => 'string'),
array('id' => "", 'label' => 'Page', 'pattern' => "", 'type' => 'string'),
array('id' => "", 'label' => 'Country', 'pattern' => "", 'type' => 'string'),
array('id' => "", 'label' => 'Phone', 'pattern' => "", 'type' => 'string'),
array('id' => "", 'label' => 'Homepage', 'pattern' => "", 'type' => 'string'),
array('id' => "", 'label' => 'Kennel', 'pattern' => "", 'type' => 'string'),
array('id' => "", 'label' => 'Email', 'pattern' => "", 'type' => 'string')
);
$rows = array();

while ($nt = $result->fetch())
{
$temp = array();

$temp[] = array('v' => utf8_encode($nt['Name']), 'f' =>NULL);
$temp[] = array('v' => utf8_encode($nt['Page']), 'f' =>NULL);
$temp[] = array('v' => utf8_encode($nt['Country']), 'f' =>NULL);
$temp[] = array('v' => utf8_encode($nt['Phone']), 'f' =>NULL);
$temp[] = array('v' => utf8_encode($nt['Homepage']), 'f' =>NULL);
$temp[] = array('v' => utf8_encode($nt['Kennel']), 'f' =>NULL);
$temp[] = array('v' => utf8_encode($nt['Email']), 'f' =>NULL);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;

$fp = fopen('json/breeders.json', 'w');
fwrite($fp, json_encode($table));
fclose($fp);
?>

ajax/getBreeders.php

<?php
$string = file_get_contents ("../json/breeders.json");
echo $string;
?>

breeders.php fetches the data from the database table and converts these data into JSON, getBreeders.php reads this json file you just created, breederDirectory.php actually creates the Google table.