Google Chart x2 - Impossible

**Etudiant57** · 15/10/2015, 12h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 15/10/2015, 19h54

Bonjour,
le comportement est effectivement bizarre, il semblerait qu'il y ait mélange de pinceau

Une solution que tu peux mettre en oeuvre est d'attendre que le premier tracé soit terminé pour lancer le second.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
 
google.visualization.events.addListener(chart, 'ready', function() {
    var chart2 = new google.charts.Bar(document.getElementById('columnchart_material'));
    // second graphe
    chart2.draw(data2, options2);
});
// premier graphe
chart.draw(data, options)

Google Chart x2 - Impossible

APIs Google

Discussions similaires

Partager

Partager