Change Min and Max values in Kendo RadialGauge with Ajax

Question

I want to be able to change the min and max values in the Kendo RadialGauge "on the fly" with ajax. Do I need to destroy the gauge first and create a new one, or could I possibly just change current gauge and redraw it with min, max, and pointer values?

I have a typical gauge using Razor engine:

    @(Html.Kendo().RadialGauge()
      .Name("TotalCostGauge")
      .Pointer(pointer => pointer.Value(0))
      .Scale(scale => scale
         .MinorUnit(5)
         .StartAngle(-50)
         .EndAngle(230)
         .Max(100)
         .Labels(labels => labels.Position(GaugeRadialScaleLabelsPosition.Inside))
         .Ranges(ranges =>
             {
                 ranges.Add().From(180).To(180).Color("#c20000");
             }
             )
          )
      )

Using ajax I want to be able to update those values:

    $.ajax({
    type: "GET",
    dataType: "json",
    url: 'Controller/GetStuff/',
    success: function (data) {
        var totalCostGauge = $("#TotalCostGauge").data("kendoRadialGauge");
        var totCostOptions = totalCostGauge.options;

        //TODO: I want to be able to do something like this
        totCostOptions.scale.max = data.Max;

        totalCostGauge.value(data.TotalCost);
        totalCostGauge.redraw();

    },
    error: function (error) {
    }
});

I went through the documentation and could not see that the Min and Max values could be changed, however the pointer value can be changed via ajax.

did you try the code you posted? it seems like that should work — Lars Höppner, Dec 30 '13 at 16:30
Well, actually @LarsHöppner I eventually managed to do this correctly, in a way as you suggest. I was only going at it wrong. I posted an answer :) — gardarvalur, Jan 03 '14 at 10:00

score 0 · Accepted Answer · answered Jan 03 '14 at 09:58

Eventually I found out that I was going at this all wrong. This is actually what I needed to do:

$.ajax({
    type: "GET",
    dataType: "json",
    url: 'Controller/GetStuff/',
    success: function (data) {

        $("#TotalCostGauge").kendoRadialGauge({
            scale: {
                max: data.Max, // This is actually what I should have done  :)
                startAngle: -50,
                endAngle: 230,
                labels: {
                    format: "C0",
                    font: "8px Arial,Helvetica,sans-serif"
                },
                ranges: [{
                    from: 0,
                    to: 0,
                    color: "green"
                }]
            }
        });

        var totalCostGauge = $("#TotalCostGauge").data("kendoRadialGauge");
        totalCostGauge.value(data.Cost);
        totalCostGauge.redraw();

    },
    error: function (error) {
    }
});

Change Min and Max values in Kendo RadialGauge with Ajax

1 Answers1