đź“ť Write for us!
Check out our guest posting guidelines. We'd love to share your experience and opinion with our dev community. 👩‍💻👨‍💻

Download

Charts for Comparison Over Time

Choose best comparison chart

Recently we’ve talked about the basic principles of data visualization and charts for comparing discrete groups of data. Now it’s time to discover charts for one of the most common types of data analysis – a comparison over time.

Today we’ll dive into a process of choosing the comparison charts that display the data over a period of time and help to track trends in changes for one or multiple categories during that period. All of them prove to be extremely helpful in visualizing the performance with respect to time.

The choice of the comparison chart highly depends on how you treat time – as discrete or continuous data. It’s totally up to whether to use bars to focus on individual dates or lines to observe trends over a continuous interval.

So, let’s start!

Line chart

Line charts (also known as trend lines) are best for illustrating trends and volatility in the data. To draw a line chart, plot the data points on a Cartesian plane and connect them with a line. As a rule, time is plotted on the X-axis (as well as any other independent variables) while the values are plotted on the Y-axis.

Purpose

Use it to depict how the data changes over a continuous time period either inside one category or among multiple ones.

Recommendations

  • If the sum of values is important, consider using an area chart instead of a line chart.
  • Keep it neat: don’t plot more than three-four lines per chart.

Examples and variations

  • A single-line chart

Using this chart, you can compare a single metric over time.

Single line chart example

Compare the level of sales over the years
  • A multi-line chart

Works best for comparing values of multiple categories or groups to one another over time. To distinguish lines by categories and make the chart as readable as possible, plot lines of distinct colors and widths.

Multi-line chart example
  • Dual-axis line chart

It is the same as a multi-line chart but with the second Y-axis being added to it. The several usage scenarios are possible:

  • For comparing two data series with the same measure which is expressed using different magnitudes (value ranges).
  • For comparing two data series which values are expressed with different units of measurement (e.g., in degrees Celsius and Fahrenheit, in degrees and hours, etc).
Dual-axis line chart example

Column chart

Column chart consists of vertical bars the lengths of which are proportional to the values. It’s suitable not only for comparing the data between various categories but also for showing trends for the same or multiple measures over discrete time intervals.

Recommendation

If you have long data labels or/and a large number of data-series, it’s better to use a bar chart instead as it uses space more rationally.

Example

Column chart example

Comparing the company’s sales, expenses, and profit over the years

Step chart

A step chart is also known as a step graph. Its main difference from a line chart lies in a method of connecting the points. Instead of connecting the points using the shortest distance between them, it plots vertical and horizontal lines to connect the data points on a plane. Vertical lines can be interpreted as abrupt changes in time-series data.

Purpose

Use it to track the discrete changes in the data that happen at specific moments of time.

Recommendations

  • Use it with a timestamp data, or with one that has missing values for some dates.
  • To communicate the magnitude of change, fill an area under the line with color.

Example

Step chart example

Compare stock prices by days

Area chart

This chart is graphed on the X- and Y-axis, with values being connected using line segments. The area between line segments and axes is filled with color.

Purpose

Use it to accentuate on how the magnitude of the cumulative value evolves over time.

Recommendations

  • Assign contrast colors to different data series to help your audience compare values at glance.
  • When communicating trends of multiple categories, avoid overlapping plots – this representation may be misleading for your audience. Prefer using stacked area charts instead.
  • If the differences between the successive values are tiny, give preference to a line chart.

Examples and variations

  • A single-series area chart
Area chart example
Visualize the levels of sales over the years
  • A multi-series area chart
Multi-series area chart example
  • A stacked area chart
    The elements for data series are stacked at each value and are rescaled to add up to 100%. This extension of the area chart is more readable, isn’t it?
Stacked are chart example

Summary

At WebDataRocks, not only we enhance your reporting experience but share knowledge about the best modern visualization techniques.  

Hopefully, this third step of our data visualization journey helps to deepen your knowledge of the charts. We are sure that all of them deserve to take a worthy place in your presentation.

What’s next?

To keep up with all the contributions to our project, check out all the blog posts on the data visualization topic:

Numerous researches in the field of cognitive neuroscience show that your brain loves a visual content more than plain text.

(more…)

Being a web component it’s important to be easily fittable to any web project.

WebDataRocks is as customizable as it’s required by the application where it is embedded.

When you are creating your website or application, the design of the user interface comes as an important part of the developing process. (more…)

We understand your JSON data may contain different types of fields: numbers, dates, strings, time, days of the week and many others!

Setting proper data types at the very beginning is important for correct aggregation in the pivot table and successful data analysis.

Let WebDataRocks take care of handling data types in your JSON dataset. (more…)

There are no insignificant details when it comes to the design of your application. That’s why our team pays attention to every little detail and provides an opportunity to define how your reports will look and feel.

(more…)

As we appreciate the importance of personalization for you, we cannot allow the component to stand out from the general color scheme of your application. (more…)

Bring the brightness to your data

Do you want to make your web report look more interactive and appealing?

To emphasize on the visual representation of your data you are able to use any of the most popular charting libraries – Google Charts, Highcharts, FusionCharts or any third-party charting library you prefer.

(more…)

This article explains how to quickly start using WebDataRocks pivot grid in your AngularJS applications. AngularJS is an open-source front-end application framework written in JavaScript. Declarative templates with data-binding, MVC, dependency injection – these are only the most obvious reasons why we love AngularJS. Moreover, the framework is maintained by Google, which is always a quality guarantee. You can see how to get started with AngularJS on their official website.
WebDataRocks officially supports AngularJS framework.

(more…)

Good news, our JavaScript pivot grid is free and available to everyone. All you need is to download and install it into your project.

I have decided to come up with the new portion of useful tips. In the previous post, I shared the insights on how to prepare data from Excel and connect it to our demo. Today I am gonna describe which kind of JSON data is the best for our Free Web Reporting Tool.

(more…)

Hello and welcome from our WebDataRocks community!

We offer you to see your own data on the grid so you can play around with our live demo and try the functionality it provides. In our today’s blog post I am going to guide you through the process of preparing your Excel data and explain how to connect it to our demo. The process is simple and consists of a few steps:

Step 1. Clean up your data using a set of tools from Excel

Preparation of the dataset is an essential process that should precede any data analysis. Unprepared dataset often contains excessive or incomplete information which interferes with the analysis process. Before any manipulations we advise to create a backup copy of data, just to be able to revert the changes if the result is not satisfying. Follow our tips to clean up your data:

  • Use Sort & Filter to locate duplicates, apply naming conventions, find blank or incomplete records
  • Try one of the lookup and reference functions to add the columns with necessary details to your dataset
  • Format cells with phone numbers, zip codes, etc. to make sure they look the same way
  • Use Find and Replace feature to remove the unnecessary characters such as dashes of empty spaces

Step 2. Export the data from Excel

In this step, we are going to save the data we were preparing in the previous step. CSV format is considered to be really convenient for data analysis. Save data in this format by choosing Save As -> CSV UTF-8. To display your data correctly WebDataRocks requires the content to be encoded as UTF-8.

Step 3. Connect your dataset to WebDataRocks

Now it is time to display your data on the grid. Please open our demo, choose Connect -> To local CSV and select the CSV file generated in the previous step. Hooray! Your data from Excel is displayed in our demo. You do not have to worry about the security of your data as WebDataRocks is a client-side tool and we never store your data on our side.

Thank you for attention. Want to add WebDataRocks to your website? Just go to a Download section and choose one of the options that suits you best.

Stay tuned, in the upcoming posts, we will share some hints about JSON data preparation and the best ways to use our demo.