Affichage infobulle sur graphique artichow
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
J'espère avoir comblé un besoin !
A votre service,
Nirronico
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
- Affichage infobulle sur graphique artichow
- Agence interface graphique ✓ - Forum Java
- Logiciel pour créer interface graphique - Forum Java
- Tracer graphique en ligne - Forum C / C++ / C++.NET
- Objet graphique ✓ - Forum C# / .NET
- Interface graphique c++ ✓ - Forum C++ & C++ .NET
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.