DevExtreme Funnel displays data/information flow across different stages/periods. This demo displays conversion rates from website visits to product renewals.
This demo configures the following objects:
[note]
Use the DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
Our Web Dashboard is a data analysis UI component you can embed into your ASP.NET Core or Angular, React, and Vue applications with a .NET backend. DevExpress Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an auto-arranged layout.
DevExpress Dashboard allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly within the web client (includes built-in adaptive layouts for tablet & mobile devices).
DevExpress is available as part of a Universal subscription.
Get Started with DevExpress BI Dashboard | Explore Demos
[/note]
@(Html.DevExtreme().Funnel()
.ID("funnel")
.Title(t => t.Text("Website Conversions")
.Margin(m => m.Bottom(30))
)
.Export(e => e.Enabled(true))
.ArgumentField("Argument")
.ValueField("Value")
.Palette(VizPalette.SoftPastel)
.Tooltip(t => t.Enabled(true)
.Format("fixedPoint")
)
.Item(i => i.Border(b => b.Visible(true)))
.Label(l => l.Visible(true)
.Position(FunnelLabelPosition.Inside)
.BackgroundColor("none")
.CustomizeText(@<text>
function(e){
return "<span style='font-size: 28px'>"
+ e.percentText
+ "</span><br />"
+ e.item.argument;
}
</text>)
)
.DataSource(new[] {
new { Argument = "Visited the Website", Value = 9152 },
new { Argument = "Downloaded a Trial", Value = 6879 },
new { Argument = "Contacted Support", Value = 5121 },
new { Argument = "Subscribed", Value = 2224 },
new { Argument = "Renewed", Value = 1670 }
})
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult FunnelChart() {
return View();
}
}
}#funnel {
height: 440px;
}