Box and Whisker in ASP.NET CORE Charts Component
17 Apr 202318 minutes to read
Box and whisker
To render a box and whisker chart, use seriesType as BoxAndWhisker. The field y requires n number of data or it should contains minimum of five values to plot a segment.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Department"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.BoxAndWhisker">
<e-series-marker visible="true" height="10" width="10"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };
List<BoxAndWhiskerChartData> chartData = new List<BoxAndWhiskerChartData>
{
new BoxAndWhiskerChartData { xValue = "Development", yValue = y1 },
new BoxAndWhiskerChartData { xValue = "Testing", yValue = y2},
new BoxAndWhiskerChartData { xValue = "HR", yValue = y3 },
new BoxAndWhiskerChartData { xValue = "Finance", yValue = y4 },
new BoxAndWhiskerChartData { xValue = "R&D", yValue = y5 },
new BoxAndWhiskerChartData { xValue = "Sales", yValue = y6 },
new BoxAndWhiskerChartData { xValue = "Inventory", yValue = y7 },
new BoxAndWhiskerChartData { xValue = "Graphics", yValue = y8 },
new BoxAndWhiskerChartData { xValue = "Training", yValue = y9 },
};
ViewBag.dataSource = chartData;
return View();
}
public class BoxAndWhiskerChartData
{
public string xValue;
public double[] yValue;
}Box Plot
You can change the rendering mode of the Box and Whisker series using the BoxPlotMode property. The default boxPlotMode is Exclusive.The other boxPlotMode available are Inclusive and Normal.
To render a box and whisker chart, use seriesType as BoxAndWhisker. The field y requires n number of data or it should contains minimum of five values to plot a segment.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Department"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.BoxAndWhisker" boxPlotMode="Normal">
<e-series-marker visible="true" height="10" width="10"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };
List<BoxAndWhiskerChartData> chartData = new List<BoxAndWhiskerChartData>
{
new BoxAndWhiskerChartData { xValue = "Development", yValue = y1 },
new BoxAndWhiskerChartData { xValue = "Testing", yValue = y2},
new BoxAndWhiskerChartData { xValue = "HR", yValue = y3 },
new BoxAndWhiskerChartData { xValue = "Finance", yValue = y4 },
new BoxAndWhiskerChartData { xValue = "R&D", yValue = y5 },
new BoxAndWhiskerChartData { xValue = "Sales", yValue = y6 },
new BoxAndWhiskerChartData { xValue = "Inventory", yValue = y7 },
new BoxAndWhiskerChartData { xValue = "Graphics", yValue = y8 },
new BoxAndWhiskerChartData { xValue = "Training", yValue = y9 },
};
ViewBag.dataSource = chartData;
return View();
}
public class BoxAndWhiskerChartData
{
public string xValue;
public double[] yValue;
}Show mean
In Box and Whisker series ShowMean property is used to show the box and whisker average value. The default value of ShowMean is false.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Department"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.BoxAndWhisker" showMean="false">
<e-series-marker visible="true" height="10" width="10"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };
List<BoxAndWhiskerChartData> chartData = new List<BoxAndWhiskerChartData>
{
new BoxAndWhiskerChartData { xValue = "Development", yValue = y1 },
new BoxAndWhiskerChartData { xValue = "Testing", yValue = y2},
new BoxAndWhiskerChartData { xValue = "HR", yValue = y3 },
new BoxAndWhiskerChartData { xValue = "Finance", yValue = y4 },
new BoxAndWhiskerChartData { xValue = "R&D", yValue = y5 },
new BoxAndWhiskerChartData { xValue = "Sales", yValue = y6 },
new BoxAndWhiskerChartData { xValue = "Inventory", yValue = y7 },
new BoxAndWhiskerChartData { xValue = "Graphics", yValue = y8 },
new BoxAndWhiskerChartData { xValue = "Training", yValue = y9 },
};
ViewBag.dataSource = chartData;
return View();
}
public class BoxAndWhiskerChartData
{
public string xValue;
public double[] yValue;
}