Google Bar chart labeling Dynamic data.How to add labels? - php

Question

I am creating a Google charts bar chart! The data comes from MySQL, using JSON and PHP.
All I would like is to put labels at the end of Bar charts. Because data are dynamic, i found it difficult.
<?php
$sth = mysql_query("select * from table");
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'Stats', 'type' => 'string'),
array('label' => 'Value', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth))
{
$temp = array();
$temp[] = array('v' => (string) $r['Stats']);
$temp[] = array('v' => (int) $r['Value']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {
legend: {position: 'none'},
bar: {groupWidth: "85%"},
colors:['#4A9218'],
hAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: 400,
min: 0,
},
gridlines: {
count: 10,
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!--this is the div that will hold the pie chart-->
<div id="chart_div" style="width:100%; height:200px"></div>
Outcome :
Bar chart with no labeling
Outcome I am looking for:
Bar chart with labeling at the end on the right

Answer 1

First, add JSON_NUMERIC_CHECK to your json_encode call, as MySQL outputs numbers as strings, and inputting numbers as strings can cause problems with some charts:
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
If you want to add the data values as annotations on the bars, the easiest way is to create a DataView that includes a calculated 'annotation' role column that takes its data from the value column and stringifies it:
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}]);
Then use the view to draw your chart instead of the DataTable:
chart.draw(view, options);