5 Ways to Enhance Data Visualization in Reports using Charts (in .NET and JavaScript)

Effective reporting is about visualizing data to extract insights and actionable information. Chart utilization offers a visual representation of numerical data that allows end-users to compare, analyze, and understand quantitative data.

ActiveReports charts are loaded with features to help you create the best representation of your data. In this blog, we discuss 5 easy ways to improve data visualization in your reports through chart design.

Sort Chart Values in .NET and JavaScript Reports

For Column and Bar charts, displaying data in random order makes it difficult to read. For example, it is hard to identify the outliers in the below chart showing weekly sales for a chain of stores.

However, if we reorder the data to display from largest to smallest, it is much easier to read and analyze:

For Column charts, your largest values should be on the left. And for Bar charts, the largest values would be on the top. This is because we read charts the same way we read English: left to right and top to bottom.

How to do it:

With the chart’s Plot area selected, set the “Category Sort Direction” property to “Descending” for Column charts and “Ascending” for Bar charts:

Swap Axes in .NET or JavaScript Charts

Continuing with the previous example, notice that because the X axis labels are too long to be displayed horizontally, they are shown at a 90-degree angle:

We can enhance the readability of this chart by swapping X and Y axes. In other words, convert the Column chart into a Bar chart:

How to do it:

In the web-based ad hoc report designer, select the chart control and go to the “Chart” menu at the top of the designer. From the “Set Plot Template” drop down, select “Bar” chart.

Display Multiple Axes on the Chart

Displaying multiple series on a chart is a great way of showing relationships within data. However, when there is a big difference between the values of each series, it quickly loses its purpose. For example, in the chart below, series 1 has values in the 10 – 20 thousands, while series 2 has values 100s to 1000s. Combining them on one axis gives very little information:

An easy resolution for this is to use multiple Y axes, one for each series. This way, the relationship between both data series becomes abundantly clear:

One thing to keep in mind when creating composite charts, or charts with multiple axes, is to include a title for each axis. It is extremely difficult to read a chart without knowing what the 1100 represent. There are exceptions like having a simple chart with a legend. Here, I can understand that each number on the right Y axis represents number of items sold by the store and the left Y axis represents the sales totals for that store.

How to do it:

With the chart selected in our web-based designer, we will add a second plot to our existing chart:

Clicking on the arrows to the right will take us to the properties for this plot. In the “Plot2” properties, we’ll add a “Value” using the gears on the right:

Once we’ve added the second series to Plot2, under “Encoding” we’ll add a “Category” Value as well:

Finally, with the X-axis selected, we’ll assign this as the common X-axis to both Plot1 and Plot2:

Clean-up Chart Grid Lines

When presenting data, you want to give full focus to your chart’s data points and eliminate other distractions. This means using primary colors for focus and secondary, lighter, colors for guidance and structure. In charts, that means grid lines.

Continuing from where we left off, there are a lot of features we can use to make this chart look clean and modern.

We can do a few things like remove the Major Grid lines, lighten the X axis line, remove the Y axes title, and add a legend to get something much cleaner:

How to do it:

To remove the Major Grid lines, select the first Y axis and set the “Show Grid Lines” property under Major Grid to “False”:

To lighten the X axis line, in the Properties panel of the X axis, under “Line” set the color to something like “Silver”.

Axes titles can be easily removed by selecting them and clearing out the “Title” field in the Properties panel. To show the legend, select each plot and under “Encodings” set the “Show Values Names in Legend” property to “True”.

Options to Drill-through Chart Data

Charts are meant to give a summary view of data. In cases where we need to show more details, we can use the Drill Through feature of ActiveReports charts. Drill through allows users to click on a data point and show more details about that particular point. In our example, we can use drill through to show a detailed report of items sold when the user clicks on a column:

How to do it:

In the web based ad hoc report designer, select the plot(s) you want to use for drill through. Under “Action” in the Properties window set the “Type” to “Jump to Report” and then select the report you want to load when the user clicks the data point. You can pass a parameter to the drill through report to filter the content based on the data point clicked.