This is a migrated thread and some comments may be shown as answers.

how to apply stack to my column chart.

1 Answer 10 Views
Chart
This is a migrated thread and some comments may be shown as answers.
sandy
Top achievements
Rank 1
Iron
Veteran
sandy asked on 07 Dec 2020, 11:33 AM

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" });
      
    }

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 09 Dec 2020, 10:31 AM

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:

Or

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

 

Regards,
Alex Hajigeorgieva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart
Asked by
sandy
Top achievements
Rank 1
Iron
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or