Discussion :

[PsyKtra]

Bonjour,

Dans une de mes pages php, j'aurai besoin de générer un graphique représentant certaines données sous forme de lignes (graphe tout simple)
Mes données sont disponible dans un tableau(array) ainsi que dans un <table></table>

à votre avis quel est le bon moyen pour générer ce graphe ?
j'ai regardé sur le net il existe plusieurs solutions (plugin entre autres), mais y'en a tellement que je ne sais lequel choisir, l'idéal serai le plus simple
Est ce que qlq à déjà eu à faire des graphes ? qu'est ce que vous utilisez d'habitude ?

vos conseils sont les bienvenues

[danielhagnoul]

Bonsoir.

Actuellement, j'utilise le plug-in Visualize et avant j'utilisais le plug-in Flot

Je trouve que Visualize est plus simple à utiliser.

[SpaceFrog]

en effet ça pousse comme pluggin

[PsyKtra]

Bonjour,

D'abord merci pour vos réponses

En fait j'ai déjà testé le plug-in visualize dans un autre projet il est très simple en effet.

Alors pour mon projet actuel je l'ai essayé en premier mais ça n'a pas marché (d'où mon post ici sur les graphes), le problème c'est qu'il me fait un décalage entre le texte et le bloc où est censé se trouver le graphe, et ce bloc est vide!
J'ai changé le css, le graphe n'apparait toujours pas.
Mon tableau <table> est généré par une requête, et quand je l'affiche dans le code source de la page (après exécution) il est parfait. On retrouve bien toutes les balises <thead><tbody><tr><td><th> ...

J'ai vu sur le site que ce plug-in utilise HTML5, est ce que ça peut venir de là ?

Navigateurs que j'utilise : IE8, FF3, Chrome4.0.2

[danielhagnoul]

le problème c'est qu'il me fait un décalage entre le texte et le bloc où est censé se trouver le graphe, et ce bloc est vide!

Mon tableau <table> est généré par une requête, et quand je l'affiche dans le code source de la page (après exécution) il est parfait. On retrouve bien toutes les balises <thead><tbody><tr><td><th> ...

Dans la requête AJAX, à la fin du code JavaScript qui génère la table avez-vous ajouté (exemple pour une table qui a une classe visualize) :

Code :

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

$('.visualize').trigger('visualizeRefresh');

[PsyKtra]

Je fais un appel du plug-in seulement à la fin du chargement du <table> (donc après la requête ajax), voici mon code :

Code :

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

$('#datatable').visualize().trigger('visualizeRefresh').appendTo('#chart');

[danielhagnoul]

Un appendTo après le déclenchement de l'événement qui commande le rafraîchissement des graphiques !

Je ne sais pas si je pourrais vous aider, mais j'aimerais voir la totalité de votre code.

Un exemple de code de la documentation :

Code :

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

1
2
3
4
$('table')
   .visualize()
   .appendTo('body')
   .trigger('visualizeRefresh');

[PsyKtra]

Oui le appendTo n'a aucun sens ici, je suis entrain de tester toutes les possibilités c'est pour ça

En fait pour mieux expliquer le problème :

j'ai une page php qui me génère un tableau HTML qui suit exactement le même schéma que sur l'exemple donné sur le site du plug-in visualize. c'est à dire :

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
 
<table id="datatable"> 
<caption>Affichage des données</caption>
<thead>
<tr>
<th></th>
<th scope="col">AL</th>
<th scope="col">PH</th>
<th scope="col">Mn</th>
</tr>
</thead>
<tbody><tr>
<th scope="row">01/09/2007</th>
<td>0,02</td>
<td>6,95</td>
<td>,589</td>
</tr>
<tr><th scope="row">02/09/2007</th>
<td>0,02</td>
<td>6,97</td>
etc...
</tr>
</tbody>
</table>

Après ce tableau j'ai certains liens pour des opérations qu'on peut faire sur ce tableau :
- extraire sous excel
- générer un graphique
autre ...

Donc au clic sur mon lien pour "générer un graphique", je fais appel à cette fonction JS :

Code :

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

1
2
3
4
5
 
function graphe()
{
$('#datatable').visualize().trigger('visualizeRefresh').appendTo('#chart');
}

le #chart est un div définit sous le tableau avec une taille fixe 400*250

Voilà j'espère que tu vois un peu la structure de ma page


EDIT : au début j'étais sur le même exemple que tu m'as donné, avec le appendTo en premier, ça ne marche pas non plus

[danielhagnoul]

Bonsoir.

Votre exemple avec des corrections, voir les commentaires dans le code :

[Edit 2010-06-24 08:35] Version « line » améliorée ! La première version avait les mêmes données pour les deux courbes, on ne voyait donc qu'une seule ligne.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		@import url("../Filament-Group/charting/css/visualize.css");
		@import url("../Filament-Group/charting/css/visualize-light.css");
 
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* TEST */
		table, button, div#charting, h3 {
			margin:12px;
			padding:6px;
		}
	</style>
	<script charset="utf-8" src="../Filament-Group/charting/js/excanvas.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../Filament-Group/charting/js/visualize.jQuery.js"></script>
 	<script>
		$(function(){
			//$("#datatable").visualize({type: 'pie', height: '300px', width: '420px'});
			//$("#datatable").visualize({type: 'bar', width: '420px'});
			//$("#datatable").visualize({type: 'area', width: '420px'});
			//$("#datatable").visualize({type: 'line', width: '420px'});
 
			$("#btn").click(function(){
				$("#datatable").visualize({
					type: 'line',
					width: '420px',
					parseDirection:'x'
				}).appendTo("#monGraphique");
			});
		});
	</script>
</head>
<body>
	<button id="btn">Trace dans la divsion d'id chart</button>
	<table id="datatable">
		<caption>Affichage des données</caption>
		<thead>
			<tr>
				<td></td> <!-- td pas th -->
				<th scope="col">AL</th>
				<th scope="col">PH</th>
				<th scope="col">Mn</th>
			</tr>
		</thead>
		<tbody>
			<!-- attention, pas de virgule mais un point ! -->
			<tr>
				<th scope="row">01/09/2007</th>
				<td>0.020</td>
				<td>6.950</td>
				<td>0.589</td>
			</tr>
			<tr>
				<th scope="row">02/09/2007</th>
				<td>0.20</td>
				<td>4.250</td>
				<td>1.750</td>
			</tr>
		</tbody>
	</table>
	<div id="monGraphique">
		<h3>Mes beaux graphiques</h3>
	</div>
</body>
</html>

[PsyKtra]

Merci beaucoup pour ton aide Daniel

Je viens de comprendre d'où vient le problème !

En fait dans la première colonne de mon tableau je met les dates et ensuite les valeurs de chaque élément (Al, Ph, Mn ...) du coup quand il veut tracer son graphe il prend une courbe par date et c'est pour ça que ce n'est pas très joli et que ça dépasse

J'ai essayé d'inverser les "col" et "row" mais ça ne change pas grand chose
Je vais voir si je trouve une solution sur le net.

Merci en tout cas pour l'aide

PS: j'ai mis une image d'un exemple de tableau que génère ma page en pièce jointe

[PsyKtra]

Parsedirection: 'y'