Grouping in ASP.NET CORE Accumulation Chart Component
4 Jun 202413 minutes to read
You can club or group few points of the series based on groupTo
property. For example, if the club value is 11, then the points with value less than 11 is grouped together and will be showed as a single point with label others
. The property also takes value in percentage (percentage of total data points value).
@{
List<GroupingChartData> chartData = new List<GroupingChartData>
{
new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" },
new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" },
new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" },
new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" },
new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" },
new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" },
new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" },
new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" },
new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" },
new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" },
new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" },
new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" },
new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" },
new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" }
};
}
<ejs-accumulationchart id="container" title="RIO Olympics Gold" enableSmartLabels="true">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="RIO" groupTo="10">
<e-accumulationseries-datalabel name="text" visible="true" position="Outside">
<e-connectorstyle type="Line" length="5%"></e-connectorstyle>
<e-font size="14px"></e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class GroupingChartData
{
public string xValue;
public double yValue;
public string text;
}
Pie Grouping
Broken Slice
You can visualize all points available in club or group points by clicking on the grouped point. For example, if 5 points are grouped together it will be showed as a single slice with label others
. If the others
slice is clicked, it will explode and break into 5 seperate slices.
@{
List<GroupingChartData> chartData = new List<GroupingChartData>
{
new GroupingChartData { xValue = "China",yValue = 26, text = "China: 26" },
new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" },
new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" },
new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" },
new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" },
new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" },
new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" },
new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" },
new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" },
new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" },
new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" },
new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" },
new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" },
new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" }
};
}
<ejs-accumulationchart id="container" title="RIO Olympics Gold" enableAnimation="true" enableSmartLabels="true">
<e-accumulation-series-collection>
<e-accumulation-series explode="true" dataSource="chartData" xName="xValue" yName="yValue" name="RIO" groupTo="9" groupMode="Point">
<e-accumulationseries-datalabel visible="true" position="Outside">
<e-connectorstyle type="Line" length="5%"></e-connectorstyle>
<e-font size="14px"></e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class GroupingChartData
{
public string xValue;
public double yValue;
public string text;
}
Group Mode
Slice can also be grouped based on the number of points by specifying the groupMode
to Point. For example, if the group to value is 11, accumulation chart will show 1st 11 points and will group remaining entries in the collection as a single point.
@{
List<GroupingChartData> chartData = new List<GroupingChartData>
{
new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" },
new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" },
new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" },
new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" },
new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" },
new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" },
new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" },
new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" },
new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" },
new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" },
new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" },
new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" },
new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" },
new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" }
};
}
<ejs-accumulationchart id="container" title="RIO Olympics Gold" enableAnimation="true" enableSmartLabels="true">
<e-accumulation-series-collection>
<e-accumulation-series explode="true" dataSource="chartData" xName="xValue" yName="yValue" name="RIO" groupTo="3" groupMode="Point">
<e-accumulationseries-datalabel visible="true" position="Outside">
<e-connectorstyle type="Line" length="5%"></e-connectorstyle>
<e-font size="14px"></e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
...
public class GroupingChartData
{
public string xValue;
public double yValue;
public string text;
}
Customization
You can customize the grouped point and its data label using pointRender
and textRender
event.
@{
List<GroupingChartData> chartData = new List<GroupingChartData>
{
new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" },
new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" },
new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" },
new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" },
new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" },
new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" },
new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" },
new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" },
new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" },
new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" },
new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" },
new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" },
new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" },
new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" }
};
}
<ejs-accumulationchart id="container" title="RIO Olympics Gold" enableSmartLabels="true" pointRender="pointRender"
textRender="textRender">
<e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="RIO" groupTo="10">
<e-accumulationseries-datalabel name="text" visible="true" position="Outside">
<e-connectorstyle type="Line" length="5%"></e-connectorstyle>
<e-font size="14px"></e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<script>
var pointRender = function (args) {
if ((args.point.x).indexOf('Others') > -1) {
args.fill = '#D3D3D3';
}
}
var textRender = function (args) {
if (args.text.indexOf('Others') > -1) {
args.text = 'Grouped Slices';
args.color = 'red';
args.border.width = 1;
}
}
</script>
...
public class GroupingChartData
{
public string xValue;
public double yValue;
public string text;
}