<!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(drawDualX);
function drawDualX() {
var data = google.visualization.arrayToDataTable([
['Companies', 'Facebook ', 'Youtube'],
['Honda', 6505000, 8008000],
['Hyundai', 6005000, 4008000],
['Kia', 2095000, 2196000],
['Jaguar', 5098100, 1003000],
['Toyota', 6105000, 5508000]
]);
var options = {
height:400,
chart: {
title: 'Car Companies - Advertising Statistics',
subtitle: 'Based on Arpil 19 - Feb 20'
},
hAxis: {
title: 'Total Population'
},
vAxis: {
title: 'City'
},
bars: 'horizontal',
series: {
0: {axis: 'facebook'},
1: {axis: 'youtube'}
},
axes: {
x: {
facebook: {label: 'Advertisement in Facebook (in millions)', side: 'top'},
youtube: {label: 'Advertisement in Youtube (in millions)'}
}
}
};
var materialChart = new google.charts.Bar(document.getElementById('point'));
materialChart.draw(data, options);
}
</script> </body>
</html>