Displaying multiple charts in one page in a web view in Android?

Question

I am developing an analytics app which would display multiple types of visualizations. So if I have a page displaying information about a stock, for instance, then I would like to show both the correlation and co-variance of that stock with a benchmark.

The problem is that I am using JavaScript libraries (D3.js) for the visualizations in the web view and I am wondering how to show more than one graph in a single page?

Do I:

• Show both graphs, one below the other (in which case the user will have to scroll down the page to see the 2nd graph)?
• Show a Tinder-like swipe option where the user stays on the same page and can swipe through the 2 or 3 graphs that belong to the same page?

With the latter I avoid the user having to scroll down (which I have read in some places, can be a little irritating to the user) but am afraid the user will have trouble making contextual sense since ideally one would like to see both graphs together.

Answer 1

To answer the original question (independently from the charting library to be used or the analysis for fit for purpose data visualisation methods), you could consider:

showing both graphs, one below the other (in which case the user will have to scroll down the page to see the 2nd graph)

and introducing an area with anchors to the two visualisations (and other page headings of equal important)

Alternatively, you could again consider using the data visualisation type as a dropdown above the 1st chart, e.g.

Viewing: |correlation chart V|

and allowing the user to select the visualisation type he wants.

Then the question becomes do you consider a user selection (of a visualisation type) to be a preference (and therefore needs to be remembered by the application?)

Please note that scrolling down requires less user effort in touch devices.

Answer 2

From a technical perspective, I'd use a d3-based graphing library like C3 - http://c3js.org/ or dc-js - https://dc-js.github.io/dc.js/ to avoid the time-consuming details of building a graph in d3 from scratch (there are more such libraries out there too)

and happily C3 has the option to have multiple series on the one chart, and to have two separate y-axes (one left, one right) if the scales of your data are wildly different so they can be combined if they share a common x-axis. This avoids having separate graphs altogether as a 3rd option for you.

The legends can also be used to interactively hide the individual series, the c3 link has a lot of examples

Answer 3

Regarding:

show a Tinder-like swipe option where the user stays on the same page and can swipe through the 2 or 3 graphs that belong to the same page?

A possible solution you may want to consider is to use the horizontal swipping gesture for graphs that cannot fit in a mobile screen (width wise). So Imagine you want to display yearly data for 40 years (x-axis). You could allow a min width so that users can perform horizontal scrolling in smaller screens without losing too much chart-axis fidelity.