How to replace chart data with javascript

2 posts, 0 answers
  1. Hubert
    Hubert avatar
    19 posts
    Member since:
    Feb 2012

    Posted 08 Aug 2012 Link to this post

    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
  2.
  3. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 13 Aug 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top