Pie Chart
ref - https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
using the ^page sample, at legends doesnt write the value, use the following fix by Fabio Cordeiro
JavaScript:
//http://stackoverflow.com/a/37333511
</php
//fill $result with a PDO recordset
$countries = array();
$countries[] = array('Country', 'Hits per Day');
foreach($result as $row) {
$countries[] = array($row[0]['country'], sizeof($row));
}
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<?= json_encode($countries);?>);
var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
total = total + data.getValue(i, 1);
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
var label = data.getValue(i, 0);
var val = data.getValue(i, 1) ;
var percentual = ((val / total) * 100).toFixed(1);
data.setFormattedValue(i, 0, label + ' - '+val +' ('+ percentual + '%)');
}
var options = {
title: 'Tickets Per Country'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 800px;"></div>
</body>
</html>or you can draw lines and show the values adding this to options :
JavaScript:
//http://stackoverflow.com/a/19181740
legend: {
position: 'labeled'
}Fixing the bootstrap nav-tabs when displaying Google Chart(s) on more than 1 tab
JavaScript:
//src - http://stackoverflow.com/a/30468366
<?php
//fill $result with a PDO recordset
$countries = array();
$countries[] = array('Country', 'Hits per Day');
foreach($result as $row) {
$countries[] = array($row[0]['country'], sizeof($row));
}
//fill $result2 with a PDO recordset
$users = array();
$users[] = array('Users', 'Hits per Day');
foreach($result2 as $row) {
$users[] = array($row[0]['users'], sizeof($row));
}
?>
<html>
<head>
<script src="assets/jquery-3.1.1.min.js"></script>
<script src="assets/bootstrap.min.js"></script>
<link href="assets/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//output charts to PNG - https://developers.google.com/chart/interactive/docs/printing
$(function() {
//fix to draw or redraw when user switch tab
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//http://stackoverflow.com/a/30468366
//draw the pies TAB1
if (this.href.indexOf('#countries')>0){
byCountryPIE();
//any other chart for 1st tab.
//byCountrySoftwaresPIE();
//byCountryCompaniesPIE();
}
//draw the pies TAB2
if (this.href.indexOf('#users')>0){
byUserPIE();
//any other chart for 2nd tab.
//byUserSoftwaresPIE();
//byUserCompaniesPIE();
}
})
});
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(draw_pies);
//triggered only by^
function draw_pies(){
byCountryPIE();
//any other chart for 1st tab.
//byCountrySoftwaresPIE();
//byCountryCompaniesPIE();
}
/////////////////////////////
//byCountryPIE
function byCountryPIE() {
var data = google.visualization.arrayToDataTable(<?= json_encode($countries);?>);
//fix to display the value in legend
var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
total = total + data.getValue(i, 1);
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
var label = data.getValue(i, 0);
var val = data.getValue(i, 1) ;
var percentual = ((val / total) * 100).toFixed(1);
data.setFormattedValue(i, 0, label + ' - '+val +' ('+ percentual + '%)');
}
//fix to display the value in legend
var options = {
title: 'Tickets Per Country'
};
var chart = new google.visualization.PieChart(document.getElementById('byCountryPIE'));
chart.draw(data, options);
}
//------------USERS------------
/////////////////////////////
//byUserPIE
function byUserPIE() {
var data = google.visualization.arrayToDataTable(<?= json_encode($users);?>);
//fix to display the value in legend
var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
total = total + data.getValue(i, 1);
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
var label = data.getValue(i, 0);
var val = data.getValue(i, 1) ;
var percentual = ((val / total) * 100).toFixed(1);
data.setFormattedValue(i, 0, label + ' - '+val +' ('+ percentual + '%)');
}
//fix to display the value in legend
var options = {
title: 'Tickets Per User'
};
var chart = new google.visualization.PieChart(document.getElementById('byUserPIE'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="container-fluid">
[LIST]
<li role="presentation" class="active">[url='#countries']Countries[/url]
<li role="presentation">[url='#users']Users[/url]
<li role="presentation">[url='#about']About[/url]
[/LIST]
<div class="tab-content">
<div id="countries" class="tab-pane fade in active">
<div class="row">
<div class="col-md-6">
<div id="byCountryPIE" style="width: 1000px; height: 800px;"></div>
</div>
</div>
</div>
<div id="users" class="tab-pane fade">
<div class="row">
<div class="col-md-6">
<div id="byUserPIE" style="width: 1000px; height: 800px;"></div>
</div>
</div>
</div>
<div id="about" class="tab-pane fade">
<div class="row">
pipiscrew sample
</div>
</div>
</div>
</div>
</body>
</html>dynamic add columns to Google Bar Chart!
reference
http://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
JavaScript:
//sample1
<?php
$chart_row_setup = array();
$chart_columns_setup= array();
$chart_columns_setup[]="Type";
$chart_columns_setup[]="Income";
$chart_columns_setup[]="Expenses";
$chart_columns_setup[]="NET";
//chart legend
$chart_row_setup[0] = $chart_columns_setup;
for ($i=1;$i<12;$i++){
$col_vals= array();
$col_vals[]=monthName($i);
$col_vals[]=(int)$ListOfBalanceRECS[$i]->income;
$col_vals[]=(int)$ListOfBalanceRECS[$i]->expense;
$col_vals[]=(int)$ListOfBalanceRECS[$i]->net;
$chart_row_setup[] = $col_vals;
}
?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<?= json_encode($chart_row_setup);?>);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses and Profit',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
JavaScript:
//sample2
<?php
//get users
$chart_db_users = getSet($db,"select user_id,fullname from users where user_level_id in (31,42,59)",null);
$chart_row_setup = array();
$chart_columns_setup= array();
$chart_columns_setup[]="Month";
for( $i= 0 ; $i <= sizeof($chart_db_users)-1 ; $i++ )
{
$chart_columns_setup[] = $chart_db_users[$i]["fullname"];
}
//always on 0 array position are the bar names
$chart_row_setup[0] = $chart_columns_setup;
//below merge the bars values
$col_vals= array();
//for each month
for( $m= 1 ; $m <= 12 ; $m++ )
{
$col_vals= array();
$col_vals[]=monthName($m);
//construct valid date for mySQL
if ($m<10)
{
$start = date("Y-0{$m}-01");
$end = get_end_of_the_month($m,date('Y'));
}
else
{ $start = date("Y-{$m}-01");
$end = get_end_of_the_month($m,date('Y'));
}
//for each user
for( $i= 0 ; $i <= sizeof($chart_db_users)-1 ; $i++ )
{
//query with date between depends on $m variable
$col_vals[] = (int) getScalar($db,"select count(offer_id) from offers where offer_seller_id=".$chart_db_users[$i]['user_id']." and offer_proposal_date between '".$start."' and '".$end."'",null);
}
$chart_row_setup[]=$col_vals;
}
//http://edpriceishungry.com/2010/01/04/converting-integers-to-monthnames-in-php/
function monthName($month_int) {
$month_int = (int)$month_int;
$timestamp = mktime(0, 0, 0, $month_int);
return date(“F”, $timestamp);
}
function get_end_of_the_month($month, $year) {
if (strlen($month)==1)
$month="0".$month;
//t returns the number of days in the month of a given date
$d = date("t", strtotime(date("{$year}-{$month}-d")));
$m = date("{$year}-{$month}-{$d}"); //format back to mysql style!
return $m;
}
?>
//pass array to javascript
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<?= json_encode($chart_row_setup);?>);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>