New Funnel Chart Widget (Coming soon in v17.2)

A Funnel Chart is a type of chart often used to visualize a value at different stages of a process and to assess value changes throughout those stages. Funnels are useful to identify potential issues in processes.

A typical funnel report represents stages of a process in the form of upturned trapezoids. The longer and shorter bases of the trapezoids represent the value at the start and end the given stage, respectively. Although the funnel chart is named after the household funnel, the resemblance is superficial. Unlike a real funnel, not everything that is “poured in” at the top of a funnel chart flows through to the bottom.

An Example Use Case

For this post, we focus on using a funnel chart to analyze a conversion rate and identify bottlenecks. This type of report is usually called Conversion Funnel or Sales Funnel.

The conversion rate is one of the most important aspects of paid inclusion campaigns. The conversion rate of a website, for example, can show what percentage of all visitors performed a desired action: bought a product, filled out a form, etc. The bigger the conversion rate, the more successful is the website and a related paid inclusion campaign.

One way of raising the conversion rate is getting rid of bottlenecks. A bottleneck is one process in a chain of processes whose limited throughput reduces the throughput of the entire chain. Simply put, it’s a point where the measured value drops by the largest margin. We created a sample funnel chart to illustrate the concepts of conversion rate and bottleneck. We used the jQuery Funnel widget, a data visualization component new to DevExtreme in the upcoming v.17.2 release. Note that as usual the component is also available as an Angular Component, ASP.NET MVC and ASP.NET Core MVC Controls and a Knockout binding.

As you can see, 18% of the website visitors renewed their subscriptions, so this is the conversion rate of the website. But most of the visitors decided not to subscribe after contacting support. This bottleneck is made obvious by the funnel chart, and it might be possible to improve things, for example, by providing some extra training for the support team.

Why a New Widget?

DevExtreme subscribers are familiar with our impressive library of data visualization components. Specifically, there is the feature-rich Chart widget with its many series types. We considered implementing the Funnel chart as a new series type for the Chart widget, but we decided to introduce it as a separate component, because the Cartesian XY coordinate system used by the Chart is not a good fit for the Funnel.

However, Funnel and Chart share many visual elements like the legend, the title, tooltips and color schemes, and most importantly they share the simplicity of configuration. For example, the following code is sufficient to create a Funnel with default styling:

$("#funnel").dxFunnel({ 
  dataSource: [ 
    { argument: "Visited the Website", value: 9152 }, 
    { argument: "Downloaded a Trial", value: 6879 }, 
    { argument: "Contacted Support", value: 5121 }, 
    { argument: "Subscribed", value: 2224 }, 
    { argument: "Renewed", value: 1670 } 
  ], 
  title: "Website Conversions", 
  argumentField: "argument", 
  valueField: "value" 
});

Try It Now!

The Funnel widget is included in the v17.2 pre-release that is available via npm right now. Please note that this pre-release may contain some bugs and is not intended to be used in production.

npm install devextreme@17.2.1-pre-17262

We will provide full documentation when v17.2 is released, meanwhile you can learn more about Funnel configuration from this PR on GitHub.

If you have thoughts about this new DevExtreme widget, please share them with us!

Free DevExpress Products - Get Your Copy Today