Bonjour à tous,
Voila plusieurs jours que j'essaie d'afficher des données au sein d'un graphique dans une InfoWindow liée à un marker sur la map.
Basiquement j'ouvre mon InfoWindow et quand elle est domready, je passe à la génération de mon graphique. Je récupère les données que je veux via une requête Ajax, qui se déroule sans problème et me permet de stocker le tableau que me retourne le .php. Cependant il apparaît qu'au 'domready' de l'InfoWindow le graphique est généré avec la variable vide alors que le console.log(variable) me retourne bien les données récupérées par la requête Ajax.
Peut-être que le code sera plus parlant.
Mon index
data.php (j'ai mis des données en dur mais normalement c'est une requête SQL qui me retourne un tableau du même genre)
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202 <!DOCTYPE html> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="highstock/js/jquery-1.9.1.js"></script> <script src="highstock/js/highstock.js"></script> <script src="highstock/js/no-data-to-display.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> <title>RO Command Center - Map</title> <style> .controls { margin-top: 16px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); margin-left:50px; } #pac-input { background-color: #fff; padding: 0 11px 0 13px; width: 400px; font-family: Roboto; font-size: 15px; font-weight: 300; text-overflow: ellipsis; margin-left:50px; } #pac-input:focus { border-color: #4d90fe; margin-left: -1px; padding-left: 14px; width: 401px; margin-left:50px; } </style> <html> <head> <title>Google Maps Multiple Markers</title> </head> <script type="text/javascript"> $(document).ready(function() { var locations = [['Cambrai', 4, 50.1735380,3.2366330],['Morges', 4, 46.5152627,6.4929214],['London', 4, 51.5085150,-0.1254872],['New-York', 4, 40.7143528,-74.0059731]]; var iw = new google.maps.InfoWindow(); var geneve = new google.maps.LatLng(46.201221,6.142187); var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: new google.maps.LatLng(0.0, 0.0), mapTypeId : google.maps.MapTypeId.ROADMAP, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN streetViewControl: false, center: geneve, panControl: false, zoomControl: false, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } }); var inputLocation = /** @type {HTMLInputElement} */(document.getElementById('pac-input')); // Link it to the UI element. map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputLocation); var autocompleteLocation = new google.maps.places.Autocomplete(inputLocation); autocompleteLocation.bindTo('bounds', map); /******************** LISTENER ************************/ google.maps.event.addListener(autocompleteLocation, 'place_changed', function() { inputLocation.className = ''; var placeStart = autocompleteLocation.getPlace(); if (!placeStart.geometry) { // Inform the user that the place was not found and return. inputLocation.className = 'notfound'; return; } // If the place has a geometry, then present it on a map. if (placeStart.geometry.viewport) { map.fitBounds(placeStart.geometry.viewport); } else { map.setCenter(placeStart.geometry.location); map.setZoom(13); // Why 13? Because it looks good. } var address = ''; if (placeStart.address_components) { address = [ (placeStart.address_components[0] && placeStart.address_components[0].short_name || ''), (placeStart.address_components[1] && placeStart.address_components[1].short_name || ''), (placeStart.address_components[2] && placeStart.address_components[2].short_name || '') ].join(' '); } }); /******************** END LISTENER ************************/ var marker, i, selectedname; var contentDiv = '<div id="container" style="height:350px; width:350px"></div>'; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][2], locations[i][3]), map: map, title: locations[i][0]+ " (" + locations[i][1] + " stars)", animation: google.maps.Animation.DROP, }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { selectedname = locations[i][0]; marker.setAnimation(google.maps.Animation.BOUNCE); stopAnimation(marker); iw.setContent(contentDiv); iw.open(map, marker); domready(); } }) (marker, i)); } function domready() { google.maps.event.addListener(iw,'domready',function(){ $.ajax({ data: "selectedname="+selectedname, type:"post", url: "./data.php", success: function(data) { var dataPrice = data; console.log(dataPrice); dataChart = { chart: { borderWidth: 2, renderTo: document.getElementById('container'), zoomType: 'x', type:"spline", height:350, width:350, marginRight:40 }, rangeSelector: { enabled: false }, title: { text: 'Price evolution of '+ selectedname }, subtitle: { text: 'Click & drag to zoom' }, xAxis: { title: { text: 'Date/Time' } }, yAxis: [{ title: { text: 'Price' }, lineWidth: 2 }], navigator: { enabled: false, }, credits: { enabled: false }, series: [{ name: 'Price', tooltip: { valueSuffix: '$' }, marker: { enabled:true, radius:2 }, turboThreshold:0, data: dataPrice }] } chart = new Highcharts.StockChart(dataChart); console.log(dataPrice); } }); }); } function stopAnimation(marker) { setTimeout(function () { marker.setAnimation(null); }, 5000); } }); </script> <body> <center> <input id="pac-input" class="controls" type="text" placeholder="Indicate a city"> <div id="map" style="width: 90%; height: 800px;"></div> </center> </body> </html>
Je précise que si je mets en dur les données telle qu'elles sont maintenant dans le data.php directement dans mon chart, le chart se génère et affiche un graphique avec des points.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <?php echo "[[1398034800000, 222],[1398036600000, 222],[1398038400000, 222],[1398040200000, 222],[1398042000000, 222],[1398043800000, 222],[1398045600000, 238],[1398047400000, 222],[1398049200000, 222],[1398051000000, 222],[1398052800000, 222],[1398054600000, 222],[1398056400000, 222],[1398058200000, 222],[1398060000000, 222],[1398061800000, 222],[1398063600000, 222],[1398065400000, 222],[1398067200000, 222],[1398069000000, 222],[1398070800000, 222],[1398072600000, 222],[1398074400000, 222],[1398076200000, 222],[1398078000000, 222],[1398081600000, 222],[1398083400000, 222],[1398085200000, 222],[1398087000000, 222],[1398088800000, 222],[1398090600000, 222],[1398092400000, 222],[1398094200000, 222],[1398097800000, 222],[1398099600000, 222],[1398101400000, 222],[1398103200000, 222],[1398105000000, 222],[1398106800000, 222],[1398108600000, 222],[1398110400000, 222],[1398112200000, 222],[1398114000000, 222],[1398115800000, 222],[1398117600000, 238],[1398119400000, 222],[1398121200000, 222],[1398123000000, 222],[1398124800000, 222],[1398126600000, 222],[1398128400000, 238],[1398130200000, 222],[1398132000000, 222],[1398133800000, 222],[1398135600000, 222],[1398137400000, 222],[1398139200000, 222],[1398141000000, 222],[1398142800000, 222],[1398144600000, 222],[1398146400000, 222],[1398148200000, 222],[1398150000000, 222],[1398151800000, 222],[1398153600000, 238],[1398155400000, 238],[1398157200000, 222],[1398160800000, 222],[1398162600000, 222],[1398164400000, 216],[1398166200000, 216],[1398168000000, 216],[1398169800000, 216],[1398171600000, 216],[1398173400000, 216],[1398175200000, 216],[1398177000000, 216],[1398178800000, 216],[1398180600000, 216],[1398182400000, 216],[1398184200000, 216],[1398186000000, 216],[1398187800000, 216],[1398189600000, 216],[1398191400000, 216],[1398193200000, 216],[1398195000000, 216],[1398196800000, 216],[1398198600000, 216],[1398200400000, 216],[1398202200000, 216],[1398204000000, 216],[1398205800000, 216],[1398207600000, 216],[1398209400000, 216],[1398211200000, 216],[1398213000000, 216],[1398214800000, 216],[1398216600000, 216],[1398218400000, 216],[1398220200000, 226],[1398222000000, 216],[1398223800000, 216],[1398225600000, 216],[1398227400000, 216],[1398229200000, 216],[1398231000000, 216],[1398232800000, 216],[1398234600000, 216],[1398236400000, 216],[1398238200000, 226],[1398240000000, 216],[1398241800000, 216],[1398243600000, 216],[1398245400000, 226],[1398247200000, 216],[1398249000000, 216],[1398250800000, 216],[1398252600000, 216],[1398254400000, 226],[1398256200000, 216],[1398258000000, 216],[1398259800000, 216],[1398261600000, 226],[1398263400000, 216],[1398265200000, 216],[1398267000000, 216],[1398268800000, 216],[1398270600000, 216],[1398272400000, 216],[1398274200000, 216],[1398276000000, 216],[1398277800000, 216],[1398279600000, 216],[1398281400000, 216],[1398283200000, 216],[1398285000000, 216],[1398286800000, 216],[1398288600000, 216],[1398290400000, 216],[1398292200000, 216],[1398294000000, 216],[1398295800000, 216],[1398297600000, 216],[1398299400000, 216],[1398301200000, 216],[1398303000000, 216],[1398304800000, 216],[1398306600000, 216],[1398308400000, 216],[1398310200000, 216],[1398312000000, 216],[1398313800000, 216],[1398315600000, 216],[1398317400000, 216],[1398319200000, 216],[1398321000000, 216],[1398322800000, 216],[1398324600000, 216],[1398326400000, 216],[1398328200000, 216],[1398330000000, 216],[1398331800000, 216],[1398333600000, 216],[1398335400000, 216],[1398337200000, 225],[1398339000000, 216],[1398340800000, 216],[1398342600000, 216],[1398344400000, 216],[1398346200000, 216],[1398348000000, 216],[1398349800000, 216],[1398351600000, 216],[1398353400000, 216],[1398355200000, 225],[1398357000000, 216],[1398358800000, 216],[1398360600000, 216],[1398362400000, 225],[1398364200000, 216],[1398366000000, 216],[1398369600000, 216],[1398371400000, 216],[1398373200000, 216],[1398375000000, 216],[1398378600000, 216],[1398380400000, 226],[1398382200000, 226],[1398385800000, 226],[1398387600000, 226],[1398391200000, 226],[1398398400000, 226],[1398403800000, 226],[1398405600000, 226],[1398407400000, 226],[1398412800000, 226],[1398414600000, 226],[1398416400000, 226],[1398423600000, 226],[1398425400000, 226],[1398430800000, 226],[1398434400000, 226],[1398436200000, 226],[1398438000000, 226],[1398439800000, 226],[1398448800000, 226],]"; ?>
En l'état actuel , l'InfoWindow affiche un graphique vide de données.
Affichage en l'état actuel : http://i.imgur.com/GIBSbLF.png
Affichage avec les données mises en dur dans "dataChart" : http://i.imgur.com/RGBdFLW.png
Si je n'ai pas été assez clair ou que des précisions sont nécessaires je me ferai une joie de répondre.
Merci d'avance,
Pouyo.
Partager