Displaying advanced graphs (with data from table)

Question

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?

Answer 1

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.

^{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:

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

Answer 2

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.