Resizing a Chart

Question

A system that I'm working on has a pane with a chart displayed under a table. The user can choose to resize the pane to see more of the table. However, when this happens, the chart gets squeezed including titles, legends, etc. (See image below).

• Would you display the chart upfront?
• Would you resize the chart while resizing the pane that holds it, or would you create a pop up screen with the chart?
• What other controls would you add make the experience of displaying the chart, better? I'm thinking about a "Full screen button" or "Export chart". It currently has none.

Answer 1

It sounds to me like your chart may need different ways of ordering and presenting it's data and surrounding elements based on the dimentions of the chart area. For example, in your compressed view, why do you keep the legend under the chart? You would already gain quite a bit of usefulness if you move the legend to the side of the actual chart if vertical space is constrained. You also have room for improvement with regards to the header of the chart. It currently takes two lines. If you don't have the vertical space for that, either re-size the font so it fits on a single line, break off the title of the chart, or hide the title completely (or more than one of these, depending on the size of the area).

The same holds for each element of the chart: the axis, the labels, the 3D presentation of the data... You can dynamically adapt them or even hide them based on how much space you have for the chart, to optimize its usefulness at every size. You should recognize that an unreadable chart (like the one you show) is useless.

Answer 2

Based on the images you have displayed and the issue you are having, I would suggest showing the charts upfront to the user "if" your users are expected to have a level of knowledge, that the charts would make self on its own. If the your users, might not understand the overall concept of the chart, show the data upfront instead. I would then remove the squashed image issue by separating the chart on its own tab and the data on another.

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

For some of your users that might want to see the chart next to the data, the addition of a popup chart might be a nice feature to have. Other features that your users might enjoy include:

• export charts and date into acceptable image/spreadsheet file type.
• export data and chart directly to a PDF document
• share a report via email attachment
• scheduler to automatically send emails with exported data as an attachment
• simpler alert system to inform user when a particular report is ready
• ability to create and save custom reports

Without knowing the full extent of the platform your are developing on top of and the projects deadline; I have only listed a few features I have found useful from other various programs.

Answer 3

If you don't mind changing the position and visibility of some elements, you could also imagine the problem as if it were a 'responsive web design'. This is, make the chart space look different depending on the size of the area you are working in.

For example, starting from a default view like the one in the left. Once the height of the area reaches, say, 200px, you keep the height for the chart but move the title to the left of it. At 150px maybe you can lose the legend. And when it reaches 100px, you change the chart for an icon / links. As for these links, I would definitely have an Export or

Save As

and a

Preview

(for me it sounds better than Full Screen, less invasive). The rest would depend on your functionality.

Answer 4

Qualtrics allows for resizing charts, re-rendering the resulting image when the resize is completed.

If a chart is necessary to address a primary need of your users, I'd keep some version of it in view and offer an "expand" button to pop out the chart. Exporting doesn't sound like an awful idea, but if you're exporting to, let's say, PDF, and users abhor the splash screen and loading process of Acrobat Reader, you may end up creating more problems than you solve as people are whisked out of your app and into another you can't control.