Image de l'article jsGraphDisplay : créez des graphiques en javascript

Commentaires sur l'article jsGraphDisplay : créez des graphiques en javascript

#1

Par MdAions à 17h39 :

Bonjour,
Félicitations, l'idée de faire un script réduit est très intéressante. Toutefois il manquerait 2 choses :
- la possibilité de remplacer les points, triangles, rectangles par du texte variable en fonction du point,
- passer l'échelle des axes (au moins l'axe des y) en logarithmique
Qu'en pensez-vous ?

#2

Par Patrice à 11h25 :

Bonjour MdAions,

Merci pour le message. Effectivement il faudrait faire évoluer cette base. J'avais déjà fait des corrections pour gérer le survol de la souris (dans le cas d'un site qui affiche des fichier GPX sur une carte, le graphique servant à afficher le dénivelé).

Efffectivement remplacer le point (ou le compléter avec) un texte me parait indispensable, ainsi qu'une meilleure gestion des axes.

#3

Par sam_play à 22h57 :

Bonsoir,

Merci pour le partage. Je trouve ce sujet très intéressant.

J'espère ne pas être hors sujet avec mes questions suivantes.

Est-ce que votre code permet de rajouter un graphique qui a des dates en abscisses?
Si oui, je n'ai pas vu comment faire dans votre billet.
Remarque : J'ai testé avec les Data [[2019-08-09,14],[2019-08-16,18],...] à la place de votre exemple [[4, 21],[8, 23],...], mais les abscisses ne sont pas les dates indiquées

De même je n'ai pas vu comment dynamiser les données résultantes d'une requête SQL.
Est-ce possible ?

Merci d'avance pour votre réponse

#4

Par Diego à 09h43 :

Bonjour,
Je m'amuse à reproduire une ti-82 en js, et j'aimerai utilisé votre script pour la partie graphique. Cela dit, je n'arrive pas à effacer un graphique une fois celui-ci Draw. Auriez vous une astuce? (Je ne comprends pas comment DataDelete fonctionne)

Merci d'avance !

#5

Par Patrice à 10h20 :

Bonjour Diego,

Il faut ajouter une petite fonction pour effacer le contenu du SVG


function SVGDelete(aId){
let e = document.getElementById(aId);
if(!e) return 0;
while(e.firstChild){
e.removeChild(e.firstChild);
}
return 1;
}

La fonction DataDelete attend le titre du jeux de données en paramètre.
Pour ajouter un jeux de donnée :
graph.DataAdd({
title: 'donnee1',
data: [
[1, 2],
[3, 4],
[5, 6]
]
});

Pour l'effacer :
graph.DataDelete('donnee1');

Une fois les données effacées, il faut effacer le graphique (avec SVGDelete()) et redessiner le graphique (avec graph.Draw())

#6

Par grizm à 09h46 :

bonjour,
il est génial votre script, j'aime son style.
En revanche, j'ai un problème vraisemblablement de visibilité entre les deux scripts, je me ramasse un "Uncaught ReferenceError: jsGraphDisplay is not defined"
Si quelqu'un a une idée, je suis preneur, je ne doute pas que je le ferai marcher un jour mais ça risque de me prendre du temps.
Merci pour ce code.

#7

Par Patrice à 09h59 :

Bonjour grizm,

Le script est chargé au moment de l'appel ?

Pour en être sûr le mieux est de placer la création dans un évènement DOMContentLoaded

document.addEventListener('DOMContentLoaded', (event) => {
var graph = new jsGraphDisplay();
// etc
});

Ajouter votre commentaire

Votre adresse ne sera pas affichée.

Elle sert à vous envoyer une notification.

 

Image Viewer