Create a Custom StepChart with FlexChart’s itemFormatter

July 22 2016

Wijmo 5 FlexChart offers many advanced features and several Chart Types that are standard in visualization tools. You can also manipulate the FlexChart’s appearance to mimic a different Chart Type. In this example, we'll walk through how to create a Step Chart, which is a contiguous line chart that consists of horizontal and vertical lines like the image below.

Basic StepChart example

At the moment, Step Chart is not an out-of-the-box feature available with FlexChart, but the appearance can still be achieved. We will use a Scatter Chart Type to do this:

Wijmo's out-of-the-box Scatter Chart

In order to achieve a Step Chart appearance from the "Scatter" Chart Type, we'll need to manipulate the format using a property of the FlexChart called itemFormatter.

Using itemFormatter to Customize Scatter Chart

The itemFormatter property allows you to customize the appearance of the chart when the grid is rendered by setting this property to a function.

In this example, we'll create a function with three parameters:

IRenderEngine object is responsible for drawing pixels on the screen, so we'll need this to draw the vertical and horizontal lines.
HitTestInfo class provides information about the FlexChart coordinates like the series of data points and the respective pixel coordinates.
A callback function will add the default format to the FlexChart. In our example, we're using a Scatter Chart Type, so this function will populate the FlexChart control with the Scatter elements at each data point (refer to image below). If we omit this function, the Scatter elements will not appear.

These parameters are sufficient for us to manipulate the grid in any way we like.

The Basic Concept: Draw Lines Between Data Points

To accomplish the StepChart appearance we simply need to draw horizontal and vertical lines to the current data point and the previous data point. We'll use the Point class, which represents a data coordinate in the FlexChart. (I'll refer to the points on the FlexChart as data points.)

The first thing to do in our function is get the data about the series and the current data point to be rendered to the chart.
Next, we need to get the previous data point, so we can draw a line to it. If we're looking at the first data point, we can skip this step because there's no previous item to point at.
The last point we need is where the two lines connect, which we'll call the meeting point. The meeting point is the current data point’s X-Coordinate and the previous data point’s Y-Coordinate.

Now we can use the IRenderEngine object to draw our lines. The vertical line will be drawn from the current data point to the meeting data point. The horizontal line will be drawn from the meeting data point to the previous data point.

Here's an example of the implementation:

chart.itemFormatter = function (engine, hitTestInfo, defaultFormat) {  
         if (hitTestInfo.chartElement == wijmo.chart.ChartElement.SeriesSymbol) {  
             var item = hitTestInfo.item;  
var series = hitTestInfo.series;  
var pi = hitTestInfo.pointIndex;  

             if( pi > 0) {  
var xvals = series.getValues(1);  
// previous data point  
                 var prevX = xvals ? xvals[pi - 1] : pi - 1;  
var prevY = series.getValues(0)[pi - 1];  
// convert to pixel coordinates  
                 var pt1 = chart.dataToPoint( item.x, prevY);  
                 var pt2 = chart.dataToPoint( prevX, prevY);  
// draw lines  
                 engine.drawLine( hitTestInfo.point.x, hitTestInfo.point.y, pt1.x, pt1.y);    
                 engine.drawLine( pt1.x, pt1.y, pt2.x, pt2.y);    
             }  
            // draw default symbol  
            defaultFormat();  
            }  
        };

Your new FlexChart should look something like this:

A custom StepChart with data points

Conclusion

The beauty of the itemFormatter property is it doesn’t harm the performance of the application. It's a base functionality of FlexChart that exists to allow easy customization of the appearance.

In the near future, StepChart will be available as a Chart Type, so creating StepCharts will be even easier. In addition, keep your eye out for other featured Chart Types,including Error Bar Chart, Histogram, Waterfall, and Sunburst.