Multi-gauge problem

[Steve]

Hi, I have a problem displaying multiple needles with the radial gauge. 

I have a radialGauge defined as such:

@(Html.Kendo().RadialGauge().Name("MultiGauge")
                .Pointers(pointers =>
                {
                    pointers.Add().Color("#c20000").Length(0.5).Cap(c => c.Size(0.15));
                    pointers.Add().Color("#ff7a00").Length(0.75).Cap(c => c.Size(0.1));
                    pointers.Add().Color("#ff7a22").Length(0.75).Cap(c => c.Size(0.1));
                    pointers.Add().Color("#ff1100").Length(0.75).Cap(c => c.Size(0.1));
                })
                     .Scale(scale => scale
                            .MinorUnit(5)
                            .StartAngle(-60)
                            .EndAngle(240)
                            .Max(100)
                            .Labels(labels => labels
                                .Position(GaugeRadialScaleLabelsPosition.Inside)
                            )
                            .Ranges(ranges =>
                            {
                                ranges.Add().From(0).To(20).Color("#3bd11d");
                                ranges.Add().From(20).To(40).Color("#ffc700");
                                ranges.Add().From(40).To(60).Color("#ff7a00");
                                ranges.Add().From(60).To(100).Color("#c20000");
                            })
                        )

                    )
)

 

Then some js to set the values:

<script>
    $(document).ready(function() {

        var multiGauge = $("#MultiGauge").data("kendoRadialGauge");


        multiGauge.pointers[0].value(15);
        multiGauge.pointers[1].value(34);
        multiGauge.pointers[2].value(55);
        multiGauge.pointers[3].value(80);
        multiGauge.pointers[5].value(80); //required lol???

        multiGauge.redraw();
});

</script>

When I only set the pointer index 0,1,2, and 3, the gauge does not work.  The needles remain at zero and do not go to the specified value. 

However, if another value is added to an index that doesn't even exist... everything works.  

-Steve

[Georgi]

Hi Steve,

The values are not set as when the document ready event is triggered the initial animation of the widget is done yet. If you wrap the logic for setting the values in a setTimeout you will notice that the values apply as expected.

e.g.

setTimeout(function () {
    multiGauge.pointers[0].value(15);
    multiGauge.pointers[1].value(34);
    multiGauge.pointers[2].value(55);
    multiGauge.pointers[3].value(80);
})

Furthermore, accessing a not existing pointer causes an error which terminates the initial animation.


Regards,
Georgi
Progress Telerik

[Steve]

Is there an event to watch instead of wrapping a time delay? 

Seems pretty janky to use a timer... slow machines may exceed the timer and fast machines will sit and look at incorrect values until the timer is complete?

[Horton]

The problems caused by a multi-gauge system in a country have been discussed in the previous section. The multi-gauge system is not only costly and cumbersome but also causes serious bottlenecks in the operation of the Railways and hinders the balanced development of the country cleanmaster

[Georgi]

Hello Steve,

The animation frame depends on the browser. Since the animation frame value varies we are not able to expose an event which triggers when the animation is done.

e.g.

var animationFrame  = window.requestAnimationFrame       ||
                      window.webkitRequestAnimationFrame ||
                      window.mozRequestAnimationFrame    ||
                      window.oRequestAnimationFrame      ||
                      window.msRequestAnimationFrame     ||
                      function(callback){ setTimeout(callback, 1000 / 60); };

I am afraid that at this point the only solution I can suggest is the setTimeout.


Regards,
Georgi
Progress Telerik