Arc Gauge with a variable centerTemplate

[Dennis]

Hi,
I'm trying to create an Arc Gauge with a centerTemplate that won't use "value". The centerTemplate is going to display percentage of RAM and the actual RAM used (see attached image).
If I were to only show the percentage, it wouldn't be any problem.
Currently, my code for the Arc Gauge looks like this:

@(Html.Kendo().ArcGauge()
    .Name("MemoryBar")
    .Value(Model.CurrentMemoryPercent)
    .Scale(x => x.Min(0).Max(100))
    .CenterTemplate(string.Format("{0}% ({1})", Model.CurrentMemoryPercent, size))
)

That just creates a static CenterTemplate, though, and none of the variables are updated unless I refresh the page.

I can kinda work around this by using setoptions, but that redraws the entire gauge and forces me to disable transitions, which I don't want to.

Am I missing something completely, or can't this be done properly?

Thanks for any help.

 

 

 

[Tsvetomir]

Hi Dennis,

The ArcGauge is initialized only once, therefore, it would pick up the value only once. What I can recommend is that you make use of the value() method. It could be used to alternate the value and it will not reinitialize the widget.

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/arcgauge/methods/value

However, this might require the centerTemplate to be alternated. For instance, you might use the #=value#  template instead. Therefore, upon changing the value, the template will be updated accordingly. 

Let me know in case this approach is not applicable in your scenario.

 

Regards,
Tsvetomir
Progress Telerik

[Dennis]

Hi Tsvetomir,

Thanks for your update.

I haven't found a way to include strings inside of the 'value' field. Can that be done? My RAM statistics automatically change suffix (KB/MB/GB) according to what the RAM value is.

I need the value to be in this format: "{0}% ({1})", Model.CurrentMemoryPercent, size"
Model.CurrentMemoryPercent and size are both variables. The 'value' field can only take an integer, right?

[Tsvetomir]

Hi Dennis,

It is correct that the ArcGauge could accept numeric values only. What I can recommend is that you pass the value and size separately. You could pass a JavaScript function to be creating the template:

    .CenterTemplate("#:myFunc(value)#")


function myFunc(e){
// access the suffix from the model on the page
return e + " " + suffix
}

After changing the value, you could access the properties of the model on the page and return them along with the value.

In case additional assistance is needed, let me know.

 

Regards,
Tsvetomir
Progress Telerik