Report page with data table and chart

Question

I have the following report:

The report will be viewed in desktop and mobile (tablet) browsers

Clicking on the category title (eg. Pizzas), the data is collapsed or expanded.

Now I need to insert a chart (probably a pie chart) representing the share among the categories.

I am not sure where to put this chart. Which of the following would be the best implementations?:

1. Use another page, and have some kind of link to navigate to it?.
2. Separate the page into two 'tabs', one for the table and the other for the chart.
3. Have them on the same page, one on top of the other, maybe some button to toggle the chart.

Other problems I have to solve:

1. The data has no identification, mean name, quantity and value labels;
2. The summary is at the end of the category, I think it is good when the data is expanded, but weird when it is collapsed.

Question

What are some good practices for designing chart/report pages? How do I cope the two together, while solving the pointed issues?

---

Edit

Some clarifications based on the answers so far:

• With the chart I would like to sale share the among the categories, if I can show the share between the products would be a plus, but it is not mandatory.
• I will not build to different app, it will be only one web application, that will be accessed from Desktop and tablet. The design so far is responsive.
• The has not to be a pie chart, I will rethink the chart type based on @Michael Lai and @Scott answer

Answer 1

First screen - showing main page, Second screen - Once user tap on any section of pie chart a tooltip will popup Third screen - When user go into particular catagory

2. Percentage will informed user "how much sales had done". It will also guide user which section is week compare to other
3. A tooltip will inform user about which category is currently viewing, with its quantity and sales information.
4. Adding Download a report functionality to share with other either you can also use share button directly as per user need.
5. A breadcrumb navigation keep user inform user how they had reached here at any place of time.
6. As report will be viewed on mobile , desktop and tablets browsers responsive design become vital

hope this will help you

Answer 2

I would go the third way. By the way, it looks to me that you have ommitted the total. Below, you can see the navigation between sections. I have put the subtotals in the top row, and made it visually distinct by using the background color.

If you want to prepare also a mobile interface, you can use the same layout but you need to remember two things:

• provide "tappable" size of the active elements (refer to design guidelines for each system)
• change the checkbox to the appropriate switch for iOS

Regarding charts - if you want a chart per category, you can display it on demand, after checking off the "Show charts" checkbox.

If you want just one chart, showing sales distribution between categories, I would just replace the "Show charts" checkbox with "Show chart" button or tab switching the view to the chart (of course also remove the charts within each category). In the chart view you need to provide a way back to the report view.

BTW, I strongly recommend using https://developers.google.com/chart/ for charts - it's big, mature easy to code and flexible.

Answer 3

I think you can easily add a visualization for the part-to-whole (the share among the categories) into this report without causing any problems. I'd try to put a visualization inline for the revenue like so:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Basically the bars representing each individual product's contribution to the category total.

• You should definitely identify the Data: Product, Quantity and Price labels. I'd say the category is pretty clear without any further identification though. Note how I've worked those into the mockup above.

• Summary: I think you can go put an effective summary in the same row as the category instead of having a separate footer row. This way when it is collapsed, it clearly shows the totals for the category. When expanded, it is still accurate and intuitive.

---

Based on follow up clarifications: This one adds each category's contribution to the grand total as well. It's beginning to get busy here, but I think it still works. It is still relatively simple, allows for comparisons, and works expanded or collapsed. In general, it is information packed and effective.

One thing I might reconsider is the use of color. We're using mockups here so I'm assuming your actual implementation has colors and you need to coordinate somehow. Be careful though, color can add great value or severely harm a visualization. In this case, I might also experiment with different shades of gray if coordinating color with the larger application isn't a requirement.

---

P.S. There is plenty of research and comentary on why you should not use pie charts. Some of my favorite commentary is from Stephen Few but even Wikipedia's opening paragraph on Pie Charts now explains the following (and cites many references btw):

However, they have been criticized, and many experts recommend avoiding them, pointing out that research has shown it is difficult to compare different sections of a given pie chart, or to compare data across different pie charts. Pie charts can be replaced in most cases by other plots such as the bar chart.

Answer 4

I'll give you a few reasons to sway your decision into the right choice, i am sure you will be able to relate and find logic -

1. You need to build it on both desktop as well as mobile client. BIG reason for not using separate links. Most tablet users would get annoyed because of new link everytime opening in new window and/or replacing the current page.

2. Similarly, tabs would squeeze your data into smaller size (to accomodate both things), which devalues the purpose of viewing data. (I won't want to if I have to squeeze my eyes or zoom everytime to read things).

3. The toggle is a good option because of the above two reasons. It would be convenient to implement and doesn't suffer from any of the limitations mentioned above.

I would suggest the same classification as suggested by Dominik for category, product, quantity, etc. I would however change one thing. When collapsed, the highlight bar should not show the quantity amount (should just say QUANTITY or become empty or show total of quantity depending upon your use case of application) and should show the total amount. This is much more convenient to see as I might just want to see the total, thats what a report summary is about right?

Answer 5

For the user grouping items together makes it easier to read and understand what actually belongs together. One way to accomplish this effect would be to add a delimiters between categories (Pizzas, Beverages, Deserts) - in the image below represented by a thick black border.

Second you could also move the columns number sold and amount to the left making room for the chart, which I feel would be visible only in expanded mode. The big whitespace in your prototype makes it hard to read - since there is a long way from sub category to number sold and amount.

Third I would keep non-expanded category total numbers and total amount on the same line (see desserts) improving readability.

All together, this would make the cognitive load less than before since we grouped things together and fixed a straight line of totals in non-expanding mode.

Answer 6

There are lots of good references in this area, especially from people who are experts with information architecture, data visualization and infographic design, but this is an area that you can go into a lot of details and get drowned in the theory so I'll try to save you the hassle. However if you are interested then you should Google people like Edward Tufte and Stephen Few just to name a couple.

For me, the perfect report should allow me to make decisions, and not just stare at numbers and figures but still no clearer on what I should do next. One could argue that the visual presentation of information allows people to see and compare the information much easier, but it is also easy to mislead people when you present charts and graphs incorrectly, whereas the numbers and figures don't distort the truth because it is being presented exactly as is. So the first question you should ask yourself in the design of the report is "what are you hoping to answer"?.

Once you have decided on this, the next thing is to look at the best way of presenting the data, and then highlighting the key/relevant points. This will allow you to work out the best chart type to use. The rest is just polishing and refining the content, layout and display until you have something that is as simple and useful as possible.

To answer your questions directly: 1. Summary charts should go at the top or bottom rather than the side, where it might be associated with an individual section instead. There is no reason to make a user go to another page if they can view it on the same page. 2. Tabs are often used when you have some accompanying text, and you want to present either a table or graph view of the data so it is convenient for switching between the different views. 3. Toggles are just another way to do the same thing. I think consistency is critical for making it useful, and trying to work out the amount of detail and space you have to work with will guide you in some of the decisions anyway.

I am not sure what the problems that you have can be solved without more details. Again it goes back to what information you are trying to display. You can certainly add labels to charts and graphs to identify the data points on the chart, and you can perhaps put the summary next to the collapsible headings rather than at the end of the table so it looks okay when collapsed or expanded?