When to Use StepCharts to Visualize Data

Line and Area charts are simple, powerful visualizations that represent trends in data, but they aren't the best fit for data that changes at irregular intervals with constant data segments between those changes. "Step" charts — a chart type in which data points connect in a step-like progression — are useful in these cases. With the addition of three new chart types — Step (aka StepLine), StepArea, and StepSymbols — in ComponentOne’s November 2017 release of FlexChart, you can now better visualize this kind of data with FlexChart.

In this blog, we'll talk about:

• What Are Step Charts?
• What Are Some Pitfalls of Traditional Line/Area Charts?
• How Do Step Charts Overcome These Pitfalls?
• How Do You Use Step Charts in FlexChart?

<a name="what"

What Are Step Charts?

Step charts are specialized versions of the traditional Line/Area charts types where the data points are connected via step-like progressions instead of straight lines (the shortest distance between them). These step-like progressions play a key role in interpreting the nature of data wherein:

• Horizontal lines represent periods of time where the data is constant: the longer the horizontal line, the greater the interval for which data remains constant.

• Vertical lines represent changes in data: the longer the vertical line, the greater the change in the magnitude of data.

In short, step charts are useful for visualizing data that changes intermittently but remains constant between these changes.

For example, the following chart represents how the rank of a team changes over time in a league. The team’s rank doesn’t move up or down until another match has been played in the league, and it remains constant between two match days. In this case, a Step chart is the best way to depict the team’s performance because it shows us when the team's rank changed, when its rank stayed the same, and how long it stayed the same.

<a name="pitfalls"

What Are Some Pitfalls of Traditional Line/Area Charts?

The traditional Line/Area charts are probably one of the most widely used chart types because they’re simple, easy to understand, and excellent for data presentation. However, they might not always be the ideal way to visualize your data — especially when you’re working with data that isn’t continuous in nature.

For example, let’s consider the following scenario:

The management of a manufacturing plant wants to know its performance over time. They can find this out by studying how the production capacity has changed over time. In this case, one would usually be interested to see the trends in improvement. The plant manager has kept logs of all such changes and prepared the following line chart to show the management that the plant's performance has improved over time.

If you took a quick look at the above chart, you would likely think that the plant’s production capacity has been on a steep rise since 2013. While this would make the management happy, their happiness would be based on a false impression, because the chart doesn’t reflect the actual data. A look at the log would tell us that the production capacity remained the same from 2013 until it rose in 2016.

While this would make the management happy, their happiness would be based on a false impression, because the chart doesn’t reflect the actual data. A look at the log would tell us that the production capacity remained the same from 2013 until it rose in 2016.

Why did the line chart mislead in this scenario? Line charts — as the name suggests — connect two data points with a straight line. The log had no data between 2013 and 2016, so the chart drew a straight line between them. The slope of this line gives the false impression that the production capacity has been on a steep rise since 2013.

Therefore, when we consider scenarios like this one, we realize that the traditional Line/Area charts aren’t always the best choice. While the slope of the lines can make the overall trend apparent, it can get difficult to comprehend the data when delving into specific segments of data points. The Line chart also doesn’t highlight the discrete nature of data. It doesn’t allow easy comparisons of the magnitude of the changes nor the duration between changes.

<a name="overcome"

How Do Step Charts Overcome These Pitfalls?

The step-like progressions in a Step chart overcome all the pitfalls that we talked about in the section above. Connecting data points using horizontal and vertical lines avoids the false impressions that the slope of a Line chart can give. While the horizontal line reflects the stability of data between points, the vertical line reflects the change in values. The steps clearly present the discrete nature of data being plotted. The step-like appearance indicates that the changes aren't' gradual transitions from one value to another but sudden changes at specific points in time.

Now, let’s go back to our manufacturing plant example. This time, we’ll plot the data using a Step chart and draw conclusions from that.

A quick look at this chart tells us that while the plant’s production capacity increased in 2017 from what it was in 2010, the improvement hasn’t been a gradual one, and there were sudden changes at specific points of time.

Also, the capacity remained constant on two occasions: once between 2011 and 2013 and then again between 2013 and 2016.

The capacity dropped significantly in 2013 and then rose significantly in 2016, possibly leading the management to probe further into identifying the unfavorable and favorable conditions that could’ve caused these changes.

With a quick glance at the vertical lines on 2011 and 2016, one can conclude that the magnitude of change was much larger in 2016 than in 2011. This could lead the management to identify the factors contributing to the significant growth in 2016 onwards and build on and/or try to repeat those factors.

<a name="use"

How Do You Use Step Charts in FlexChart?

Adding step charts to your application using FlexChart is quite simple. All you need to do is set the ChartType property of the chart object to one of the available Step types.

For example, this code sets the ChartType property to a Step (also called StepLine) chart:

flexChart1.ChartType = C1.Chart.ChartType.Step;

To make it easier to identify where the actual data points lie on the steps, you can set the ChartType property to StepSymbols. This will display circular or square symbols on the chart to represent the actual data points.

Here’s the code to set the ChartType property to StepSymbols:

flexChart1.ChartType = C1.Chart.ChartType.StepSymbols;

Although there’s only a subtle difference, users might use Line and Area charts interchangeably to visualize trends. To give end users similar choices when working with Step charts, FlexChart provides support for the StepArea chart as well.

An amalgamation between StepLine and the traditional Area charts, StepArea charts are primarily used to highlight differences or comparisons between series rather than their trends. For example, the following chart shows the comparisons between the numbers of promoters and detractors of an organization. A percentage rise in the numbers of promoters implies a decrease in the detractor’s share. Similarly, an increase in the detractor’s share would imply a decrease in the promoter’s share.

Here's the code to set the ChartType property to a StepArea chart that's stacked to 100 percent in FlexChart:

flexChart1.ChartType = C1.Chart.ChartType.StepArea;
flexChart1.Stacking = C1.Chart.Stacking.Stacked100pc;

In addition to specifying the Step type, you can further customize your Step charts by combining them with other chart elements like data labels, annotations, and line markers. Visit GrapeCity’s product documentation to learn more about working with these chart elements.

Conclusion

Step charts can convey a lot more information than traditional Line and Area charts. Along with overall trends in data, they also help to identify intermittent patterns, depict intervals with no change, and make it easy to compare the change in magnitudes. These added advantages make Step charts useful in a wide variety of scenarios — like tracking changes in account balances, monitoring interest rates, survival analysis, or plotting digital waveforms.

Read more about Step Charts: WinForms | WPF | UWP

Try StepCharts in ComponentOne Studio