Your search did not match any results.

Charts - Pareto Chart

In this demo, the DevExtreme Chart component is used to create a Pareto chart. This example of a Pareto chart summarizes complaints about the service provided by a pizza shop. From this chart, the pizza shop owner may infer that to satisfy most of the customers, he or she needs to eliminate two most frequently encountered issues: delayed delivery and cold pizza.

Backend API
@(Html.DevExtreme().Chart() .ID("chart") .Palette(VizPalette.HarmonyLight) .Title("Pizza Shop Complaints") .ArgumentAxis(a => a .Label(l => l .OverlappingBehavior(OverlappingBehavior.Stagger) ) ) .Tooltip(t => t .Enabled(true) .Shared(true) .CustomizeTooltip( @<text> function(info) { return { html: "<div><div class='tooltip-header'>" + info.argumentText + "</div>" + "<div class='tooltip-body'><div class='series-name'>" + "<span class='top-series-name'>" + info.points[0].seriesName + "</span>" + ": </div><div class='value-text'>" + "<span class='top-series-value'>" + info.points[0].valueText + "</span>" + "</div><div class='series-name'>" + "<span class='bottom-series-name'>" + info.points[1].seriesName + "</span>" + ": </div><div class='value-text'>" + "<span class='bottom-series-value'>" + info.points[1].valueText + "</span>" + "% </div></div></div>" }; } </text>) ) .ValueAxis(a => { a.Add() .Name("frequency") .Position(Position.Left) .TickInterval(300); a.Add() .Name("percentage") .Position(Position.Right) .ShowZero(true) .Label(l => l .CustomizeText( @<text> function(info) { return info.valueText + "%"; } </text>) ) .ConstantLines(c => { c.Add() .Value(80) .Color("#fc3535") .DashStyle(DashStyle.Dash) .Width(2) .Label(l => l.Visible(false)); }) .TickInterval(20) .ValueMarginsEnabled(false); }) .CommonSeriesSettings(s => s .ArgumentField("complaint") ) .Series(s => { s.Add() .Type(SeriesType.Bar) .ValueField("count") .Axis("frequency") .Name("Complaint frequency") .Color("#fac29a"); s.Add() .Type(SeriesType.Spline) .ValueField("cumulativePercentage") .Axis("percentage") .Name("Cumulative percentage") .Color("#6b71c3"); }) .Legend(l => l .VerticalAlignment(VerticalEdge.Top) .HorizontalAlignment(HorizontalAlignment.Center) ) .DataSource(d => d.Mvc().LoadAction("GetComplaintsData")) )
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 ParetoChart() { return View(); } public ActionResult Overview() { return View(); } [HttpGet] public ActionResult GetComplaintsData(DataSourceLoadOptions loadOptions) { var dataSource = new List<object>(); var sortedParetoData = SampleData.ParetoChartData.OrderByDescending(i => i.count); var totalCount = sortedParetoData.Sum(i => i.count); var cumulativeCount = 0; foreach(var item in sortedParetoData) { cumulativeCount += item.count; dataSource.Add(new { item.complaint, item.count, cumulativePercentage = Math.Round((double)cumulativeCount * 100 / totalCount) }); } return Content(JsonSerializer.Serialize(dataSource), "application/json"); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class ParetoChartData { public String complaint { get; set; } public int count { get; set; } } }
#chart { height: 440px; } .tooltip-header { margin-bottom: 5px; font-size: 16px; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid #c5c5c5; } .tooltip-body { width: 170px; } .tooltip-body .series-name { font-weight: normal; opacity: 0.6; display: inline-block; line-height: 1.5; padding-right: 10px; width: 126px; } .tooltip-body .value-text { display: inline-block; line-height: 1.5; width: 30px; }