Multi-gauge problem

5 posts, 0 answers
  1. Steve
    Steve avatar
    6 posts
    Member since:
    Oct 2018

    Posted 21 Mar Link to this post

    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

  2. Georgi
    Admin
    Georgi avatar
    558 posts

    Posted 26 Mar Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Steve
    Steve avatar
    6 posts
    Member since:
    Oct 2018

    Posted 26 Mar in reply to Georgi Link to this post

    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?

  4. Horton
    Horton avatar
    1 posts
    Member since:
    Mar 2019

    Posted 27 Mar Link to this post

    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
  5. Georgi
    Admin
    Georgi avatar
    558 posts

    Posted 27 Mar Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top