Créer un histogramme [Résolu]

[Audrey698]

Bonjour,

J'ai des données que je souhaite représenter sous forme graphique. Ce serait la première fois que je fais ça en php et je ne sais pas bien comment m'y prendre...

Mes données sont les suivantes : date et hits
A chaque date correspond un nombre de hits. Je souhaite faire un graphique sous forme d'un histogramme (classique donc).

Quelle est la meilleure façon de s'y prendre ? Existe-t-il des scripts préfaits efficaces (j'ai cherché et trouvé PHP/SWF Charts, apparemment génial, mais il ajoute un lien vers le site du script :-/) ?

Pourriez-vous m'aiguiller un peu s'il vous plait ?

[yannux]

Regarde du côté d' Artichow ou de JPGraph

[Audrey698]

Merci pour ces pistes .

J'ai regardé du côté d'Artichow mais je ne comprends pas commens dessiner un histogramme avec des dates en absices. J'ai posté un message dans le forum du site d'Artichow mais celui-ci ne semble pas très actif :-/.

JPGraph n'a pas de forum d'aide, si :- ?

[yannux]

Je te conseil de commencer en te basant sur les exemples données (tu peux cliquer sur les graphiques pour voir le code )

Il y' a aussi les tutoriaux

J'ai également fait un
petit article de "découverte". Si ça peut t'aider...

[Audrey698]

Merci pour ces infos .

J'ai fouillé pas mal mais je ne comprends toujours pas pourquoi ça ne marche pas :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$req = mysql_query($sql) or die(mysql_error());
 $var1 = array();
$var2 = array(); 
$i = 0;
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	echo "$date $hits"; // affiche "27 10"
	$var1[$i] = $date;
	$var2[$i] = $hits; 
	$i++;
} 
 
echo "<img src='toto.php?values=".urlencode(serialize($var1))."' alt='Mon graphique'/>";

et toto.php :

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
<?php
 
   // On vérifie que les données à afficher sur le graphique existent
   if(isset($_GET['values']) === FALSE) {
      exit;
   }
 
   // On récupère les valeurs à afficher sur le graphique dans $_GET['values'] et on les désérialize
   $data = @unserialize($_GET['values']);
 
   // On vérifie que les données passées en GET sont correctes
   if(is_array($data) === FALSE) {
      exit;
   }
 
   require_once "charts/LinePlot.class.php";
 
   // On créé une courbe basique avec les données
   $plot = new LinePlot($data);
 
   // On créé le graphique et on y ajoute la courbe
   $graph = new Graph(400, 300);
   $graph->add($plot);
 
   // On affiche le graphique à l'écran
   $graph->draw();
 
?>

Ca ne me donne rien, je ne vois pas pourquoi :- ?

[yannux]

Alors aperrement tu crée $var1 et $var2.
Cependant il te faut un tableau avec une structure comme ça plutot :

Code :

1
2
3
4
5
 
$data= array ( 'date_1' => 'hit_1' , 
                          'date_2' => 'hit_2' , 
                          'date_3' => 'hit_3' , 
                          etc.... );

Date_XX est mis en absisse et hit_XX en ordonnée.

[Audrey698]

Comment dois-je faire alors :- ? Ca ne marche pas comme ça non plus :

Code :

1
2
3
4
5
6
7
8
9
10
11
$req = mysql_query($sql) or die(mysql_error());
$i = 0;
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	echo "$date $hits";
	$values[$i] = array ('$date'  => '$hits');
	$i++;
} 
echo "<img src='toto.php?values=".urlencode(serialize($values))."' alt='Mon graphique'/>";

[cadoudal56]

Et comme ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
$req = mysql_query($sql) or die(mysql_error());
$i = 0;
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	echo "$date $hits";
	$values[$i] = '$date'  => '$hits'; //ici que cela change
	$i++;
} 
echo "<img src='toto.php?values=".urlencode(serialize($values))."' alt='Mon graphique'/>";

[yannux]

Peux tu faire un var_dump de ton tableau voir ce qu'il contient.
Aucune erreur d'afficher ?

Sinon je pensais plutot àa un code comme ça :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
//Pas besoin de $i
 
$req = mysql_query($sql) or die(mysql_error());
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	echo "$date $hits";
 
        //ton indice de tableau c'est la date
	$values[$date] = $hits; 
}

[Audrey698]

Envoyé par cadoudal56

Et comme ceci :

Code :

Merci pour ta suggestion . Cela me donne malheureusement une erreur :

Code :

unexpected T_DOUBLE_ARROW

pour la ligne $values[$i] = '$date' => '$hits';

Yannux > En fait je prends uniquement le jour (pour pouvoir afficher plus de barres/jours dans mon histogramme). Donc si je prends le jour comme indice de mon tableau est-ce que ça va toujours marcher si on est le 05 du mois ? Est-ce que ça va toujours afficher les jours dans cet ordre : ... - 28 - 29 - 30 - 01 - 02 -03 - 04 - 05 (c'est à dire afficher les derniers jours du mois précédent avant les premiers jours du mois en cours) ?

J'ai fais :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
$req = mysql_query($sql) or die(mysql_error());
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	//echo "$date $hits"; // Affiche bien les données
 
    //ton indice de tableau c'est la date
	$values[$date] = $hits; 
}
var_dump($values);
echo "<img src='toto.php?values=".urlencode(serialize($values))."' alt='Mon graphique'/>";

Et ça me donne :

array(2) { [27]=> string(2) "10" [28]=> string(1) "8" }

Ca parrait bon non pourtant :-?

[yannux]

Oui ça m semble bon..
Tu peux faire un essai avec ton tableau et l'exemple donnée ici :
http://www.artichow.org/bar/Simple

Directement dans ton script, sans passer par une balise <img...

[Audrey698]

Mmm si je fais :

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
$req = mysql_query($sql) or die(mysql_error());
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);  
	$values[$date] = $hits; 
}
require_once "charts/BarPlot.class.php";
 
   $graph = new Graph(400, 400);
   $graph->setAntiAliasing(TRUE);
 
   $plot = new BarPlot($values);
   $plot->setBarColor(
      new Color(250, 230, 180)
   );
   $plot->setSpace(5, 5, NULL, NULL);
 
   $plot->barShadow->setSize(3);
   $plot->barShadow->setPosition(Shadow::RIGHT_TOP);
   $plot->barShadow->setColor(new Color(180, 180, 180, 10));
   $plot->barShadow->smooth(TRUE);
 
   $graph->add($plot);
   $graph->draw();
 ?>

ça me renvoit une image avec : "Undefined offset : 0" sur la ligne 253 de la *class.php

Par contre si je fais :

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
$req = mysql_query($sql) or die(mysql_error());
$i = 0;
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	//echo "$date $hits"; // Affiche bien les données
 
    //ton indice de tableau c'est la date
	$values[$i] = $hits; 
	$i++;
}
//var_dump($values);
require_once "charts/BarPlot.class.php";
 
   $graph = new Graph(400, 400);
   $graph->setAntiAliasing(TRUE);
 
 
   $plot = new BarPlot($values);
   $plot->setBarColor(
      new Color(250, 230, 180)
   );
   $plot->setSpace(5, 5, NULL, NULL);
 
   $plot->barShadow->setSize(3);
   $plot->barShadow->setPosition(Shadow::RIGHT_TOP);
   $plot->barShadow->setColor(new Color(180, 180, 180, 10));
   $plot->barShadow->smooth(TRUE);
 
   $graph->add($plot);
   $graph->draw();
   ?>

Ca m'affiche le graphique mais sans les données des abscisses du coup : cela me donne un première barre de 10 de haut et en abscisse "0", et une autre barre avec une hauteur de 8 avec une abscisse notée "1". Les Les ordonnées sont donc transmises mais pas les abscisses...



Ce qui est logique puisque le tableau ne contient plus que les hauteurs. Mais comment faire passer les dates dans l'histogramme pour les afficher en dessous de chaque barre en abscisse :-?

Edit : en fait si je fais "$i = 25;" au lieu de "$i = 0;" ça m'affiche la même erreur que le premier code de ce post (avec "$values[$date] = $hits; "). Bizarre, non ??

[yannux]

Un petit indice..
La solution est ici : http://www.artichow.org/code?file=bar-001

Plutôt vers la fin du script. Et il va te falloir 2 tableaux finalement.

Code :

1
2
3
4
 
...
$plot->xAxis->setLabelText($y);
....

[Audrey698]

Ah ça va déjà un peu mieux là. Merci encore une fois pour votre aide !!

Pour résumer :

Si je fais ça sur une page indépendante :

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
$req = mysql_query($sql) or die(mysql_error());
$i = 0;
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	//echo "$date $hits"; // Affiche bien les données
 
    //ton indice de tableau c'est la date
	$values[$i] = $hits;
	$y[$i] = $date;
	$i++;
}
require_once "charts/BarPlot.class.php";
 
   $graph = new Graph(400, 400);
   $graph->setAntiAliasing(TRUE);
 
 
   $plot = new BarPlot($values);
   $plot->setBarColor(
      new Color(250, 230, 180)
   );
   $plot->setSpace(5, 5, NULL, NULL);
	$plot->xAxis->setLabelText($y);
   $plot->barShadow->setSize(3);
   $plot->barShadow->setPosition(Shadow::RIGHT_TOP);
   $plot->barShadow->setColor(new Color(180, 180, 180, 10));
   $plot->barShadow->smooth(TRUE);
 
   $graph->add($plot);
   $graph->draw();
   ?>

Ca m'affiche très correctement le graphique comme je le souhaite !!

Par contre ça bloque toujours dans le passage via le tag image. En effet si je fais ceci:

Code test2.php :

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
?php
// On vérifie que les données à afficher sur le graphique existent
   if(isset($_GET['values']) === FALSE) {
      exit;
   }
 
   // On récupère les valeurs à afficher sur le graphique dans $_GET['values'] et on les désérialize
   $values = @unserialize($_GET['values']);
 
   // On vérifie que les données passées en GET sont correctes
   if(is_array($values) === FALSE) {
      exit;
   }
require_once "charts/BarPlot.class.php";
 
   $graph = new Graph(400, 400);
   $graph->setAntiAliasing(TRUE);
 
 
   $plot = new BarPlot($values);
   $plot->setBarColor(
      new Color(250, 230, 180)
   );
   $plot->setSpace(5, 5, NULL, NULL);
	$plot->xAxis->setLabelText($y);
   $plot->barShadow->setSize(3);
   $plot->barShadow->setPosition(Shadow::RIGHT_TOP);
   $plot->barShadow->setColor(new Color(180, 180, 180, 10));
   $plot->barShadow->smooth(TRUE);
 
   $graph->add($plot);
   $graph->draw();
   ?>

Code paf.php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$req = mysql_query($sql) or die(mysql_error());
$i = 0;
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	//echo "$date $hits"; // Affiche bien les données
 
    //ton indice de tableau c'est la date
	$values[$i] = $hits;
	$y[$i] = $date;
	$i++;
}
 
//var_dump($values);
echo "<img src='test2.php?values=".urlencode(serialize($values))."' alt='Mon graphique'/>";

Là ça ne marche plus rien :-/ (pas d'erreur non plus). J'ai essayé de ne pas exécuter la variable y : "// $plot->xAxis->setLabelText($y);" mais ça ne change rien (même pas un graphique mal foutu ;-/).

[yannux]

Ton tableau est gros ?
Je crois que le nombre de caractère dans une url est limité à 255 caractères

[Audrey698]

Ben en fait c'est très exactement les données que j'ai citées précédemment avec le var dump. Donc non c'est pas gros du tout, ça correspond à 2 colonnes avec comme données des nombres à 2 chiffres.

Mais le problème se posera peut-être lorsque j'aurais 20 colonnes à afficher non (ce qui sera rapidement le cas pour ce que je souhaite faire) ? Comment doit-on faire dans ce cas là :- ?

[yannux]

Il y a les sessions je pense.
Par contre c'est bizarre si tu n'as que peu de valeurs pour l'instant....
Peut tu montrer la source html de ta page avec la balise img....
Voir le contenu de src="...

[Audrey698]

Pour m'assurer que ce n'était pas lié au code source de la page j'ai fait ceci :

Code histogramme.php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
// BDD connexion
$sql = "select ...";
$req = mysql_query($sql) or die(mysql_error());
$i = 0;
while($sql_data = mysql_fetch_assoc($req)) {
	$date = $sql_data['date'];
	$hits = $sql_data['hits'];
	$date = substr($date, 8, 2);
	//echo "$date $hits"; // Affiche bien les données
 
    //ton indice de tableau c'est la date
	$values[$i] = $hits;
	$y[$i] = $date;
	$i++;
}
 
//var_dump($values);
echo "<img src=\"test2.php?values=".urlencode(serialize($values))."\" alt=\"Mon graphique\"/>";
?>

Seul le tag de l'image s'affiche donc sur cette page (rien d'autre dans le code source), c'est à dire :

Code :

<img src="test2.php?values=a%3A2%3A%7Bi%3A0%3Bs%3A1%3A%223%22%3Bi%3A1%3Bs%3A1%3A%224%22%3B%7D" alt="Mon graphique"/>

Et

Code test2.php :

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
<?php
// On vérifie que les données à afficher sur le graphique existent
   if(isset($_GET['values']) === FALSE) {
      exit;
   }
 
   // On récupère les valeurs à afficher sur le graphique dans $_GET['values'] et on les désérialize
   $values = @unserialize($_GET['values']);
 
   // On vérifie que les données passées en GET sont correctes
   if(is_array($values) === FALSE) {
      exit;
   }
require_once "charts/BarPlot.class.php";
 
   $graph = new Graph(400, 400);
   $graph->setAntiAliasing(TRUE);
 
 
   $plot = new BarPlot($values);
   $plot->setBarColor(
      new Color(250, 230, 180)
   );
   $plot->setSpace(5, 5, NULL, NULL);
	//$plot->xAxis->setLabelText($y);
   $plot->barShadow->setSize(3);
   $plot->barShadow->setPosition(Shadow::RIGHT_TOP);
   $plot->barShadow->setColor(new Color(180, 180, 180, 10));
   $plot->barShadow->smooth(TRUE);
 
   $graph->add($plot);
   $graph->draw();
   ?>

Je m'assure donc ainsi que cela ne vient pas du code source, non ? Par contre du coup ça ne dit toujours pas d'où peut venir le foirage :-/.

Quand j'enlève le urlencode, j'ai ceci :

Code :

<img src="test2.php?values=a:3:{i:0;s:2:"10";i:1;s:2:"16";i:2;s:1:"3";}" ...>

(les données ont légèrement évolué depuis hier et il y a un jour de plus aussi du coup ).

J'ai aussi essayé de modifier test2.php comme-ceci :

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
<?php
$values = urldecode($_GET['values']); // ça ne me semblait pas logique qu'on urlencode d'un coté sans decoder de l'autre, non ?? ((mais c'est pourtant le code d'exemple d'Artichow donc je présume que ça devait être bon sans :-?)
   $values = @unserialize($values);
 
 
require_once "charts/BarPlot.class.php";
 
   $graph = new Graph(400, 400);
   $graph->setAntiAliasing(TRUE);
 
 
   $plot = new BarPlot($values);
   $plot->setBarColor(
      new Color(250, 230, 180)
   );
   $plot->setSpace(5, 5, NULL, NULL);
	//$plot->xAxis->setLabelText($y);
   $plot->barShadow->setSize(3);
   $plot->barShadow->setPosition(Shadow::RIGHT_TOP);
   $plot->barShadow->setColor(new Color(180, 180, 180, 10));
   $plot->barShadow->smooth(TRUE);
 
   $graph->add($plot);
   $graph->draw();
   ?>

Et ainsi j'ai le message d'erreur suivant affiché :

Class Plot : You tried to set a value that is not an array.

[yannux]

Alors attention je viens de voir que tu faisais un urlencode et un serialize.

Si tu fais un :

Code :

1
2
 
urlencode(serialize($ta_var)).

Pour récupérer tu dois faire :

Code :

1
2
 
$ta_var_ok= unserialize(urldecode($ta_var_depuis_get));

Ah et supprime les @ devant tes fonctions C'est pas très propre

[Audrey698]

Je viens de trouver une super astuce pour afficher mes graphique quelque soit le nombre de données !

L'astuce divine est ici : http://artichow.org/forum/read.php?2,3636,3636#msg-3636

Et ça marche du tonnerre de Dieu du premier coup .

Par contre par curiosité je ne comprends pas ta réflexion car en faisant :

Code :

1
2
$values = urldecode($_GET['values']); // ça ne me semblait pas logique qu'on urlencode d'un coté sans decoder de l'autre, non ?? ((mais c'est pourtant le code d'exemple d'Artichow donc je présume que ça devait être bon sans :-?)
   $values = @unserialize($values);

Je fais d'abord un decode puis un unserialize comme toi non :- ?