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

Dynamically update categories legend

1 Answer 214 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 30 Jun 2013, 11:01 AM
Hi,

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)
                    .Name("mfgList")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(Model.MfgList)
                    .HtmlAttributes(new { style = "width:200px;margin-right:10px;" })
                    .Value(Model.selectedMfgId)
                    .Enable(true)
                    .Events(e => e.Change("ReloadGraph"))
                )
<div class="chart-wrapper">
    @(Html.Kendo().Chart(Model.graphData)
        .Name("chart")
        .Title(Model.Title)
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)           
        )
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Column().Stack(true)         
        )
        .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
            .Visible(true)
            .Categories(m => m.Categories)
            .MajorGridLines(lines => lines.Visible(false))
            .Labels(labels=>labels.Rotation(-90))
        )
        .ValueAxis(axis => axis           
            .Numeric()
            .Labels(labels => labels.Format("{0}%"))
            .Max(100)
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= dataItem.Tooltip #")
        )   
        .HtmlAttributes(new { @style = "Width:400px%;" })
    )
</div>
<script type="text/javascript">   
    function ReloadGraph() {
        var mfgId      = $('#mfgList').val();
        var schoolYear = $('#schoolYearList').val();
        $.ajax({
            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) {
        $('#chart').data("kendoChart").dataSource.data(response.graphData);
    }
    function ajaxCallFailed(response) {
        alert("Ajax call Failed ");
    }
</script>
Thanks,

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 03 Jul 2013, 06:40 AM
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.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Chart
Asked by
Pierre
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Share this question
or