how to apply stack to my column chart.

[sandy]

Hi,

here first am displaying kendo chart with data using read option.

here am applied group and sort to my chart with stack option.

upto here its working fine.

by using kendo multiselect am filtering chart data. so when i apply filtering the stack data is not displaying correctly.

here is my code.

<div class="demo-section k-content wide">
    @(Html.Kendo().Chart<TimeControlReportEnhancements.Models.ResourceByProject>()
                    .Name("chHoursByResource")
                    .Title("Hours By Resource")
                    .Legend(false)
                    //.DataSource("dataSource2")
                    .DataSource(dataSource => dataSource
                            .Read(read => read.Action("LoadHoursByResourceWithDetails", "Home"))
                            .Group(group => group.Add(model => model.Hours))
                            .Sort(sort => sort.Add(model => model.EmpName).Ascending())
                        )
                    .Series(series =>
                    {
                        series.Column(model => model.Hours).Name("Hours").CategoryField("EmpName");

                    })
                    .SeriesDefaults(s=>s.Column().Stack(true))
                    .CategoryAxis(axis => axis
                        //.Name("label-axis")
                        //.Categories(model => model.EmpName)
                        .Labels(lbl => lbl.Rotation(-90))
                        )                  
                    .Tooltip(tooltip => tooltip
                        .Visible(true)
                        .Template("<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Employee Name:</span> #= dataItem.EmpName #</p>" +
                        "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Project Name:</span> #= dataItem.ProjectName #</p>" +
                        "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Hours:</span> #= value #")
                    )
    )

</div>

 

 function onSelect(e) {
        var chart = $("#chHoursByResource").data("kendoChart");
        var dataSource = chart.dataSource;
        var dataItem = e.dataItem;
        var multiselect = $("#ddlEmpNames").data("kendoMultiSelect");
        var selectedData = [];
        var items = multiselect.value();
        $.each(items, function (i, v) {
            selectedData.push(v);
        });
        selectedData.push(dataItem.EmpName);
        var _fltMain = [];
        var _flt = { logic: "or", filters: [] };
        $.each(selectedData, function (i, x) {
            _flt.filters.push({ field: "EmpName", operator: "contains", value: x });
        })
        _fltMain.push(_flt);
        dataSource.query({ filter: _fltMain });

        //dataSource.filter({ field: "EmpName", operator: "contains", value: selectedData[0] });
        ////dataSource.filter({
        ////    logic: "or",
        ////    filters: [
        ////        //{ field: "EmpName", operator: "contains", value: selectedData[0] }
        ////    ]
        ////});
        var Grid = $("#Grid").data("kendoGrid");
        var GriddataSource = Grid.dataSource;
        GriddataSource.query({ filter: _fltMain });
        $('#Grid').data('kendoGrid').dataSource.group({ field: "EmpName" });

        //$('#chHoursByResource').data('kendoChart').setDataSource(GriddataSource);
        //$('#chHoursByResource').data('kendoChart').dataSource.group({ field: "EmpName" });
      
    }

 

[Alex Hajigeorgieva]

Hello, Sandy,

Thank you very much for the provided code snippets.

The issue you are experiencing is because of the use of the query() method. As outlined in the documentation, the method will remove the sort, page, pageSize , group, aggregates etc.

Therefore,

Either:

• use the dataSource filter() method to preserve the groups
  
  https://dojo.telerik.com/OBOFAGEx

Or

• use the query() method but also provide the necessary chart dataSource groups by utilizing the qroup() method

 

Regards,
Alex Hajigeorgieva
Progress Telerik