Telerik Forums
Kendo UI for jQuery Forum
1 answer
10 views

Hello,

Can anyone help me locate references or documentation on how to customize the SVG of a linear Gauge?

Basically, I want to create a Battery Gauge. (example attached)

 

 

Neli
Telerik team
 answered on 01 Mar 2024
1 answer
45 views

Hi Telerik,

The requirement is to have text inside ranges.

Is there a way to do it?

Nikolay
Telerik team
 answered on 13 Mar 2023
1 answer
382 views

Error: kendo.all.js: 63203 Uncaught TypeError: Cannot read properties of undefined (reading 'bbox')

I´m trying export to same pdf a few circular gauges and a grid

similar than:
<div id="pdf-export-container">
      <div id="gauges"></div>
      <div id="grid"></div>
</div>
<script>
    $("#gauges).load("/templates/gauges")
    $("#grid).load("/templates/grid")
    
    kendo.drawing.drawDOM($("#pdf-export-container"))
    .then(function(group) {
        return kendo.drawing.exportPDF(group, {});
    })
    .done(function(data) {
        kendo.saveAs({
            dataURI: data
        });
    });
</script>

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 28 Apr 2022
4 answers
404 views

Hello.

I want to change the pointer color of linear gauge based on its current value like the colors config of Arc Gauge.

 

Currently I made it with MVVM change event (here's the code).

https://github.com/kent010341/KendoUI-demo/blob/master/mvvm_change_event.html

 

I'm wondering if there's an easier way to make this (such as data-bind the pointer color directly).

 

Thanks.

 

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 25 Mar 2021
1 answer
76 views

 

Trying to initialize ArcGauge using data attributes.

Nothing seems to happen when I set

data-center-template

or data-colors

See:

https://jsfiddle.net/bglase/cp5g4jen/2/

I expected the gauge color to change based on the selected value, and the numeric value to be shown in the center of the gauge.

 

thanks in advance for any advice

Eyup
Telerik team
 answered on 14 Oct 2020
3 answers
350 views

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
Telerik team
 answered on 13 Apr 2020
7 answers
399 views

We are using both the radial and linear gauges in our own jQuery UI widget wrappers. These custom widgets are then added dynamically to a "canvas" window in our product. This had been working well until recently, when we noticed that sometimes the Kendo gauges would not always appear centered in their container divs. See the attached .PNG files for an example of a "misaligned" gauge, as well as the proper alignment.

When a gauge is misaligned, any small change to the browser window size will cause it to immediately "snap" into position. So, clearly the gauge is responding to some window message to reflow the page.

Our developers have spent a long time trying to solve the initial misalignment problems. We found that setting a timer when the page loads and then calling the gauges' "resize(true)" method would cause the gauges to align properly. However, a lot happens in the page when it loads so it was always tricky to set the timer delay so it didn't occur "too soon" to have an effect. Even so, this workaround has not been effective in every case and our customers have started to notice the issue.

I have noticed that misalignment seems to occur most often in recent versions of Chrome and Edge browsers. Firefox and Internet Explorer don't appear to suffer the same issue.  We are still using an older version of Telerik controls: 2018.3.911.

In my rather extensive testing of this issue the past few days I have noticed that a in simpler "preview" page that one type of our widget seems to always be initially misaligned but another widget type behaves properly. I have looked for differences between the two widgets (both based on Kendo radial gauges) and aside from default CSS, layout and labeling differences, the two widgets are pretty similar. I can't explain the difference but it seems reproducible.

Any thoughts about could be going wrong? We could prefer to avoid the "resize" method of solving this issue, if possible. What message do the gauges respond to when the browser window is resized?

I can provide details on how the widgets are rendered and the appropriate CSS upon request.

Thanks,

Jeff Benson

New Boundary Technologies

 

 

Teya
Telerik team
 answered on 06 Apr 2020
1 answer
69 views
I was looking at using the gauges and and possibly a few other things on an interface loaded in to a micro controller however the size of kendo.all.min.js and other required files are way too large. the entire system ends up being some 4mb and there is no way to fit it in to the 2mb of available space in the file system. Are there stripped down versions of the widgets rather than having to include everything?
Preslav
Telerik team
 answered on 02 Aug 2018
1 answer
46 views

Hi there,

as in this Dojo I can't figure out, how to dynamically change the max value. Could that RangeError be caused by a bug? I expected k-rebind as it would usually work.

Can anyone help with this?

Stefan
Telerik team
 answered on 12 Dec 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?