How to replace chart data with javascript

[Hubert]

Hi,

i have a gauge and a stacked bar chart on my site and the values should be replaced at runtime.
The gauge works well, but how do i change the values (series and categories) within a stacked bar chart?

I built the gauge like this

@(Html.Kendo().RadialGauge()

           .Name("the-gauge")

           .Pointer(pointer => pointer.Value(Model.InitialGaugeValue))

           .Scale(scale => scale

                               .MinorUnit(5)

                               .StartAngle(0)

                               .EndAngle(180)

                               .Min(-20)

                               .Max(20)

                               .Labels(labels => labels

                                                     .Position(GaugeRadialScaleLabelsPosition.Inside)

                               )

                               .Ranges(ranges =>

                                           {

                                               ranges.Add().From(-20).To(-5).Color("#c20000");

                                               ranges.Add().From(-5).To(-2).Color("#ffff00");

                                               ranges.Add().From(-2).To(2).Color("#00ff00");

                                               ranges.Add().From(2).To(5).Color("#ffff00");

                                               ranges.Add().From(5).To(20).Color("#c20000");

                                           })

           )

                      )

and there's no problem to change the value via javascript with this statement:

$("#the-gauge").data("kendoRadialGauge").value(data.Margin);

but how do i change the values of a stacked bar chart?
The chart looks like this:

@(Html.Kendo().Chart()

           .Name("the-chart")

                   .ChartArea(ca => ca.Background("Transparent"))

           .Legend(legend => legend.Position(ChartLegendPosition.Top))

           .SeriesDefaults(seriesDefaults => seriesDefaults.Column().Stack(true))

           .Series(series => {

                                 foreach (var item in Model.StackData)

                                 {

                                     series.Column(item.Data).Name(item.Name);

                                 }

           })

           .SeriesColors("#8080ff", "#ff8080")

           .CategoryAxis(axis => axis.Categories(Model.StackCategories).MajorGridLines(mgl => mgl.Visible(false)))

           .ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format("{0} Mrd")))

           .Tooltip(tooltip => tooltip.Visible(true).Format("{0}%"))

           )

I just want to replace the data and not the whole chart every time the data changes.

cheers
Hubert

[Hristo Germanov]

Hi Humbert Corr,

You can access the chart's data from the chart's options. When you replace the data you can try to call redraw() client-side method.  For example:

var chart = $("#the-chart").data("kendoChart"),
   series = chart.options.series;

// first series
series[0].data = [1, 2, 3];
chart.redraw();

Greetings,
Hristo Germanov
the Telerik team