Choisir le bon grapheur pour l’affichage des mesures du diagnostic permanent

Dans le cadre de la mise en place de notre outil de gestion de mesures en temps réel, une problématique importante arrive assez vite , celle de pouvoir représenter fidèlement et de façon intelligible et ergonomique des jeux de données qui peuvent parfois comporter un grand nombre de points. Le tout dans une interface orienté web qui est le choix de design de notre solution.

Et pour satisfaire cette exigence, nous avons dû explorer plusieurs pistes !

La première c’est celle d’écrire notre grapheur en webGl avec des classes dédiées. cette solution fonctionne mais nécessite de développer l’ensemble du grapheur mais nous ne pouvons pas nous appuyer sur des librairies pour nous aider. Nous avons donc chercher une piste alternative qui nous permettrait de diminuer le nombre de lignes de codes.

Nous avons alors explorer les solutions plutôt orientées Javascript et technologie Canvas. cette technologie permet d’avoir plus d’outil pré-pensé pour afficher notre donnée. Nous avons alors testé la librairie Chart.js, une librairie reconnue dans ce domaine.

Les technologies canvas et la recherche du bon compromis

Chart.js a pu être facilement mis en place pour du test et le grapheur peut être utilisé en quelques lignes de javascript ce qui était le but recherché en passant sur la technologie canvas. Donc de prime abord, nous avons une libraire qui nous permet de faire des graphiques sympas en très peu de ligne de code

Sauf que (évidemment), ce n’est pas si simple, car si la librairie se comporte bien pour un nombre de points réduits (entre 100 et 10 000), c’est une autre paire de manche quand on veut afficher des courbes de 500 000 points. Là, le rendu et les interactions ne sont pas très bonnes et la page freeze…

Nous nous sommes alors penché sur les benchmarks des différentes librairies, prenant en compte l’aspect performance cette fois-ci.

Une autre librairie que nous connaissions par ailleurs a fait l’objet d’une branche de test car théoriquement plus performante que Charts.js, c’est HighCharts.Js , cette librairie n’est cependant pas open source. Et lors du banc d’essai, nous nous sommes aperçus que la librairie proposait une décimation des points lorsqu’ils sont nombreux afin de rester fluide.

ce comportement quoique judicieux , ne nous va pas dans ce contexte car notre outil à pour but de représenter fidèlement la donnée afin de la modifier. nous ne souhaitons donc pas modifier la donnée pour l’afficher…

Mais alors où est la solution ?

L’avantage des librairies de graph en Javascript , c’est qu’il y en a plein.

Nous cherchons donc une librairie à but scientifique qui va réussir à afficher nos données brutes sans trop de fioritures et qui garde une écriture simple avec des fonctionnalités intégrés de bonnes qualités sinon autant faire notre outil en webGL.

Nous avons alors testé Uplot, la libraire se présente comme simple et orienté performance… à priori c’est un bon candidat.

Lors de la phase de test nous avons généré des données aléatoires en gros volumes pour voir comment le grapheur réagit à l’affichage de deux ans de données sur plusieurs courbes et 360 000 points.

Et là , ça continue de marcher, c’est fluide, on peut zoomer… reste à apprivoiser la librairie mais nous décidons que c’est le bon choix pour notre outil.

Nous allons donc préparer nos graphiques avec cette librairie et présenter ceci à nos utilisateurs pour savoir ce qu’ils en pensent.

Maximilien, de l’équipe hydra.