Creating a Step Chart in MVC Core Application
A Step Chart resembles a traditional Line Chart, but instead of joining two adjacent points on the chart using a straight line, the Step Chart uses step-like progression to display changes in the data.
The changes in the data are shown using horizontal and vertical steps:
- Horizontal Steps: Represent that data has been constant. If the horizontal step is long, then the data has been constant for that period.
- Vertical Steps: Represent change in the data. If the vertical step is long, this implies considerable change on data.
- Step Chart is used to visualize change in data at irregular intervals like changes in the price of a commodity.
For example: The Step Chart below shows the sales of a company for the last 10 years. Observe how easily we can analyze when the sales went up or down or remained constant.
Why Step Chart?
Traditional Line Charts are good for visualizing data and are easy to understand. They are trend-oriented and focus on the trend of the data instead of providing the exact time of change.
On the other hand, Step Chart provide the exact time of change of the data in addition to the trend. It is easy to determine where the data is constant and where the change occurs. It is also easy to see the change in the magnitude of the data.
Below are some differences between the Line chart and the Step chart. This example shows the price of Bitcoin during the month of July, 2019:
- The Line chart can display the increase and decrease in the provided data. In addition to this, the Step chart shows the exact magnitude of the change in the data.
In Figure 1 (below), it can be observed that the price of Bitcoin went down on July 20th from about $11,000 to $9,700 on July 24th. But it is difficult to find the magnitude of prices between these dates.
However, using the Step Chart in Figure 2, we can easily see the prices on the dates between the 20th and 24th of July.
The price on July 21st was about $10,500 and on July 22nd it was about $10,200. So, the change in price was about $300.
- The Line chart focus is data trends. But the Step Chart can help analyze the exact time of change of the data along with the trend.
In the Figure 3 (below), we can easily see that the price decreased from about $12,000 on July 3rd to about $11,000 on July 5th and then increases from July 5th to about $11,500 on July 7th. But it is difficult to find the price between these dates because we cannot find the changes in the date in the Line chart. On the other hand, in Figure 4, the Step chart easily displays the changes on July 4th, which was about $11,600 and on July 6th about $11,200.
- The Step chart can easily display where the data is constant. But the Line chart will not be able to display where the data remained constant. In Figure 5, it seems that the prices are gradually increasing between the dates of July 27th and July 30th, from about $9,400 to $9,500. However, as we can see in Figure 6, the prices were almost constant on July 28th and 29th, which was about $9,500.
Creating a Step Chart in MVC Core application
In the latest 2019 V3 release of ASP. NET MVC Core, we have added Step Chart. All you need to do is provide the chart-type property in the MVC Core tags.
The chart-type property takes an Enum value of C1.Web.Mvc.Chart.ChartType type. To create a Step Chart, simply set its value to Step.
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="720" valign="top">
<c1-flex-chart binding-x="Date" chart-type="Step”>
...
</c1-flex-chart></td>
</tr>
</tbody>
</table>
If you wish to show the points for the data on FlexChart itself, you can use the StepSymbols enum value. This will also show symbols on each of the FlexChart data points.
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="720" valign="top">
<c1-flex-chart binding-x="Date" chart-type="StepSymbols">
...
</c1-flex-chart>
</td>
</tr>
</tbody>
</table>
Some users may also be accustomed to the traditional Area charts. To provide them with a similar choice, FlexChart also provides a StepArea chart as well.
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="720" valign="top">
<c1-flex-chart binding-x="Date" chart-type="StepArea">
...
</c1-flex-chart></td>
</tr>
</tbody>
</table>
You can also download the sample for you reference.
