# Multi-gauge problem

1. ##### Steve
6 posts
Member since:
Oct 2018

Posted 21 Mar 2019 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
671 posts

Posted 26 Mar 2019 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.
3. ##### Steve
6 posts
Member since:
Oct 2018

Posted 26 Mar 2019 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
1 posts
Member since:
Mar 2019

Posted 27 Mar 2019 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
671 posts

Posted 27 Mar 2019 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.