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?:
- Use another page, and have some kind of link to navigate to it?.
- Separate the page into two 'tabs', one for the table and the other for the chart.
- 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:
- The data has no identification, mean name, quantity and value labels;
- 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.
What are some good practices for designing chart/report pages? How do I cope the two together, while solving the pointed issues?
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