In this post , we share a sample HTML working example code of displaying a Bar chart with data labels integrating with Google Chart APIs. Hope it may be useful to few beginners.
Copy paste the below HTML code in any editor and open in browser for display. For more details on customizing the charts visit Google charts web page.
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(tcinfo);
function tcinfo() {
// Chart print : //////////////////////////////////////////////////////////////////////////////////
var fruitsdata = google.visualization.arrayToDataTable([
['Fruits', 'Count'],
['Apple',16],
['Orange',35],
['Grapes',78],
['WaterMelon',25],
['Gauva',23]
]);
var view = new google.visualization.DataView(fruitsdata);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
]);
var fruitsoptions = {
title: 'Fruits count',
chartArea: {width: '50%'},
legend: {position: 'bottom'},
hAxis: {
minValue: 0,
ticks: []
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_fruits'));
chart.draw(view, fruitsoptions);
}
</script>
</script>
<div style="float: left; width: 300px; height: 400px;" id="chart_fruits"></div>
<p><font face="Arial" size="2"><a href=http://shareolite.blogspot.com>For much more examples , Visit Shareolight.blogspot.com </a></p>
</body>
</html>