# Canvas circular meter/gauge **URL:** \ **Category:** Ignition\ **Created:** [July 15, 2017, 7:07am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800 "2017-07-15T07:07:08Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [July 15, 2017, 7:07am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/1 "2017-07-15T07:07:08Z")
I like very much this circular meters/gauges which you can see almost every where… I would very much like to have something like this in Ignition. I was trying to do something with the canvas, but I’m not java ‘person’ and it’s a ‘little’ too much for me. Is there any ‘brave’ soul who would try to do something like this in Ignition: [http://thecodeplayer.com/walkthrough/make-gauge-charts-using-canvas-and-javascript](http://thecodeplayer.com/walkthrough/make-gauge-charts-using-canvas-and-javascript) I think everybody would like and use this… ---
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [July 15, 2017, 8:03am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/2 "2017-07-15T08:03:13Z")
zxcslo Take a look in the Cloud Template Browser, there is a template called Dial in the IA folder that you could modify to suit. ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [July 15, 2017, 8:22am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/3 "2017-07-15T08:22:20Z")
I know about Dial… it’s made from Pie Chart component… But it’s not what I want/need… I think it can be done better in canvas… and with animation… ---
**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\ **Post date:** [July 15, 2017, 3:33pm UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/4 "2017-07-15T15:33:40Z")
Animation is quite easy to add. You can add a timer object to the template with a small delay, and create an intermediate “actual” value. If the actual value is different from the requested value, start the timer to go towards the requested value. I quickly added such an animation timer to the dial, and it works pretty fine: per 100ms, there’s a jump of 1%, [Dial\_2017-07-15\_1729.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/c2c0ecd33004ad0a286ac250905ef4646afaa3d3.proj) (25.2 KB) ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [July 15, 2017, 6:17pm UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/5 "2017-07-15T18:17:23Z")
@Sanderd17 Thank you. It really looks good. But I would really like something like this with animation: ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/171ed19b17b075b47d293c18651deff23dd9d742.PNG) ---
**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\ **Post date:** [July 16, 2017, 9:08am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/6 "2017-07-16T09:08:03Z")
Almost there, just bumping into problems with the shadow and separator bars, see [Customize Pie Chart - #7 by Sanderd17](http://forum.inductiveautomation.com/t/customize-pie-chart/14676/7) There’s now a separate button that fixes the shadow, but I can’t find a way to keep that persistent. [Dial\_2017-07-16\_1105.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/409b52aff9d7bb973e242aef7cabdd70eb6faded.proj) (25.2 KB) ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [July 16, 2017, 9:34am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/7 "2017-07-16T09:34:59Z")
@Sanderd17 Thank you for your effort… This is what I’ve done with paintable canvas. Everything is working and looking good. But I can’t figure it out, how to implement animation like you did… [circularGauge2 (2017-07-16).proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/20e6b4c7d10ed773b6263d29a648eba302f07e4b.proj) (57.1 KB) ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [July 16, 2017, 2:36pm UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/8 "2017-07-16T14:36:39Z")
HA, when I was taking my beauty nap after lunch, it came to me… 😀 Thank you @Sanderd17 for stimulating my brain cells. This is what I did: [circularGauge3 (2017-07-16).proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a91bb8109c1fc86e8b57cc0f750a82d1b93b8d4a.proj) (89.1 KB) (I’m using tags generic simulator device for testing). ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [November 9, 2018, 8:22am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/9 "2018-11-09T08:22:59Z")
Here is the updated version with selectable shape (arc/donut) and animation (off/on)… as requested by @nader.chinichian… [circularGauge4\_2018-11-09\_0920.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9987e8b9f70bc01adc5e8e69acb1b5daa24e40aa.proj) (144.1 KB) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 9, 2018, 2:58pm UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/10 "2018-11-09T14:58:23Z")
Thank you very much. I’m really love this object. I hope some day ignitin make it native object so we can see the shape of object t in design mode. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [November 10, 2018, 7:13am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/11 "2018-11-10T07:13:02Z")
I make some modern good looking slider with mouseDragged event. Do you think is it possible to make this circular gauge to circular slider like the ones in the web? adding a shape as handlers on on your gauge and use mouseDragged event to change value of gauge and position of shape handler. The only problem is how fix user movement on the circular line? ---
**Author:** ![tgish](https://avatars.discourse-cdn.com/v4/letter/t/34f0e0/32.png) [@tgish](https://forum.inductiveautomation.com/u/tgish)\ **Post date:** [January 30, 2023, 10:34pm UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/12 "2023-01-30T22:34:17Z")
Hi @zxcslo, I was looking for something just like this, so thanks! One question though, I have some values that alternate between -10 and 10. I tried modifying your templates to account for negative numbers and it doesn't seem to behave well, the point of "zero" seems fixed. I'm not great at scripting, any chance you could point me in the right direction to fix that? or is it impossible? Thanks! ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [February 1, 2023, 7:07am UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/13 "2023-02-01T07:07:15Z")
You can play with minValue and maxValue properties... If you set minValue to 10 and maxValue to 120, you'll get a range from -10 to 100. ![Screenshot_55](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/3/03ebfb8d678776ed137ea3a1f38c6b4b4ab25102.png) ![Screenshot_56](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/afbf5b70a4fdb1a1676b918b010eca698ca21994.png) ![Screenshot_57](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/3/d37bc0634efa6f03af96a37f564bf7a48e5ab769.png) ![Screenshot_58](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/b/4b698f39db87d7a09a9f86a794a14ffbbceb99ee.png) ---
**Author:** ![tgish](https://avatars.discourse-cdn.com/v4/letter/t/34f0e0/32.png) [@tgish](https://forum.inductiveautomation.com/u/tgish)\ **Post date:** [February 16, 2023, 10:52pm UTC](https://forum.inductiveautomation.com/t/canvas-circular-meter-gauge/14800/14 "2023-02-16T22:52:37Z")
Thanks! I actually modified the internal code for scaling and it works for negative numbers now. Again, great work on these arcs!