Dynamically update categories legend

2 posts, 0 answers
  1. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 30 Jun 2013 Link to this post


    I have a simple page with a droplist and a chart.  When selecting an item of the droplist, I update the chart with new values.  The new chart can have different number of categories.  On initial load the chart displays correctly with all the categories legend.  When selecting a different element from the droplist, the chart updates correctly but the categories legend does not.

    For example, if the original chart had 5 categories and the selected item has 4, the chart still shows 5 categories where the 5th category is empty (no graph) but the 5th category legend still shows.  Whereas if the selected category has more series then the original, the chart displays correctly the additional categories but the the category legend is blank.  Somehow the category legend does not change. 

    Using kendo version 2013.1.514.
    Manufacturers @(Html.Kendo().DropDownListFor(m => m.MfgList)
                        .HtmlAttributes(new { style = "width:200px;margin-right:10px;" })
                        .Events(e => e.Change("ReloadGraph"))
    <div class="chart-wrapper">
            .Legend(legend => legend
            .SeriesDefaults(seriesDefaults =>
            .Series(series =>
                    series.Column(m => m.Series1).Name(Model.Series1Label).Color("#f3ac32");
                    series.Column(m => m.Series2).Name(Model.Series2Label).Color("#eda6a6");
            .CategoryAxis(axis => axis
                .Categories(m => m.Categories)
                .MajorGridLines(lines => lines.Visible(false))
            .ValueAxis(axis => axis           
                .Labels(labels => labels.Format("{0}%"))
                .Line(line => line.Visible(false))
                .MajorGridLines(lines => lines.Visible(true))
            .Tooltip(tooltip => tooltip
                .Template("#= dataItem.Tooltip #")
            .HtmlAttributes(new { @style = "Width:400px%;" })
    <script type="text/javascript">   
        function ReloadGraph() {
            var mfgId      = $('#mfgList').val();
            var schoolYear = $('#schoolYearList').val();
                type: "POST",
                async: true,
                data: "{'mfgId':'" + mfgId + "','schoolYear':'" + schoolYear + "'}",
                url: '@Url.Action("LoadGraphData", "Commodity")',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: ReloadGraph_ajaxCallSucceed,
                failure: ajaxCallFailed
        function ReloadGraph_ajaxCallSucceed(response) {
        function ajaxCallFailed(response) {
            alert("Ajax call Failed ");
  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 03 Jul 2013 Link to this post

    Hello Pierre,

    I am afraid what you would like to achieve is not supported by Kendo UI Chart. The only possible workaround I can suggest is to destroy the Chart and recreate it with the new configuration.

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top