Your search did not match any results.
Charts

Pareto Chart

In this demo, the DevExtreme Chart widget 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.
@(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 class='state-tooltip'><div id='head'>" + info.argumentText + "</div>" + "<div class='tooltip-body'><div class='series-name'>" + info.points[0].seriesName + ": </div><div class='value-text'>" + info.points[0].valueText + "</div><div class='series-name'>" + info.points[1].seriesName + ": </div><div class='value-text'>" + info.points[1].valueText + "% </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)); }); }) .CommonSeriesSettings(s => s .ArgumentField("complaint") ) .Series(s => { s.Add() .Type(SeriesType.Bar) .ValueField("count") .Axis("frequency") .Name("Complaints 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().Controller("Charts").LoadAction("getComplaintsData")) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult ParetoChart() { return View(); } [HttpGet] public ActionResult getComplaintsData(DataSourceLoadOptions loadOptions) { var data = SampleData.ParetoChartData; var totalCount = 0; var dataSource = new List<object>(); var cumulativeCount = 0; data.Sort((ParetoChartData a, ParetoChartData b) => { return b.count.CompareTo(a.count); }); data.ForEach((ParetoChartData item) => { totalCount += item.count; }); data.ForEach((ParetoChartData item) => { cumulativeCount += item.count; dataSource.Add(new { complaint = item.complaint, count = item.count, cumulativePercentage = Math.Round((double)cumulativeCount * 100 / totalCount) }); }); return Content(JsonConvert.SerializeObject(dataSource), "application/json"); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class ParetoChartData { public String complaint { get; set; } public int count { get; set; } } }
#chart { height: 440px; } .state-tooltip { height: 75px; } .state-tooltip #head { margin-bottom: 5px; font-size: 16px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #c5c5c5; } .state-tooltip .tooltip-body { width: 170px; } .state-tooltip .series-name { font-weight: normal; opacity: 0.6; display: inline-block; line-height: 1.5; padding-right: 10px; width: 126px; } .state-tooltip .value-text { display: inline-block; line-height: 1.5; width: 30px; }