Google Chart x2 - Impossible

Bonjour, je suis novice en HTML / Javascript.

J'ai repris des exemples de Google Chart mais je ne comprends pas pourquoi, il m'est impossible d'en placer deux sur la même page.
Les deux code fonctionne si je n'en affiche qu'un seul, mais les deux ensembles ne fonctionne pas.

J'espère que vous pourrez m'aider.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Test</title>
		<h2><p align="center">Test - Test</p></h2>
 
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
			<script type="text/javascript">
			  google.load("visualization", "1.1", {packages:["bar"]});
			  google.setOnLoadCallback(drawChart);
			  function drawChart() {
				var data = google.visualization.arrayToDataTable([
				  ['Année', 'Test', 'Test 2', 'Test 3'],
				  ['2015', 10000, 13953, 111]
				]);
 
				var data2 = google.visualization.arrayToDataTable([
					  ['Year', 'Sales', 'Expenses', 'Profit'],
					  ['2014', 1000, 400, 200],
					  ['2015', 1170, 460, 250],
					  ['2016', 660, 1120, 300],
					  ['2017', 1030, 540, 350]
					]);
 
				var options = {
				  chart: {
					title: 'Graph Test',
					subtitle: 'Test test test : 2015',
				  },
				  bars: 'horizontal' // Required for Material Bar Charts
				};
 
				var options2 = {
				  chart: {
					title: 'Company Performance',
					subtitle: 'Sales, Expenses, and Profit: 2014-2017',
				  }
				};
 
				var chart = new google.charts.Bar(document.getElementById('barchart_material'));
				chart.draw(data, options);
 
				var chart2 = new google.charts.Bar(document.getElementById('columnchart_material'));
				chart2.draw(data2, options2);
			  }
		</script>
 
	</head>
 
	<body>
		<div id="barchart_material" style="width: 900px; height: 200px;"></div>
		<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
	</body>
 
</html>