Discussion :

[splifferwolf]

Bonjour à tous,

Je viens vers vous car je rencontre un problème avec gvChart utilisant l'API google Chart.

Voici un Tableau

Code :

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

1
2
3
4
5
6
7
8
 
| VIDE | Janv | Fev | Mars | Avr | Mai | Juin | ... | Desc
-------------------------------------------------------
| 2008 | 230  | 310 | 405  | 503 | 302 | 76  | ... | 578
| 2009 | ...
| 2010 | ...
| 2011 | ...
| 2012 | ...

Pour ce qui est des graphique bar, line, area, c'est parfait (la légende prend en référence l'année), là ou ça coince c'est pour le camembert (Pie).

Voici la fonction qui affiche le Pie

Code :

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

1
2
3
4
5
6
7
8
9
 
$('#graphPie').gvChart({ 
    chartType: 'PieChart',  // Type de graphique
    gvSettings: { vAxis: {title: 'Clients', gridlines : { count: 5 }},  // Titre axe vertical
 	               hAxis: {title: 'Années'},          // Titre axe horizontal
		       width: 600, // Largeur
		       height: 300 // Hauteur
                    }
});

Somme-toute très simple, mon problème donc avec le pie est que la légende devient les mois et non plus les années (Axe y) et je n'arrive pas à changer celà de manière à obtenir les années (Axe y), le gvSettings accepte tous les paramètres de google Chart, je me suis diriger vers la doc de ce dernier, malheureusement je ne connais rien à l'anglais (cette doc n'existe pas en FR), j'ai toutefois, a force de naviguer sur cette doc, cru comprendre que c'était le paramètre : chxt , j'ai donc tenter ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$('#graphPie').gvChart({ 
    chartType: 'PieChart',  // Type de graphique
    gvSettings: { vAxis: {title: 'Clients', gridlines : { count: 5 }},  // Titre axe vertical
 	               hAxis: {title: 'Années'},          // Titre axe horizontal
		       width: 600, // Largeur
		       height: 300, // Hauteur
                       chxt : 'y' // On tente de changer l'axe
                    }
});

Mais ca ne change strictement rien, donc ma question comment avoir un Pie basé sur les années et non pas les mois.

J'ai pensé à la solution de créer un second tableau avec cette fois les années sur l'axe X, mais mes données proviennent d'une base de données comportant plus de 50 000 infos, et un second tableaux alourdi le chmilblik.

Si quelqu'un pouvait m'aider à changer l'axe (qui est la plus optimale histoire de ne pas aller chercher 2 fois les même données).

D'avance merci de votre contribution
Bien à vous
Spliffer

[NoSmoking]

Bonsoir,
si je ne m'abuse un "camembert" est un graphe sur base d'un tableau à 2 colonnes, une pour les titre et une pour les valeurs dont celles ci seront exprimées en pourcentage du total.

Dans ton cas si tu veux travailler par année il te faudra autant de "brie"(*) qu'il y a d'années et si tu veux comparer les années il te faut récupérer le total pour chacune d'elles, qui constitueront ainsi les valeurs.

(*)je ne vais pas me faire que des amis

[splifferwolf]

Bonsoir et merci de ta participation.

Ce que tu dit me semble correct, cependant dans l'état actuel le "brie" me retourne un camembert contenant 12 couleurs (1 pour chaque mois) en totalisant chaque colonne pour en fournir un pourcentage.

Néant moins, certain script permettent justement de changer l'axe de calcul, dés lors il ne retourne pas un pourcentage sur les colonne mais un pourcentage sur les lignes.

Le tout ici est de savoir si google Chart permet justement de changer l'axe. ?

[splifferwolf]

Bonjour à tous,

Je viens de pensez à quelques chose, mais je ne sais pas si c'est fesable ni même comment m'y prendre.

Le principe serait de déstructuré le tableau html et le restructure de manière inverser les axe.

Est-ce faisable ?
Qu'en pensez-vous ?

Si c'est faisable, d'après vous quel serait la meilleur manière d'approché la chose ?

La structure HTML de cette table est la suivante :

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
 
<table>
  <thead>
    <tr>
      <th></th>
      <th>Janv.</th>
      <th>Fev.</th>
      ....
      <th>Desc.</th>
    </tr>  
</thead>
<tbody>
    <tr>
      <th>2008</th>
      <td>230</td>
      <td>310</td>
      ....
      <td>578</td>
    </tr>
    ....
</tbody>
</table>

D'avance merci de votre participation
bien à vous

[NoSmoking]

Note that PieChart uses only first table row as a data set. Next data rows are ignored.

c'est donc bien à la construction de ta page que tu dois le faire, tu peux bien sûr le faire après coup mais il semble plus intéressant de la faire à la lecture de la base.