1

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?

0

2 Answers 2

3

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).

4
  • That's an awesome approach, I will try that immiedately. Thank you!
    – jocken
    Jul 4, 2013 at 9:47
  • @jocken: You're welcome! :)
    – SNag
    Jul 4, 2013 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, 2013 at 13:49
  • @jocken: Is your comment missing a hyperlink? :P
    – SNag
    Jul 31, 2013 at 13:37
1

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.

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.