Display Top N Categories

[Jim Collier]

I have a bar chart (see attached), that I would like to display only the top 10 categories in order by alarm count.  I cannot see a way to only display top N number of categories. This this possible with the bar chart? 

Here is the code.

             

01.@(Html.Kendo().Chart<Swisslog.DC.Entities.AlarmActivity>()
02.    .Name("alarmsTop10Last30")
03.    .Title(title => title.Text("TOP 10 ALARMS THE LAST 7 DAYS").Font("bold 30px Arial,Helvetica,sans-serif").Color("#808080").Align(ChartTextAlignment.Left))
04.    .Legend(legend => legend
05.        .Visible(false)
06.        .Position(ChartLegendPosition.Top)
07.        .Font("bold 18px Arial,Helvetica,sans-serif").Color("#808080")
08.    )
09.    .AutoBind(true)
10.    .DataSource(ds => ds
11.        .Read(read => read.Action("AlarmsKPIHistory", "Home"))
12.        .Group(group => group.Add(model => model.AlarmCode))
13.    //.Aggregates(agg => agg.Add(model => model.AlarmID).Count())
14.    //.Sort(sort => sort.Add(model => model.AlarmCode).Ascending())
15.    //.PageSize(10)
16.    )
17.    .Series(series =>
18.    {
19.        //series.Bar(model => model.AlarmID).Name("Alarm Description").Aggregate(ChartSeriesAggregate.Count).Color("#ED7D31");
20.        //series.Bar(model => model.AlarmID).Name("#= group.value #").Aggregate(ChartSeriesAggregate.Count).Color("#ED7D31").Stack("AlarmDescription");
21.        //series.Bar(model => model).Name("").Aggregate(ChartSeriesAggregate.Count).Color("#ED7D31");
22.        series.Bar(model => model.AlarmID).Name("1").Aggregate(ChartSeriesAggregate.Count).CategoryField("AlarmDescription");
23.    })
24.    .CategoryAxis(axis =>
25.    {
26.        //.Categories(model => model.AlarmDateTime)
27.        //.Title(title => title.Text("Date").Font("bold 18px Arial,Helvetica,sans-serif").Color("#000000"))
28.        axis.Labels(labels => labels.Rotation(0).Font("bold 18px Arial,Helvetica,sans-serif").Color("#808080"));
29.        axis.MajorGridLines(lines => lines.Visible(false));
30.        axis.Axis.BaseUnit = ChartAxisBaseUnit.Fit;
31.        axis.Axis.MaxDateGroups = 5;
32.        axis.Axis.Type = ChartCategoryAxisType.Category;
33.    })
34.    .ValueAxis(axis => axis
35.        .Numeric()
36.        .Labels(labels => labels.Format("{0:N0}").Font("bold 18px Arial,Helvetica,sans-serif").Color("#808080"))
37.        .Title(title => title.Text("Alarm Count").Font("bold 18px Arial,Helvetica,sans-serif").Color("#000000"))
38.        .Max(100)
39.        .MajorUnit(10)
40.        .MajorGridLines(major => major.Visible(true))
41.        .Line(line => line.Visible(false))
42.    )
43.    .Tooltip(tooltip => tooltip
44.        .Visible(true)
45.        .Format("{0:N0}")
46.    )
47.    .Events(events => events
48.        .DataBound("onDataBound_alarmsResponds1")
49.    )
50.)

 

 

 

[Iliana Dyankova]

Hi Jim,

This scenario is not supported out-of-the-box by Kendo UI Chart. As a workaround I would suggest filtering the dataSource. As an example:

.DataSource(ds => ds
   .Read(read => read.Action("AlarmsKPIHistory", "Home"))
   .Group(group => group.Add(model => model.AlarmCode))
   .Filter(filter => filter.Add(model => model.AlarmID).IsGreaterThan(30))
)

Regards,
Iliana Nikolova
Telerik