Discussion :

[Beginner.]

Salut,

Je me demandais s'il existait en JS des librairies permettant de tracer des courbes (dans un canvas ou autre) avec des fonctionnalités comme le zoom box, auto calibrage, curseur... Un peu comme certaines calculatrices graphiques...

[psychadelic]

oui, quelques milliers https://github.com/search?q=javascript+graph

[SpaceFrog]

Sinon une petit création de notre ami Andry en php https://andry.developpez.com/tutorie...-geometriques/

[eleydet]

Bonjour,

Une solution basée sur canvas :
http://eleydet.free.fr/BTS/applicati...aceur_exp.html

Et une version basée sur SVG qui fonctionne mais doit être améliorée :
http://eleydet.free.fr/tmp/

[Beginner.]

Merci à tous les trois...

Ok je vais regarder vos liens...

[Beginner.]

Re-Salut,

Bon j'ai regardé les liens et j'en ai cherché d'autres et souvent ce sont des outils pour tracer des histogrammes (charts) et mêmes des courbes mais par contre on n'a pas forcément les fonctionnalités comme le zoom box, auto calibrage, curseur...

En plus j'aimerais pour faire des tracés en temps réels (genre comme un oscilloscope qui "trace" la tension en fonction du temps)...

Je pense que je vais essayer de l'écrire...

Une solution basée sur canvas :
http://eleydet.free.fr/BTS/applicati...aceur_exp.html

Et une version basée sur SVG qui fonctionne mais doit être améliorée :
http://eleydet.free.fr/tmp/

As-tu pensé à ajouter d'autres fonctionnalités ?

Il me semble qu'un des points les plus difficiles c'est la graduation, en faire une avec des nombres qui tombent juste n'est pas évident...

[Beginner.]

Salut,

Qu'est-ce qui est le mieux entre canvas et svg ? Notamment pour un tracé en temps réel ?

[eleydet]

Bonjour,

Beginner écrit :

Qu'est-ce qui est le mieux entre canvas et svg ?

A mon avis SVG est le mieux. Il permet de faire des zooms sans dégrader l'image.

En plus j'aimerais pour faire des tracés en temps réels

Grafana est une solution très classique.

As-tu pensé à ajouter d'autres fonctionnalités ?

Je n'ai pas besoin de fonctionnalités supplémentaires. Mon but est double :

• Inclure simplement des graphiques au sein de pages HTML (je l'utilise déjà pour cela, mais je compte améliorer la bibliothèque).
• Mettre à jour mes traceurs de courbes en abandonnant canvas pour passer à SVG (pas encore fait).

[Beginner.]

Ok merci.

[Beginner.]

Une solution basée sur canvas :
http://eleydet.free.fr/BTS/applicati...aceur_exp.html

J'ai commencé à regarder ton code...

Je vois que c'est à nous de fixer les deltas (x et y)... C'est un des points difficiles car lorsqu'on fait des zoom box il faut pouvoir calculer automatiquement ces deltas et bien sûr si on veut des graduations qui tombe juste (des chiffres ronds) cela se complique encore plus...

Je veux dire par "des graduations qui tombe juste" des graduations dont le pas est l'un des chiffres suivants : 0.25, 0.50, 1 multiplié par 10^n où n peut être positif ou négatif...

En plus le pas doit tenir compte d'un autre problème : les graduations ne doivent pas se chevaucher ce qui fait qu'on doit parfois limiter le nombres de chiffres, pour cela certains ajoutent une puissance de 10 sur les axes...

Il y a du boulot...

[eleydet]

Bonsoir,

C'est vrai que je pourrais mettre en place un système de graduation automatique. Je n'y avais pas pensé.

Sinon, le code http://eleydet.free.fr/tmp/JSgrapheur.js me semble plus intéressant.

[Beginner.]

C'est vrai que je pourrais mettre en place un système de graduation automatique. Je n'y avais pas pensé.

C'est un point difficile, peut-être le plus difficile (graduations qui "tombent justes" et qui ne se chevauchent pas)...

Sinon, le code http://eleydet.free.fr/tmp/JSgrapheur.js me semble plus intéressant.

Est-ce que tu as une démo avec ce code ?

Y a-t-il beaucoup de différence avec le code de la démo dont tu as donné le lien ?

[Beginner.]

Salut,

Il se pourrait bien que SVG soit plus lent (gestion du DOM) que Canvas...

Pour le tracé en temps réel il faut pouvoir tracer les points au fur et à mesure, je me demande si avec le SVG on trace à chaque fois(à chaque nouveau point) toute la courbe ou bien si on peut la tracer point par point...

[eleydet]

Bonsoir,

J'ai commencé à travailler sur cette idée de graduations automatiques. Je n'ai fait que l'axe horizontal.
http://eleydet.free.fr/tmp2/

L'idée est de définir un nombre de graduations selon :

• la largeur en pixels du graphique,
• la hauteur des caractères indiquant les valeurs des graduations.

Exemple :

Code :

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

nb_graduation = Math.round( largeur_pixels_graphique / 50 );

Puis de calculer la valeur d'une graduation :

Code :

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

graduation = ( (valeur_maxi - valeur_mini) / nb_graduation ).toPrecision(1);

Il se pourrait bien que SVG soit plus lent (gestion du DOM) que Canvas...

Je ne sais pas.

Pour le tracé en temps réel il faut pouvoir tracer les points au fur et à mesure,

Au premier abord, je déplacerais les points sur la courbe plutôt que de dessiner une courbe par dessus l'autre.

[NoSmoking]

Bonjour,
pas lu tout le fil mais je rebondie sur

Il se pourrait bien que SVG soit plus lent (gestion du DOM) que Canvas...

c'est indéniable.
Au passage, la bibliothèque Chart.js^(*) gère ses graphiques sur base de <canvas>, si cela vous dit d'y jeter un oeil.

^(*) il doit y en avoir d'autre mais j'ai celui-ci en réserve

[Beginner.]

Puis de calculer la valeur d'une graduation :

Code :

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

graduation = ( (valeur_maxi - valeur_maxi) / nb_graduation ).toPrecision(1);

Ah je vois que tu affiches les graduations des abscisses verticalement... C'est en effet une astuce permettant d'en afficher le plus possible tout en évitant les chevauchements.


PS : Tu voulais écrire "valeur_maxi - valeur_mini" je suppose...

[Beginner.]

@NoSmoking Ah je viens de lier ton message, merci pour la réponse...

[eleydet]

Bonsoir,

PS : Tu voulais écrire "valeur_maxi - valeur_mini" je suppose...

C'est corrigé, merci!

[Beginner.]

Ok donc SVG est à priori moins rapide...

Mais un avantage peut-être c'est que l'on a accès à chaque élément (DOM) du coup on peut ajouter des gestionnaires d'événements, par exemple on pourra traiter le clique sur la courbe...

On peut aussi ajouter un style CSS...

Il me semble qu'il n'y a rien pour faire de telles choses avec canvas, non ? Il nous faut faire tout nous même ? Par exemple pour savoir si on clique sur la courbe il faudra récupérer les coordonnées de la souris et vérifier par calcule si elles correspondent à la courbe...

Si on veut faire un glisser/déposer d'une figure cela doit être plus difficile avec canvas ? J'ai vu que cela était possible ici : http://fabricjs.com/events cela doit exiger beaucoup de calculs...

[eleydet]

Bonjour,

Nouvelle version avec les couleurs inspirées de Grafana et... les graduations automatiques!
http://eleydet.free.fr/tmp/