How to Create a Web Chart Report to Visualize Your Data

The main function of a web report is to make sense of data. Report authors want to help report readers to see patterns and relationships that are difficult to recognize by looking at the data itself. Using charts is a great way to achieve this goal. However, it comes with an additional challenge – there are plenty of various chart types, and it's not always immediately clear which one to choose to present your data in the most effective way possible.

For instance, ActiveReportsJS supports over ten chart types, each of which includes up to four subtypes. This article provides a guideline for deciding which chart type to use based on various characteristics of a desired outcome.

Ready to Put these Charts into Action? Download ActiveReportsJS today!

Visualization Categories

The first thing to decide is what exactly about the data a chart aims to show to a report reader. There are several main categories that you could choose from:

• Relationship- The relationship between two or more data values. For example, a chart could display the relationship between the weather conditions (such as temperature) and sales of ice cream. Looking at such a chart, a report reader could quickly realize whether there is any correlation between data values, the nature of this correlation, and so on
• Composition- The composition reveals how the parts of a whole compare to each other in size. A composition could be static or changing over a period of time. For example, a chart could display ice cream sales in California and Alaska over the course of a year
• Comparison- The comparison shows how data values compare to each other. It is similar to composition, but comparison could be applied to data values that are not parts of a whole. For example, a chart could display the average temperature for each month of the year in California and Alaska

Next, we will look at these categories in more detail and suggest specific chart types to use in various scenarios. 

Visualization of Relationship

You could use a scatter chart to visualize the relationship between two data values. For example, the following chart shows the relationship between GDP per Capita and Life Expectancy. 

It's easy to see the positive correlation between these two data values. 

A bubble plot allows displaying the relationship between three variables by using the size of a scatter plot's items to encode the third variable.

In addition, non-numeric information about data values could be encoded via the color of the items, as in the following example.

Visualization of Composition

You could use a Pie or Doughnut Chart to visualize "static" compositions, as in the following example.

However, if you want to show how the composition changes over time or how composition varies for different categories, there are a couple of factors to consider:

If there are not many periods or categories to display, then you could use a Column or Bar Chart. 

If both the relative and the absolute difference between parts of the composition matter, then a Stacked or Clustered Column or Bar Chart is suitable.

In the following example, the Stacked Column Chart shows how the composition of product categories sales varies depending on a sales channel.

If, though, only relative difference between parts of composition matters, you could use a Percentage Stacked Bar or Column chart:

If there are many periods or categories to display, then you could use a Stacked Area Chart when both absolute and relative differences matter: 

Or a Percentage Stacked Area Chart when only relative difference matters.

Visualization of Comparison

A Line plot is suitable to visualize data comparison over time and optionally across several categories. For example, the chart below shows the comparison of sales over time for two sales channels.

Other Chart Types

This article described the most frequently used chart types. ActiveReportsJS supports many more types for various visualization:

• Financial charts to visualize price movements
• Radar Lines, Areas, and Scatter as an alternative to "regular" line, area, and scatter plots described above.
• Spiral and Polar charts as an alternative to "regular" column and bar charts described in this article.

Ready to Put these Charts into Action? Download ActiveReportsJS today!