I'm trying to combine Bubble Chart and Sankey Diagram elements from Google Charts, but am having a hard time getting them to display on a page. (This is sample code from Google). When I isolate the code for just the Bubble Chart or just the Sankey Diagram, they work - but putting them together, nothing happens. I made sure to set unique variable names, not sure what else I am missing. Also I literally have no coding experience, just some familiarity with Python, so I may be completely oversimplifying this. Thanks for the help!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.load("visualization", "1.1", {packages:["sankey"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'From');
data2.addColumn('string', 'To');
data2.addColumn('number', 'Weight');
data2.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ],
]);
var options = {
title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var options2 = {
width: 600,
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
var chart2 = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>