Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have table with 5 columns that looks like this.


|Seller  | ArticleID | Count | Period | Site
--------------------------------------------
|User1   | BV1       | 3     | 2013-3 | Site1
|User1   | BV12      | 1     | 2013-3 | Site2
|User2   | BV3       | 2     | 2013-2 | Site1

+ 100 more rows

Seller: Our salesman
Articleid: The Product
Count: How many products
Period: During which year and month
Site: On what site

The problem is: How should I display this data as a graph for easy display?

I'm using highcharts for graph creation.

What I have done so far:

  • Count as Y-axis
  • Period as X-axis
  • Line graphs in different colors that represents the different sites

So it looks similar to http://www.highcharts.com/demo/line-basic

But I'm missing the Product and the Seller.

Does anyone have a suggestion on how to display this or an UX-example that solves a similar problem?

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

As a Business Intelligence developer myself, this is same question in my line of work, every time there are more dimensions than the graph can handle. As in your example, a line-chart is a two dimensional graph -- the common practice is to put the measure on the Y-axis, and one dimension each on the X-axis and on the graph lines.

To add more dimensions, the common practice is to have drop-downs that act as filters. The drop-downs may be multi-select or single-select, as per your need.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The drop-downs are responsive, meaning that the graph will be updated each time the value on the drop-down is changed.

Note however, that not all users of your system would like to see the same stuff on the same axes/filters. It is very good UX when you leave the axis and filter selection in the hands of the user itself. You could have the following in the settings menu for your graph:

mockup

download bmml source

(It goes without saying that you must incorporate logic to avoid the same selection on two different axes/filters, as seen above with the disabled radio/checkbox options.)

It is worth mentioning here that other less common practices of accommodating more dimensions that a graph supports, is to use tabs or pagination in place of drop-downs. For example, in your example, you could have one tab for each product, and pagination under each tab for each seller type. You could either pre-render all of the graphs, or rendered a graph selectively when the user visits that tab/page. However, this approach is clumsy for a large number of dimensions, or when a particular dimension has a large number of entries (for instance, having a hundred tabs for a hundred products makes no sense).

share|improve this answer
    
That's an awesome approach, I will try that immiedately. Thank you! –  jocken Jul 4 '13 at 9:47
    
@jocken: You're welcome! :) –  SNag Jul 4 '13 at 9:58
    
@jocken: Thanks for accepting this answer. What was your final approach? If you improvised over this answer, it would be good to hear your feedback. :) Thanks! –  SNag Jul 29 '13 at 13:49
    
@jocken: Is your comment missing a hyperlink? :P –  SNag Jul 31 '13 at 13:37
add comment

Result

  • I kept the Count in the Y-axis and the Period in the X-axis.
  • I made 3 dropdowns, Product, Seller, Site.
  • I decided, since our biggest challenge today is comparing our different sites and how it goes, to always have the site as static curve. So if I choose all sites, it divides the sites to different curves. Even if I choose a site the curve will still represent the site.
  • Header became like this: Sales - Mike Davis (1 year subscription-product)
  • I still haven't received any feedback due to holiday season so it might change in a few days.
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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