Chart Google JS API - IE Fixed

Version imprimable

08/07/2011, 12h13
dib258

1 pièce(s) jointe(s)

Chart Google JS API - IE Fixed

Bonjour,

J'utilise pour un travail au boulot l'API js de google juste pour créer deux graphiques à la volée.

J'arrive parfaitement à l'utiliser, du moins pour le minimum dont j'ai besoin. Je développe tout cela en regardant sur firefox et une fois le travail achevé je regarde sur Internet Explorer 7 car ici tout le monde l'utilise et j'ai un bug.

On dirait que les charts généré par l'API sont en fixed. Petite explication de comment j'ai agencé la page (c'est une appli en interne donc c'est simple mais je ne peux pas passer le code et je pense que le problème n'est pas dans mon code mais surement dans un subterfuge CSS smile )

Donc j'ai une grande div que je redimensionne automatiquement au démarrage et lorsqu'on redimensionne la page avec jQuery. ensuite dedans j'ai des données statistiques que je sors d'une BDD + deux graphiques que je génère avec l'API de google. (http://code.google.com/apis/chart/in...lumnchart.html).

Du fait que ma grande div est en plein écran j'ai mit un overflow : auto; comme cela on se déplace dans un cadre ça fait plus petite application mais sous IE il arrive a me mettre le premier graphique au bon endroit, il applique un overflow sur le document tout entier, place le second graphique en dessous de ma grande div. Ensuite quand j'essaye de descendre la barre (d'overflow) de ma grande div le premier graphique reste coller au même endroit et ne suis pas le flux qui est dans ma grande div.

Pour insérer le graphique dans la page j'ajoute une div que je dois mentionner dans le code js. Je ne sais pas si je peux jouer avec cette div pour ne plus avoir ce problème

Merci d'avance.

Bonjour,

Citation:

Ensuite quand j'essaye de descendre la barre (d'overflow) de ma grande div le premier graphique reste coller au meme endroit et ne suis pas le flux qui est dans ma grande div.

cela signifie qu'il n'est pas ou plus dans le flux!

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[...]</title>
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding :0;
  font-family : Verdana;
  font-size : 1em;
}
#global {
  width : 800px;
  height : 100%;
  min-height : 600px;
  margin : auto;
  overflow : auto;
}
#graph_1 {
  width : 100%;
  height : 400px;
  background-color : #f0e0e0;
}
#graph_2 {
  width : 100%;
  height : 400px;
  background-color : #e0f0e0;
}
</style>
</head>
<body>
<div id="global">
  <div id="graph_1"></div>
  <div id="graph_2"></div>
</div>
</body>
</html>

08/07/2011, 15h18
dib258

Oui, c'est cela les graphes sortent du flux de ma div et rester fixer en static sur celui de la page.

J'ai essayé de rajouter les style dans ma page comme tu as mis (sant font-family, ...)

Et cela ne fonctionne toujours pas.
08/07/2011, 15h24
NoSmoking

sans un minimum de code, non indiscret, il va être difficile de t'aider !
08/07/2011, 16h08
NoSmoking

re,
j'ai regardé un peu la façon de procéder de GoogleChart et alors tout est en IFRAME.

La solution devient évidente, l'IFRAME, je m'explique

- tu crées une page contenant uniquement tes graphes, graph_page.html par exemple...
- tu crées une main page qui contient un IFRAME qui a comme src graph_page.html.

Avec un peu de style le rendu devrait être le même.