<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="point">
</div>
<script>
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAnnotations);
function drawAnnotations() {
var data = google.visualization.arrayToDataTable([
['Company', 'Facebook', {type: 'string', role: 'annotation'},
'Youtube', {type: 'string', role: 'annotation'}],
['Honda', 6505000, '6.5M', 5008000, '5M'],
['Hyundai', 6005000, '6M', 4008000, '4M'],
['Kia', 2095000, '2M', 2196000, '2.2M'],
['Jaguar', 5098100, '5.1M', 1003000, '1M'],
['Toyota', 6105000, '6.1M', 5508000, '5.5M']
]);
var options = {
title: 'Car Companies - Advertising Statistics',
height: 350,
chartArea: {
width: '50%'
},
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 12,
auraColor: 'none',
color: '#555'
},
boxStyle: {
stroke: '#ccc',
strokeWidth: 1,
gradient: {
color1: '#f3e5f5',
color2: '#f3e5f5',
x1: '0%', y1: '0%',
x2: '100%', y2: '100%'
}
}
},
hAxis: {
title: 'Total Amount',
minValue: 0,
},
vAxis: {
title: 'Companies'
}
};
var chart = new google.visualization.BarChart(document.getElementById('point'));
chart.draw(data, options);
}
</script> </body>
</html>