«Back
10 tips for human readable charts

Like you probably know, there are numerous types of charts to choose from in Vaadin Charts. But which one should I use in my application? Is a pie chart better than a bar chart? You have the tools, but you still need to know how to use them.

Here are a few simple guidelines you can follow:

  1. Decide what is the one primary purpose of the chart visualization. Is it a comparison with several values, a total sum, an average, a distribution or a change of quantitative variables. Pick only one and the chart type is easier to choose.

  2. Use pie charts to show parts of whole. Unless the parts don’t sum up, or you want to extensively compare parts, the pie is not the right choice and you should use for example bars or something else instead.

    People use multiple IDEs so a pie chart would not make any sense here.

    People use multiple IDEs so a pie chart would not make any sense.
     

  3. Use a line chart when you want users to find trends. When lines are used to display data, the reader can better focus on the pattern that they form.

    Response rate slows down over time.

    Response rate slows down over time.

     

  4. Bar charts are good for comparisons. Bars help people focus on the magnitudes of individual variables and allow easy comparison.

  5. Remember that it is easier for people to compare lengths than areas. This is why a bar chart still makes sense over many area-coded visualizations.

  6. Avoid vertical titles. They save space, but make it much harder to read.

  7. Use effects sparingly. Flat might be boring, but if the target is to understand the data instead of advertising it, simpler solutions are a safer choice. Avoid shadows and 3D effects unless your information is boring.

  8. Sort your data meaningfully. This is clear when using time based data, but whether you are using a pie, a bar or a line chart, order helps focus and comparison. What is the first thing you want people to read?  

    Clock wise sorting would be more intuitive.
    Clockwise sorting would be more intuitive.

  9. Combine charts side by side. Instead of using multiple series in one bar chart, put them into two bar charts next to each other and only use single labels. This is a good approach when searching causality between the series, rather than just comparing them.

  10. Use different gray levels and a single highlight color. Your palette is virtually infinite, and you can be creative, but avoid using too many colors. Two to five should be enough. Remember that not all people can see all the colors.

These only cover the most common chart types Vaadin Chart provides, but as you go further, you notice the same principles apply to more sophisticated chart types as well.

Want to know more? There is an in-depth webinar  on Vaadin Charts coming up next week. On next Thursday, Matti Tahvonen from Vaadin and Torstein Hønsi from HighSoft will explain how to use Vaadin Charts to create good-looking visualizations of data.

PS. or ‘one more thing’: We have covered PDF generation, printing and document management integration earlier. Take a look at how to fully benefit from vector-based charts.

“SamiSami Ekblad has been working at Vaadin Ltd since 2000. He has had various roles from Vaadin R&D to large-scale Java EE application development, project management and Vaadin community management. You can follow him on Twitter – @samiekblad

Comments
Concurrency and distributed systems are probably among the hardest parts of software engineering. Basic Java EE apps usually don’t need to deal with these issues that much, but increasing
We're pleased to announce the public release of Tori – the modern and sleek discussion forum for Liferay portal . We've kept Tori under the blanket while developing it and
There is a point in every enterprise web application project when the scalability of the application under development is wanted to be measured. There are several reasons for why scalability tests
Vaadin TestBench is a browser automation tool, suited for creating UI level tests for Vaadin applications. It is based on Selenium 2, which means that all features of Selenium 2/WebDriver are also
Servlet 3.0 is awesome, so is CDI . They work well and are a joy to set up. Even adding the Vaadin Navigator to the mix isn’t an issue, since you can use the CDIViewProvider to maintain the
Showing 1 - 5 of 100 results.
of 20

See all blog entries
Subscribe to this blog