7

I have a big chart which, by its nature, needs quite a lot of horizontal space. This is an example: chart

I'm having troubles finding a way to present it on mobile devices. While I could find a way to make it somewhat readable in landscape mode, it's portrait mode that gives me the most troubles.
The left list with names could certainly go, but the main part of the chart is still too large to fit on a small screen.

Improve this question
4
  • Do the red bars really need to be that wide? It seems on half the size would work just as well saving more room.
    – DasBeasto
    Mar 29, 2016 at 16:48
  • @DasBeasto Actually the bar width depends on the width of the container of the graph. Currently around 90px is allotted for the left part, while all the remaining space is left to the bars. The dates aren't fixed either, more dates would make the bars smaller.
    – rubik
    Mar 29, 2016 at 16:57
  • Any reason why this needs to be viewed on a mobile device in such a way?
    – Michael Lai ♦
    Mar 29, 2016 at 23:19
  • @MichaelLai No reason. This is the format I chose for desktops. I'm looking forward to adapting it to mobile devices or finding a totally different format if it's better.
    – rubik
    Mar 30, 2016 at 7:47

2 Answers 2

Reset to default
9

Your best bet in this case is to make the left column fixed and allow scroll on the remaining columns. You can see an example (and script to do it) at DataTables Fixed Columns.

On top of this, since your scrolling columns are dates, I'd use some graphic effect to make these dates scroll and pass below the static variables. This way you improve visibility and help user understand this is an scrollable element. See example:

enter image description here

Improve this answer
4
  • 1
    Thanks for the answer. Currently the chart is made with D3.js, but I could consider switching to a table for small displays.
    – rubik
    Mar 29, 2016 at 17:12
  • This is just an example, you can do it with the tool of your choice (I was just doing the same as you in a table a couple days ago and used DataTables, hence it was fresh in my mind). I'm not an expert in D3, but I'm quite sure you can achieve the same effect with some JS scripting
    – Devin
    Mar 29, 2016 at 17:17
  • Scrolling horizontally (and vertically) on mobile devices? Not the most pleasant user experience so maybe you can offer something else to make it less painful?
    – Michael Lai ♦
    Mar 29, 2016 at 23:20
  • scrolling in mobile is the most common behavior since most sites won't fit. And quite honestly, with this setup there's nothing else he can do unless he goes for extremely different approaches that also require more comprehension of the problem
    – Devin
    Mar 29, 2016 at 23:23
2

The data feels like it is more suitable to be displayed in a table rather than a chart as pointed out by Devin. The actual data look like they are boolean values, so you can replace the red bar (a little bit too striking in terms of visual impact) with an appropriate letter or symbol/icon, which will certainly help to reduce space.

There's not much you can do if you insist on showing the whole timeline because it is impossible to design for an infinite or unlimited amount of data. But if this is not a requirement then I can offer you some alternate strategies to consider:

  • Filter on periods or date ranges to limit the width of the display, but you have the problem of scaling the display to deal with
  • Show a fixed length of time, but you have to work out whether it is worth the pain of doing pagination on mobile
  • Allow users to zoom in or out of time periods, but the interaction patterns can be tricky to do on mobile

What I actually think is most important in the context of the information that is on the screen is not so much seeing the whole picture, but highlighting periods when there is a change in the pattern or values for the individuals. So I would actually redesign the mobile view to look something more like this:

name | [date of last YES boolean value] [date of last NO boolean value]

name | [date of last YES boolean value] [date of last NO boolean value]

name | [date of last YES boolean value] [date of last NO boolean value]

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.