Le client Html5 propose désormais un outil de rendu des graphiques similaire au client Xwpf. Le composant de base nous est fourni par Telerik au sein du framework KendoUI (tout comme pour l'agenda et le gantt).
Comme pour l'objet gantt et l'objet agenda, il existe quelques différences entre les composants Wpf et leur équivalent dans KendoUI, dont certaines peuvent être visibles et impactantes.
Ce paragraphe décrit les différences de comportement et les choix réalisés pour gérer ces différences. Si les différences visuelles et/ou fonctionnelles peuvent dans certains cas être sensible, nous avons fait en sorte qu'elles soient transparentes pour le programmeur (le code diva n'est pas impacté par les différences ou incompatibilités entre les composants Html ou WPF).

Graphe « Camembert »

Séries multiples :
Bien que ce ne soit pas sa vocation première, le PieChart Wpf, s'il est programmé astucieusement, permet d'afficher plusieurs séries (la cohérence des libellés n'est cependant plus garantie dans ces cas, qui s'éloignent des spécifications et du but premier d'un camembert !).

Open

Figure 1 : exemple de camembert à plusieurs séries en WPF.
Le chart Html est moins souple et ne permettra pas ce genre d'excentricité. Seule la première série sera prise en compte, les autres seront ignorées.
OffsetFromCenter :
Ce paramètre des fonctions de création de PiePoints permet d'indiquer (en % du rayon du graphe) l'écartement d'une part par rapport au centre.
Le comportement du composant Kendo est moins souple ce que permet le composant WPF : en Html, une part ne peut être séparée qu'au moyen d'un flag. Une part peu donc soit être « collée au gâteau», soit séparée (exploded dans le jargon Kendo).
Dans XHtml5 une par sera séparée dès lors que le paramètre OffsetFromCenter sera > 0. En revanche, il ne sera pas possible de choisir de « combien » elle sera séparée.

Graphe Cartésiens

Les séries de type Range et SplineRange n’existent pas dans Kendo. Ces séries seront traitées comme des séries de type RangeBar.

Le mode combinaison peut présenter des différences de comportement entre les clients WPF et Html5.

L’option d’organisation des libellés des axes (LabelFitMode) CHART_OPTV_AX_LBL_MODE_MULTILINE ne dispose d’aucune implantation dans KendoUI. Elle sera traitée comme CHART_OPTV_AX_LBL_MODE_ROTATE (rotation des libellés).

Evénements

Les événements du chart kendo ne permettent pas de récupérer les clics multiples et les clics molettes.

Par conséquent, seuls les clics simples sur le bouton droit et le bouton gauche seront notifié à diva par le client html5. En cas de double clic (droit ou gauche) l’événement clic simple sera envoyé deux fois.

Tooltips

Le positionnement et le comportement (disparition, mouvements) des tooltips diffèrent un peu en Html5, mais le contenu et la disposition du texte dans le tooltip restent identiques.

Zoom

Le zoom fonctionne de manière quasi identique en wpf et en Html5 :

Le zoom ne fonctionne qu’avec les graphes cartésiens. Le paramétrage du zoom permet de choisir la direction de zoom :

• Zoom horizontal uniquement (CHART_OPTV_ZOOM_HORIZONTAL),

• Zoom vertical uniquement (CHART_OPTV_ZOOM_VERTICAL),

• Zoom selon les deux directions (CHART_OPTV_ZOOM_BOTH),

La molette permet de zoomer ou dé-zoomer, le cliquer glisser permet de déplacer le contenu du graphique lorsqu’il est agrandi.

Le programmeur peut aussi activer le zoom par sélection, à la souris d’une zone (cliquer-sélectionner) grâce à l’option CHART_OPTV_ZOOM_SELECTTOZOOM ( ! cette option est virtuelle et ne fonctionne pas seule, il faut utiliser les options CHART_OPTV_ZOOM_HORIZONTAL_AND_SELECT, CHART_OPTV_ZOOM_VERTICAL_AND_SELECT, CHART_OPTV_ZOOM_BOTH_AND_SELECT).

Le zoom par sélection se fait par sélection à la souris d’une zone à agrandir. Il faut maintenir la touche majuscule gauche (left shift) pendant l’opération de cliquer-sélectionner.

A noter une légère différence entre le client XWPF et le client Xhtml5 : le cliquer-sélectionner se fait sur le clic droit en WPF, mais sur le clic gauche en Html (pour des raisons techniques).

Grille

Les options de grilles restent strictement identiques, mais l’allure des grilles change dans le cas des graphes radars.

TrackBall et Réticule (crosshair)

Le réticule est conçu différemment dans le composant kendo par rapport au composant wpf. L'implantation que nous en avons faite est cependant quasi identique. La seule différence notable se produit lorsque réticule et trackball cohabitent.
La fonctionnalité du trackball n'existe pas en tant que telle en html5. Pour produire une fonctionnalité similaire, nous avons modifié le réticule. En conséquence, lorsque réticule et trackball sont présents en html 5, le trackball modifie le comportement du réticule
Ci-dessous, réticule + trackball en wpf (à gauche) et en Html (à droite).

Open

Note : en temps normal, réticule et trackball n'ont pas vocation à être actifs en même temps. Le cas présenté ci-dessus est donc censé être un cas d'école.

Axes temporels

Le client XHtml5 ne dispose pas des axes de type CHART_OPTV_AX_T_DATETIME_CATEGORICAL (axe temporel par catégorie). Ces axes seront traités comme des axes temporels continus.