<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<style>
#myDrawChart{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items:center;
margin:20px 0;
}
#myDrawChart > span{
width:450px;
height:300px;
}
</style>
</head>
<body>
<div id="myDrawChart">
<span id='columnchart_before'></span>
<span id='columnchart_after'></span>
<span id='columnchart_diff'></span>
</div>
<script>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var oldData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Alex', 200],
['Blake', 4100],
['Charlie', 2700],
['Jade', 7200]
]);
var newData = google.visualization.arrayToDataTable([
['Name', 'Popularity'],
['Alex', 300],
['Blake', 650],
['Charlie', 1400],
['Jade', 5500]
]);
var columnChartBefore = new google.visualization.ColumnChart(document.getElementById('columnchart_before'));
var columnChartAfter = new google.visualization.ColumnChart(document.getElementById('columnchart_after'));
var columnChartDiff = new google.visualization.ColumnChart(document.getElementById('columnchart_diff'));
var options1 = {
title:'Social Media Popularity 2019',
titleTextStyle: {
fontSize: 17,
color: '#206020'
},
legend: {
position: 'top'
},
};
var options2 = {
title:'Social Media Popularity 2020',
titleTextStyle: {
fontSize: 17,
color: '#5c5c3d'
},
legend: {
position: 'top'
},
};
var options3 = {
title:'Social Media Popularity 2019 vs 2020',
titleTextStyle: {
fontSize: 17,
color: '#993300'
},
legend: {
position: 'top'
},
};
columnChartBefore.draw(oldData, options1);
columnChartAfter.draw(newData, options2);
var diffData = columnChartDiff.computeDiff(oldData, newData);
columnChartDiff.draw(diffData, options3);
}
</script> </body>
</html>