Grouping but without creating columns

[Shawn]

I am not sure how to word this, so I'll describe what I would like to do and hopefully someone can lead me in the right direction.

I have a list of Top Sellers for a shop.  These top sellers are categorized by department types (i.e. Fuel, Shop, etc.).  When displayed in a bar chart without the grouping, the Fuel group rather skews the results on the chart as seen in the screenshot (topsellers.png).  All bars are the same color and there is no legend.

What I would like to do is to is have the chart appear like the screenshot, but with the fuel group having its own color and the shop having its own color.  The legend should appear at the top and clicking on the legend will hide/show the associated items in the chart.  When I added the Group to the kendo bar chart, I got the colors and the legend, but the groups overlap in the chart creating two columns as shown in the second screenshot (topsellergroup.png) and the shop entries lost their descriptions.  So I'd like the grouped items to show up in the chart along with their descriptive text (as in the first screenshot), but with the colors and legend of the second screenshot.

Here is my current chart code.  I am setting the group to the DeptType value (i.e. Fuel, Shop) and the series based on the Quantity.

<div class="panel panel-default">
    <div class="demo-section k-content wide">
        @(Html.Kendo().Chart<CBECloudBO2.ViewModels.ChartTopSellers>()
                .Name("chartTopSellers")
                .Title("Top Sellers by Quantity")
                .DataSource(datasource => datasource
                    .Read(read => read.Action("Chart_TopSellers", "Home"))
                    .Group(group => group.Add(model => model.DeptType))
                    .Sort(sort => sort.Add(model => model.Quantity).Descending())
                    )

                .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Top))
                .ChartArea(chartArea => chartArea
                    .Background("transparent"))

                .Series(series =>
                {
                    series.Bar(d => d.Quantity).Name("");
                })

                .CategoryAxis(axis => axis
                    .Categories(d => d.PLUDesc).Visible(true)
                    .Title("Product")
                    .MajorGridLines(lines => lines.Visible(false)))

                .ValueAxis(axis => axis
                    .Numeric()
                    .Title("Quantity Total")
                    .Line(line => line.Visible(false))
                    .MajorGridLines(lines => lines.Visible(true)))

                .Tooltip(tooltip => tooltip
                    .Visible(true)
                    .Template("#= category #: #= value #"))
        )
    </div>
</div>

 

Is it possible to group items, but not have the chart create the group columns next to each other?  I tried adding the .CategoryField to the series and supplying the item description, but this only listed the fuel items and not the shop items.

Thank you for any help.

Regards,

Shawn

[Shawn]

Below is the data being supplied to the chart.

[
{"PluId":"0290270000002","OperTillId":0,"Quantity":7509.9400,"Value":9377.9500,"PluDesc":"DIESEL","DeptType":"Fuel"},
{"PluId":"0290290000006","OperTillId":0,"Quantity":1891.3200,"Value":2588.3900,"PluDesc":"UNLEADED","DeptType":"Fuel"},
{"PluId":"0000000002807","OperTillId":0,"Quantity":208.0000,"Value":453.2000,"PluDesc":"REG COFFEE","DeptType":"Shop"},
{"PluId":"5011054104205","OperTillId":0,"Quantity":22.0000,"Value":248.6000,"PluDesc":"BENSON & HEDGES","DeptType":"Shop"},
{"PluId":"0000000002811","OperTillId":0,"Quantity":76.0000,"Value":197.6000,"PluDesc":"LGE COFFEE","DeptType":"Shop"},
{"PluId":"0000000002808","OperTillId":0,"Quantity":99.0000,"Value":196.0000,"PluDesc":"REG TEA","DeptType":"Shop"},
{"PluId":"0200280000008","OperTillId":0,"Quantity":47.0000,"Value":176.2500,"PluDesc":"SANDWICH 3.75","DeptType":"Shop"},
{"PluId":"0205540000002","OperTillId":0,"Quantity":19.0000,"Value":174.9400,"PluDesc":"OPEN NON WEIGH M","DeptType":"Shop"},
{"PluId":"5011054108203","OperTillId":0,"Quantity":15.0000,"Value":169.5000,"PluDesc":"SILK CUT PURPLE","DeptType":"Shop"},
{"PluId":"5391504580149","OperTillId":0,"Quantity":7.0000,"Value":140.0000,"PluDesc":"VODAFONE 20 UNIT","DeptType":"Shop"}
]

 

Regards,

Shawn

[Tsvetina]

Hello Shawn,

It is not possible to change the display of grouped columns, but your requirement may be achievable with some custom logic.

You can simulate the legend behavior by adding buttons/checkboxes/other UI of your own that triggers a filter by DeptType on the Chart DataSource. This will let you show/hide one of the groups of items on a certain user action.

As for the series colors, you can modify your Chart data to feature a color field, which the chart can bind to:

<% Html.Kendo().Chart()
    .Name("Chart")
    .Series(series => series.Column(Model.Records).Field("Value").ColorField("Color"))
    .Render();
%>

This will let the Chart display series with different colors, like this demo.

Regards,
Tsvetina
Telerik by Progress

[Shawn]

Tsvetina,

The link to the 'this demo' does not work.  I'd like to see the demo to see if it is close to what I want.

You mentioned to add UI elements that would trigger a filter.  Can these UI elements be added to the chart?  Or would I need to create a wrapper DIV that contains the UI elements and the chart?

Regards,

Shawn

[Tsvetina]

Hello Shawn,

Sorry about the wrong link, here it is again: Bar Charts / Binding to local data.

With regard to the filtering UI, as you can only draw within the Chart and not render HTML elements, it is easier to define your HTML together with the chart within a common container element. If needed, you can try placing these elements on top of the chart using absolute positioning.

Regards,
Tsvetina
Telerik by Progress