Converting a FlexChart into a Waterfall Chart in JavaScript

Background:

FlexChart is typically a bar chart, but can be converted into a waterfall chart to display the increases and decreases between sections of the chart.

Steps to Complete:

1. Assign a method to the itemFormatter property of FlexChart

2. Check that the chart is rendering one of the bars that displays data

3. Get the min and max values of the bar being rendered

4. If the value of the item forecastSeries is greater than 0, display a blue bar; if its less than 0, display a red bar

Getting Started

Assign a method to the itemFormatter property of FlexChart

The itemFormatter property will run the method that is tied to it when the control is rendering members of the control. The function will have 3 parameters; one for rendering the engine, one that describes the item being rendered, and a function that provides the default rendering format.

chart.itemFormatter = function(engine, hitTestInfo, defaultFormat){}

Check that the chart is rendering one of the bars that displays data

Next, we'll use the hitTestInfo argument to check and see if the chart is rendering one of the bars that represents a data value. We check to see if the chart element is a series symbol, and if it is, we then check to see if the name of the item is equal to the legend name. If it is, we know that we're rendering the data bars of the chart.

if(hitTestInfo.chartElement == wijmo.chart.ChartElement.SeriesSymbol) {
    var item = hitTestInfo.item;
    if(hitTestInfo.name === legend) {}
}

Get the min and max calues of the bar being rendered

In order to properly draw the bar, we'll need to know where to draw the bar being rendered in the chart. This is done by using the dataToPoint method of the chart object.

var ptmaxForecast = chart.dataToPoint(item.x - shift, item.forecast.max);
var ptminForecast = chart.dataToPoint(item.x - shift, item.forecast.min);

If the value of item.forecastSeries is greater than 0, display a blue bar; if its less than 0, display a red bar

Finally, we'll check if the item.forecastSeries value is greater or less than 0, and that will determine the color of the bar that the chart renders at that location.

if(item.forecastSeries > 0) {
    engine.drawLine(ptmaxForecast.x, ptmaxForecast.y, ptminForecast.x, ptminForecast.y, null, {
        stroke: 'blue',
        strikeWidth: 20
    });
} else {
    engine.drawLine(ptmaxForecast.x, ptmaxForecast.y, ptminForecast.x, ptminForecast.y, null, {
        stroke: 'red',
        strikeWidth: 20
    });
}

You can find a live sample of this project at this location: http://jsfiddle.net/JParksGC/5upk2tco/