Jquery et jsapi

**qltmi** · 21/09/2014, 22h18

Bonjour,

j'essai de mettre dans des accordions de jquery des graphes google.
Cependant, je ne sais pas pourquoi seulement le premier graphe apparait.
si je n utilise pas les accordions, tous les graphes apparaissent bien.

savez-vous pourquoi?

voici un exemple de code:

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
 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.min.js"></script>
<script>
  $(function() {
   var accOpts = {
            event:"mouseover"
        }  
    $( "#accordion" ).accordion(accOpts);
 
  });
  </script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['annotatedtimeline']});
        function toto1() {
		      var data = new google.visualization.DataTable();
		      data.addColumn('date', 'Date');
		      data.addColumn('number', '');
					data.addRows([[new Date(2013,8,27,00,00,00), 4453.45],[new Date(2013,8,30,00,00,00), 4462.23],[new Date(2013,9,01,00,00,00), 4488.03],[new Date(2013,9,02,00,00,00), 4481.98],[new Date(2013,9,03,00,00,00), 4477.77],[new Date(2013,9,04,00,00,00), 4461.15],[new Date(2013,9,07,00,00,00), 4475.65],[new Date(2013,9,08,00,00,00), 4480.75],[new Date(2013,9,09,00,00,00), 4475.69],[new Date(2013,9,10,00,00,00), 4467.33],[new Date(2013,9,11,00,00,00), 4472.76],[new Date(2013,9,14,00,00,00), 4465.36],[new Date(2013,9,17,00,00,00), 4467.7],[new Date(2013,9,18,00,00,00), 4468.27],[new Date(2013,9,21,00,00,00), 4467.87],[new Date(2013,9,22,00,00,00), 4467.39],[new Date(2013,9,23,00,00,00), 4471.71],[new Date(2013,9,24,00,00,00), 4458.44],[new Date(2013,9,25,00,00,00), 4471.5],[new Date(2013,9,28,00,00,00), 4502.93],[new Date(2013,9,29,00,00,00), 4513.39],[new Date(2013,9,30,00,00,00), 4480.13],[new Date(2013,9,31,00,00,00), 4489.5],[new Date(2013,10,01,00,00,00), 4493.13],[new Date(2013,10,06,00,00,00), 4490.21],[new Date(2013,10,07,00,00,00), 4493.77],[new Date(2013,10,08,00,00,00), 4515.93],[new Date(2013,10,11,00,00,00), 4523.09],[new Date(2013,10,12,00,00,00), 4526.39],[new Date(2013,10,13,00,00,00), 4533.26],[new Date(2013,10,14,00,00,00), 4532.31],[new Date(2013,10,15,00,00,00), 4515.53],[new Date(2013,10,18,00,00,00), 4512.42],[new Date(2013,10,19,00,00,00), 4489.26],[new Date(2013,10,20,00,00,00), 4497.09],[new Date(2013,10,21,00,00,00), 4505.11],[new Date(2013,10,22,00,00,00), 4496.34],[new Date(2013,10,25,00,00,00), 4492.77],[new Date(2013,10,26,00,00,00), 4475.01],[new Date(2013,10,27,00,00,00), 4475.43],[new Date(2013,10,28,00,00,00), 4464.73],[new Date(2013,10,29,00,00,00), 4469.18],[new Date(2013,11,02,00,00,00), 4469.17],[new Date(2013,11,03,00,00,00), 4465.08],[new Date(2013,11,04,00,00,00), 4464.68],[new Date(2013,11,05,00,00,00), 4448.06],[new Date(2013,11,06,00,00,00), 4435.99],[new Date(2013,11,09,00,00,00), 4432.33],[new Date(2013,11,10,00,00,00), 4416.26],[new Date(2013,11,11,00,00,00), 4397.8],[new Date(2013,11,12,00,00,00), 4416.06],[new Date(2013,11,13,00,00,00), 4424.08],[new Date(2013,11,16,00,00,00), 4413.5],[new Date(2013,11,17,00,00,00), 4382.77],[new Date(2013,11,18,00,00,00), 4357.9],[new Date(2013,11,19,00,00,00), 4359.69],[new Date(2013,11,20,00,00,00), 4363.56],[new Date(2013,11,23,00,00,00), 4347.75],[new Date(2013,11,24,00,00,00), 4337.67],[new Date(2013,11,25,00,00,00), 4361.74],[new Date(2013,11,26,00,00,00), 4377.13],[new Date(2013,11,27,00,00,00), 4382.39],[new Date(2013,11,30,00,00,00), 4376.65],[new Date(2013,11,31,00,00,00), 4381.32],[new Date(2014,0,02,00,00,00), 4411.85],[new Date(2014,0,03,00,00,00), 4384.9],[new Date(2014,0,06,00,00,00), 4361.62],[new Date(2014,0,07,00,00,00), 4343.16],[new Date(2014,0,08,00,00,00), 4344.26],[new Date(2014,0,09,00,00,00), 4339.18],[new Date(2014,0,10,00,00,00), 4360.02],[new Date(2014,0,15,00,00,00), 4380.11],[new Date(2014,0,16,00,00,00), 4380.78],[new Date(2014,0,17,00,00,00), 4385.68],[new Date(2014,0,21,00,00,00), 4382.85],[new Date(2014,0,22,00,00,00), 4385.8],[new Date(2014,0,23,00,00,00), 4386.22],[new Date(2014,0,24,00,00,00), 4410.61],[new Date(2014,0,27,00,00,00), 4476.57],[new Date(2014,0,28,00,00,00), 4488.16],[new Date(2014,0,29,00,00,00), 4480.94],[new Date(2014,0,30,00,00,00), 4500.68],[new Date(2014,0,31,00,00,00), 4498.42],[new Date(2014,1,03,00,00,00), 4515.51],[new Date(2014,1,04,00,00,00), 4532.06],[new Date(2014,1,05,00,00,00), 4558.27],[new Date(2014,1,06,00,00,00), 4584.34],[new Date(2014,1,07,00,00,00), 4619.22],[new Date(2014,1,10,00,00,00), 4645.05],[new Date(2014,1,11,00,00,00), 4639.19],[new Date(2014,1,12,00,00,00), 4641.95],[new Date(2014,1,13,00,00,00), 4645.46],[new Date(2014,1,14,00,00,00), 4654.58],[new Date(2014,1,17,00,00,00), 4645.02],[new Date(2014,1,18,00,00,00), 4644.44],[new Date(2014,1,19,00,00,00), 4642.89],[new Date(2014,1,20,00,00,00), 4668.73],[new Date(2014,1,21,00,00,00), 4687.92],[new Date(2014,1,24,00,00,00), 4697.65],[new Date(2014,1,25,00,00,00), 4686.59],[new Date(2014,1,26,00,00,00), 4697.38],[new Date(2014,1,27,00,00,00), 4705.37],[new Date(2014,1,28,00,00,00), 4713.72],[new Date(2014,2,03,00,00,00), 4692.81],[new Date(2014,2,04,00,00,00), 4671.06],[new Date(2014,2,05,00,00,00), 4672.05],[new Date(2014,2,06,00,00,00), 4663.71],[new Date(2014,2,07,00,00,00), 4624.39],[new Date(2014,2,10,00,00,00), 4612.99],[new Date(2014,2,11,00,00,00), 4586.93],[new Date(2014,2,12,00,00,00), 4582.27],[new Date(2014,2,13,00,00,00), 4584.68],[new Date(2014,2,14,00,00,00), 4616.91],[new Date(2014,2,17,00,00,00), 4630.29],[new Date(2014,2,18,00,00,00), 4630.3],[new Date(2014,2,19,00,00,00), 4620.8],[new Date(2014,2,21,00,00,00), 4615.06],[new Date(2014,2,24,00,00,00), 4595.7],[new Date(2014,2,27,00,00,00), 4582.37],[new Date(2014,2,28,00,00,00), 4585.18],[new Date(2014,2,31,00,00,00), 4591.17],[new Date(2014,3,01,00,00,00), 4592.55],[new Date(2014,3,02,00,00,00), 4580.14],[new Date(2014,3,03,00,00,00), 4578.31],[new Date(2014,3,04,00,00,00), 4597.29],[new Date(2014,7,20,00,00,00), 0],[new Date(2014,8,07,00,00,00), 4665.99]]);
 
		      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
		          document.getElementById('toto1'));
		      annotatedtimeline.draw(data, {'displayAnnotations': true, 'scaleType': 'allmaximized', 
                    'numberFormats': '###,###.###',
                    'dateFormat':'dd MMM yyyy'
                                   });
		    }
 
		    google.setOnLoadCallback(toto1);
                </script><script type="text/javascript">google.load('visualization', '1', {packages: ['annotatedtimeline']});
        function toto2() {
		      var data = new google.visualization.DataTable();
		      data.addColumn('date', 'Date');
		      data.addColumn('number', '');
					data.addRows([[new Date(2013,8,27,00,00,00), 453.45],[new Date(2013,8,30,00,00,00), 462.23],[new Date(2013,9,01,00,00,00), 4488.03],[new Date(2013,9,02,00,00,00), 4481.98],[new Date(2013,9,03,00,00,00), 4477.77],[new Date(2013,9,04,00,00,00), 4461.15],[new Date(2013,9,07,00,00,00), 4475.65],[new Date(2013,9,08,00,00,00), 4480.75],[new Date(2013,9,09,00,00,00), 4475.69],[new Date(2013,9,10,00,00,00), 4467.33],[new Date(2013,9,11,00,00,00), 4472.76],[new Date(2013,9,14,00,00,00), 4465.36],[new Date(2013,9,17,00,00,00), 4467.7],[new Date(2013,9,18,00,00,00), 4468.27],[new Date(2013,9,21,00,00,00), 4467.87],[new Date(2013,9,22,00,00,00), 4467.39],[new Date(2013,9,23,00,00,00), 4471.71],[new Date(2013,9,24,00,00,00), 4458.44],[new Date(2013,9,25,00,00,00), 4471.5],[new Date(2013,9,28,00,00,00), 4502.93],[new Date(2013,9,29,00,00,00), 4513.39],[new Date(2013,9,30,00,00,00), 4480.13],[new Date(2013,9,31,00,00,00), 4489.5],[new Date(2013,10,01,00,00,00), 4493.13],[new Date(2013,10,06,00,00,00), 4490.21],[new Date(2013,10,07,00,00,00), 4493.77],[new Date(2013,10,08,00,00,00), 4515.93],[new Date(2013,10,11,00,00,00), 4523.09],[new Date(2013,10,12,00,00,00), 4526.39],[new Date(2013,10,13,00,00,00), 4533.26],[new Date(2013,10,14,00,00,00), 4532.31],[new Date(2013,10,15,00,00,00), 4515.53],[new Date(2013,10,18,00,00,00), 4512.42],[new Date(2013,10,19,00,00,00), 4489.26],[new Date(2013,10,20,00,00,00), 4497.09],[new Date(2013,10,21,00,00,00), 4505.11],[new Date(2013,10,22,00,00,00), 4496.34],[new Date(2013,10,25,00,00,00), 4492.77],[new Date(2013,10,26,00,00,00), 4475.01],[new Date(2013,10,27,00,00,00), 4475.43],[new Date(2013,10,28,00,00,00), 4464.73],[new Date(2013,10,29,00,00,00), 4469.18],[new Date(2013,11,02,00,00,00), 4469.17],[new Date(2013,11,03,00,00,00), 4465.08],[new Date(2013,11,04,00,00,00), 4464.68],[new Date(2013,11,05,00,00,00), 4448.06],[new Date(2013,11,06,00,00,00), 4435.99],[new Date(2013,11,09,00,00,00), 4432.33],[new Date(2013,11,10,00,00,00), 4416.26],[new Date(2013,11,11,00,00,00), 4397.8],[new Date(2013,11,12,00,00,00), 4416.06],[new Date(2013,11,13,00,00,00), 4424.08],[new Date(2013,11,16,00,00,00), 4413.5],[new Date(2013,11,17,00,00,00), 4382.77],[new Date(2013,11,18,00,00,00), 4357.9],[new Date(2013,11,19,00,00,00), 4359.69],[new Date(2013,11,20,00,00,00), 4363.56],[new Date(2013,11,23,00,00,00), 4347.75],[new Date(2013,11,24,00,00,00), 4337.67],[new Date(2013,11,25,00,00,00), 4361.74],[new Date(2013,11,26,00,00,00), 4377.13],[new Date(2013,11,27,00,00,00), 4382.39],[new Date(2013,11,30,00,00,00), 4376.65],[new Date(2013,11,31,00,00,00), 4381.32],[new Date(2014,0,02,00,00,00), 4411.85],[new Date(2014,0,03,00,00,00), 4384.9],[new Date(2014,0,06,00,00,00), 4361.62],[new Date(2014,0,07,00,00,00), 4343.16],[new Date(2014,0,08,00,00,00), 4344.26],[new Date(2014,0,09,00,00,00), 4339.18],[new Date(2014,0,10,00,00,00), 4360.02],[new Date(2014,0,15,00,00,00), 4380.11],[new Date(2014,0,16,00,00,00), 4380.78],[new Date(2014,0,17,00,00,00), 4385.68],[new Date(2014,0,21,00,00,00), 4382.85],[new Date(2014,0,22,00,00,00), 4385.8],[new Date(2014,0,23,00,00,00), 4386.22],[new Date(2014,0,24,00,00,00), 4410.61],[new Date(2014,0,27,00,00,00), 4476.57],[new Date(2014,0,28,00,00,00), 4488.16],[new Date(2014,0,29,00,00,00), 4480.94],[new Date(2014,0,30,00,00,00), 4500.68],[new Date(2014,0,31,00,00,00), 4498.42],[new Date(2014,1,03,00,00,00), 4515.51],[new Date(2014,1,04,00,00,00), 4532.06],[new Date(2014,1,05,00,00,00), 4558.27],[new Date(2014,1,06,00,00,00), 4584.34],[new Date(2014,1,07,00,00,00), 4619.22],[new Date(2014,1,10,00,00,00), 4645.05],[new Date(2014,1,11,00,00,00), 4639.19],[new Date(2014,1,12,00,00,00), 4641.95],[new Date(2014,1,13,00,00,00), 4645.46],[new Date(2014,1,14,00,00,00), 4654.58],[new Date(2014,1,17,00,00,00), 4645.02],[new Date(2014,1,18,00,00,00), 4644.44],[new Date(2014,1,19,00,00,00), 4642.89],[new Date(2014,1,20,00,00,00), 4668.73],[new Date(2014,1,21,00,00,00), 4687.92],[new Date(2014,1,24,00,00,00), 4697.65],[new Date(2014,1,25,00,00,00), 4686.59],[new Date(2014,1,26,00,00,00), 4697.38],[new Date(2014,1,27,00,00,00), 4705.37],[new Date(2014,1,28,00,00,00), 4713.72],[new Date(2014,2,03,00,00,00), 4692.81],[new Date(2014,2,04,00,00,00), 4671.06],[new Date(2014,2,05,00,00,00), 4672.05],[new Date(2014,2,06,00,00,00), 4663.71],[new Date(2014,2,07,00,00,00), 4624.39],[new Date(2014,2,10,00,00,00), 4612.99],[new Date(2014,2,11,00,00,00), 4586.93],[new Date(2014,2,12,00,00,00), 4582.27],[new Date(2014,2,13,00,00,00), 4584.68],[new Date(2014,2,14,00,00,00), 4616.91],[new Date(2014,2,17,00,00,00), 4630.29],[new Date(2014,2,18,00,00,00), 4630.3],[new Date(2014,2,19,00,00,00), 4620.8],[new Date(2014,2,21,00,00,00), 4615.06],[new Date(2014,2,24,00,00,00), 4595.7],[new Date(2014,2,27,00,00,00), 4582.37],[new Date(2014,2,28,00,00,00), 4585.18],[new Date(2014,2,31,00,00,00), 4591.17],[new Date(2014,3,01,00,00,00), 4592.55],[new Date(2014,3,02,00,00,00), 4580.14],[new Date(2014,3,03,00,00,00), 4578.31],[new Date(2014,3,04,00,00,00), 4597.29],[new Date(2014,7,20,00,00,00), 0],[new Date(2014,8,07,00,00,00), 4665.99]]);
 
		      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
		          document.getElementById('toto2'));
		      annotatedtimeline.draw(data, {'displayAnnotations': true, 'scaleType': 'allmaximized', 
                    'numberFormats': '###,###.###',
                    'dateFormat':'dd MMM yyyy'
                                   });
		    }
 
		    google.setOnLoadCallback(toto2);
                </script>
 
<div id="accordion" >
	<h3>toto1</h3><div><p><div id="toto1" style="width: 200px; height: 200px;">1</div></p></div>
	<h3>toto2</h3><div><p><div id="toto2" style="width: 200px; height: 200px;">2</div></p></div>
</div>

merci pour votre aide.

qltmi.

**devyan** · 23/09/2014, 14h52

Bonjour,

Il y a de grandes chances que le graphe Google ne se dessine pas dans un conteneur "display:none".
Une solution serait de générer ton graphique lors de l'ouverture de l'accordéon correspondant.

Jquery et jsapi

jQuery

Discussions similaires

Partager

Partager