Affichage infobulle sur graphique artichow

Soyez le premier à donner votre avis sur cette source.

Vue 11 338 fois - Téléchargée 1 234 fois

Description

Bonjour,

Etant donné que j'ai vu plusieurs fois dans le forum des personnes cherchant à mettre en place des infobulles lors du survol d'une courbe (LinePlot ou PlotGroup) avec le pointeur de la souris, je vous propose ici les moyens de la mettre en place.
Ainsi, lorsque la souris se retrouvera au dessus d'un point pourront être affichés :
- Le nom de la courbe auquel il appartient
- Sa valeur en abscisse
- Sa valeur en ordonnée

La solution sera détaillée comme suit :
1) Pré requis : Ensemble des fonctionnalités requises pour mettre en place la fonctionnalité
2) Mécanisme : Explication du mécanisme de mise en place
3) Mise en place : Placement des fichiers pour exploitation

Allez, c'est parti !

------------------------------------------------------------------------------------------------------------------
1) Pré-requis :

1.a) Javascript

Javascript va nous être utile pour programmer le comportement des éléments de la page en fonction des évènements déclenchés par l'utilisateur.

Vous aurez besoin des fonctions javascript suivantes :
- elt_ShowBubble : Afficher une infobulle
- elt_HideBubble : Masquer une infobulle
- img_UseMap : Modification de la MAP d'une image
- elt_SetInnerHtml : Modification du contenu HTML d'un élément

Nous inclurons ces fonctions dans le fichier fwk_gen.js

1.b) AJAX

AJAX sera utilisé pour construire la MAP après le chargement de l'image.

Vous aurez donc besoin des fonctions javascript (et oui, AJAX c'est du javascript) suivantes :
- ajax_Request : Déclenche une requête sur le serveur via AJAX
- ajax_Process : Traitement déclenché par la réponse du serveur

Nous inclurons ces fonctions dans le fichier fwk_ajax.js

1.c) ARTICHOW

La classe LinePlot.class.php de Artichow a été enrichie d'une nouvelle fonction afin de récupérer les points nécessaires à la création de la MAP pour l'image.

Vous aurez donc besoin de la la nouvelle classe contenant la fonction suivante :
- setImageMapFile : Création d'un fichier contenant l'ensemble des points

Pour une intégration plus facile, la classe modifiée sera fournie

1.d) PHP - Création du graphique

La fonction PHP suivante cré un graphique ARTICHOW et fait appel à la fonction ci-dessus :
- createGraph : Dessine un graphique de type LinePlot. Elle sera appelée dans un script de création du graphique nommé script_creation_graphique.php

Nous inclurons cette fonction dans le fichier linePlotGraph.php. script_creation_graphique.php fera donc un include de linePlotGraph.php

1.e) PHP - Création de la MAP

La fonction PHP suivante sera utilisée pour créer le code HTML de la MAP à partir du fichier contenant l'ensemble des points de(s) courbe(s) :
- createHtmlMap

Nous inclurons cette fonction dans le fichier html_map.php

1.f) HTML et CSS

Dans la page HTML qui va contenir l'image, il est nécessaire de définir une balise <DIV> qui va jouer le rôle d'infobulle. Les propriétés d'affichage de cette infobulle vont être définies dans une CSS.

------------------------------------------------------------------------------------------------------------------
2) Mécanisme

Bon, après avoir défini les pré-requis, voilà comment va se dérouler le mécanisme :
a) Création d'une page HTML qui va contenir une image (balise <IMG>) => index.php
b) Au chargement de index.php, l'image va être créée grâce à l'appel d'un script PHP positionné dans l'attribut SRC de l'image (SRC='script_creation_graphique.php...')
c) Ce script va faire appel à la fonction createGraph (utilisation de la classe modifiée LinePlot.class.php de ARTICHOW)
d) La fonction createGraph va :
- Créer le fichier contenant la liste des points grâce à l'appel de la fonction setImageMapFile
- Renvoyer un flux binaire correspondant au contenu de l'image représentant le graphique (fonctionnement classique de ARTICHOW)
e) Une fois que l'image a été chargée (à la fin du chargement de la page donc), il faut créer la MAP de l'image
f) Appel donc à AJAX (dans l'attribut ONLOAD de l'image) pour exécuter la fonction createHtmlMap du script html_map.php, qui va récupérer le fichier de point et renvoyer le code HTML de la MAP
g) En retour de la requête AJAX nous avons donc le code HTML de la MAP qu'il faut insérer dans la page HTML (à ce moment, le fichier de point est supprimé car plus utile) et affecter à l'image représentant le graphique.
h) Il ne reste plus qu'à admirer la courbe et afficher les infobulles en survolant les points avec le pointeur de la souris
------------------------------------------------------------------------------------------------------------------
3) Mise en place

- Créer un répertoire nommé 'graphique' dans votre serveur WEB
- Insérer tous les fichiers dans ce répertoire
- Faite appel à la page index.php et amusez-vous

Pour info, si vous décidez de mettre les fichiers ailleurs que dans un répertoire nommé 'graphique', veuillez changer l'url AJAX dans la page index.php

Source / Exemple :


Les sources se trouvent dans le fichier artichow_et_infobulle.zip

Conclusion :


J'espère avoir comblé un besoin !

A votre service,

Nirronico

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
samedi 2 avril 2005
Statut
Membre
Dernière intervention
4 août 2011

Bonjour à tous,
Pourriez- vous m'indiquer comment faire pour ajouter d'autres informations dans l'infobulle?je sais que c'est en partant du fichier de données et ensuite dans les tableaux obtenus par explode mais j'y arrive pas

Merci
Messages postés
2
Date d'inscription
lundi 19 février 2007
Statut
Membre
Dernière intervention
22 septembre 2010

Bonjour à tous,

Je profites d'être en un lieu ou pas mal de personne connaissent artichow pour poser ma question.
Je dois faire un histogramme. Jusque la pas de probleme.
j'ai 8 plots représentants les résultats de 8 communes.
Je souhaite pouvoir attribuer a chacune des communes une couleur particuliere.
commune1=vert
commune2=bleu etc etc....
Quelqu'un sait il comment faire cela.un histo avec des plots de couleurs differentes

Merci a tous par avance de l'aide que vous pourrez m'apporter
Messages postés
3
Date d'inscription
lundi 7 janvier 2008
Statut
Membre
Dernière intervention
28 mai 2010

Tout simplement génial!
Fonctionne même sous ie6, c'est pour dire :D

Merci beaucoup pour cet impeccable travail, propre, efficace, correctement documenté ... bref, une perle quoi :]
Messages postés
2
Date d'inscription
lundi 4 décembre 2000
Statut
Membre
Dernière intervention
19 avril 2010

Effectivement, j'avais précisé cette manip dans le "3) Mise en place" de la description.

a+
Messages postés
3
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
19 avril 2010

J'ai résolu mon problème en changeant dans le fichier index.php la ligne
onload="ajax_Request('html_map',2,false,2,'http://localhost/graphique/html_map.php'...
par celle-ci
onload="ajax_Request('html_map',2,false,2,'http://monsite/graphique/html_map.php'...
Un grand merci, Nirronico, pour ce super code !
Afficher les 9 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.