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.
Thanks,
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
>