Afficher plusieurs graphiques sur une seule page dans une vue Web sous Android?
Je développe une application d'analyse qui afficherait plusieurs types de visualisations. Donc, si j'ai une page affichant des informations sur un stock, par exemple, je voudrais montrer à la fois la corrélation et la co-variance de ce stock avec un benchmark.
Le problème est que j'utilise des bibliothèques JavaScript (D3.js) pour les visualisations dans la vue Web et je me demande comment afficher plusieurs graphiques sur une seule page?
Est ce que je:
- Afficher les deux graphiques l'un en dessous de l'autre (dans ce cas, l'utilisateur devra faire défiler la page pour voir le 2ème graphique)?
- Afficher une option de balayage de type Tinder où l'utilisateur reste sur la même page et peut parcourir les 2 ou 3 graphiques qui appartiennent à la même page?
Avec ce dernier, j'évite à l'utilisateur d'avoir à faire défiler vers le bas (ce que j'ai lu à certains endroits, peut être un peu irritant pour l'utilisateur) mais j'ai peur que l'utilisateur ait du mal à donner un sens contextuel car, idéalement, on aimerait voir les deux graphiques ensemble .
Pour répondre à la question d'origine (indépendamment de la bibliothèque de graphiques à utiliser ou de l'analyse des méthodes de visualisation des données adaptées), vous pouvez envisager:
montrant les deux graphiques l'un en dessous de l'autre (auquel cas l'utilisateur devra faire défiler la page pour voir le 2ème graphique)
et introduction d'une zone avec des ancres aux deux visualisations (et autres en-têtes de page d'égale importance)
Alternativement, vous pouvez à nouveau envisager d'utiliser le type de visualisation des données comme une liste déroulante au-dessus du 1er graphique, par exemple.
Affichage: | tableau de corrélation V |
et permettre à l'utilisateur de sélectionner le type de visualisation qu'il souhaite.
La question devient alors: considérez-vous qu'une sélection d'utilisateur (d'un type de visualisation) est une préférence (et doit donc être mémorisée par l'application?)
Veuillez noter que faire défiler vers le bas nécessite moins d'effort de la part des utilisateurs sur les appareils tactiles.
D'un point de vue technique, j'utiliserais une bibliothèque graphique basée sur d3 comme C3 - http://c3js.org/ ou dc-js - https: // dc-js. github.io/dc.js/ pour éviter les détails fastidieux de la construction d'un graphe en d3 à partir de zéro (il y a aussi de telles bibliothèques là-bas aussi)
et heureusement, C3 a la possibilité d'avoir plusieurs séries sur le même graphique et d'avoir deux axes y distincts (un à gauche, un à droite) si les échelles de vos données sont très différentes afin qu'elles puissent être combinées si elles partagent un x commun -axe. Cela évite d'avoir des graphiques séparés comme troisième option pour vous.
Les légendes peuvent également être utilisées pour masquer de manière interactive la série individuelle, le lien c3 contient de nombreux exemples
En ce qui concerne:
afficher une option de balayage de type Tinder où l'utilisateur reste sur la même page et peut parcourir les 2 ou 3 graphiques qui appartiennent à la même page?
Une solution possible que vous voudrez peut-être envisager est d'utiliser le geste de balayage horizontal pour les graphiques qui ne peuvent pas tenir dans un écran mobile (en termes de largeur). Imaginez donc que vous souhaitiez afficher des données annuelles sur 40 ans (axe x). Vous pouvez autoriser une largeur minimale afin que les utilisateurs puissent effectuer un défilement horizontal sur des écrans plus petits sans perdre trop de fidélité sur l'axe du graphique.