I wasn't able to find a chart title option for a gauge as with the other charts. If this isn't an option are there any recommendations on how to match and overlay the existing style of a chart title onto a gauge?

As the title reads, is it possible to reverse the direction of a vertical linear gauge, so it starts to move from top to bottom? My scenario is the following:
I'm feeding the gauge with real time depth data, and I have defined top / surface to be at 0. When moving deeper, I'd like the pointer to move downwards towards the bottom of the gauge.

It moves fine with the real time data now, but in the wrong direction :)

Any suggestions?

Is there a way to  represent the scale labels in kilos say 100k, 200k, 1m in the radial Gauge ?
Since I have to display pointer value 2985653 and scale labels are large.

Hi,
I have checked the demo of kendo redial gauge and found all the demo code for kendo redial gauage size are fixed number,  without any percentage.  I have changed the css file to percentage, but the background image and gauge never be able to fit together. Will anybody provide some sample code? Many thanks. George

  #gauge-container {
            border-style:solid;
            border-color:red; 
            background:  transparent url(@Url.Content("~/Content/images/gauge-container-partial.png"))  ;
            background-vertical-position: -500% ;
            background-size: 100% 100%;
            width: auto;
            height: 100%;
            text-align: center;
            margin: -10% auto auto auto;
        }

        #SMDRReceiverMonitorChart {
            border-style:solid;
            border-color:blue; 
            width: auto;
            height: auto;
            align: center;
            margin: auto auto auto auto;
            
            border-color: transparent;
        }

        #gauge-container .k-slider {
           margin-top: -11px;
            width: 140px;
            
        } 
  

Is there a way to set labels of radial gauges at specific intervals? Such as if I have a range of 0-300, and I want to set labels only at 65, 98, 194, 250. So far I have only been able to set them at equal distance range intervals. 

Hi Kendo team,

My scenario is as follows:

I have an html page, where I want to put my Kendo Linear guage.

I have a WCF running in my IIS, which returns a value in JSON like this  [{"unSrvd":12}]

The WCF llink is as follows

http://localhost/WCFSrv/Uns.svc/api/Unserved/-1/-1/-1

Where -1/-1/-1 are the parameters that I have to pass to the WCF.

How can I bind this to the Linear guage?

Any help will be appreciated

Thanks and Regards

Renju J Panicker

I tried loading the gauge using a partial view



unfortunately this approach leads to a javascript "unresponsive script" error.
the chart title shows up so my markup is added to the page - but the kendo initialization is NOT completing.

This is the only script loaded in partial..

Hi,

I'm using KendoUI Gauge with Knockout, and it works fine. But when the value is greater than the max value, I'd like to update the max value to my actual value.
I'm using this documentation  Kendo-Knockout
I build a simple demo to ilustrate: Example

How could I do something like that using Knockout?
Thanks.

EDITED:
Forget about that. I was trying to update a single property from my ScaleOptions object, but when I recreate the entire object, it works.

Hi,

I'm new to Kendo UI and I'm having trouble getting a gauge to run for a proof of concept on a page running on iOS.  I've tried to convert the example for mobile UI, but currently it does not run and I get "Uncaught RangeError: Maximum call stack size exceeded"
Also, is there any documentation on blending the mobile UI and dataviz?

    <link href="kendo/examples-offline.css" rel="stylesheet">
    <link href="kendo/kendo.dataviz.min.css" rel="stylesheet">
    <link href="kendo/kendo.mobile.all.min.css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/kendo.all.min.js"></script>
</head>
<body>
            <div data-role="view" id="gauge-container" title="mainGauge" data-init="createGauge">
                <div id="gauge"></div>
            </div>
            <script>
                window.kendoMobileApplication = new kendo.mobile.Application(document.body);
                function createGauge(labelPosition) {
                    setTimeout(function () {
                        $("#gauge").kendoRadialGauge({
                            theme: $(document).data("kendoSkin") || "default",

                            pointer: {
                                value: 65
                            },

                            scale: {
                                minorUnit: 5,
                                startAngle: -30,
                                endAngle: 210,
                                max: 180,
                                labels: {
                                    position: labelPosition || "inside"
                                },
                                ranges: [
                                    {
                                        from: 80,
                                        to: 120,
                                        color: "#ffc700"
                                    }, {
                                        from: 120,
                                        to: 150,
                                        color: "#ff7a00"
                                    }, {
                                        from: 150,
                                        to: 180,
                                        color: "#c20000"
                                    }
                                ]
                            }
                        });
                    }, 400)
                };


                function refresh() {
                    var gauge = $("#gauge").data("kendoRadialGauge"),
                        showLabels = $("#labels").prop("checked"),
                        showRanges = $("#ranges").prop("checked"),
                        positionInputs = $("input[name='labels-position']"),
                        labelsPosition = positionInputs.filter(":checked").val(),
                        options = gauge.options;

                    options.transitions = false;
                    options.scale.labels.visible = showLabels;
                    options.scale.labels.position = labelsPosition;
                    options.scale.ranges = showRanges ? window.configuredRanges : [];

                    gauge.redraw();
                }
            </script>

            <style scoped>
                #gauge-container {
                    background: transparent url("images/gauge-container.png") no-repeat 50% 50%;
                    width: 404px;
                    height: 404px;
                    text-align: center;
                    margin: 0 0 30px 50px;
                }

                #gauge {
                    width: 330px;
                    height: 330px;
                    margin: 0 auto 0;
                }
            </style>

</body>
</html>

I'm trying to create a linear gauge, where ONLY the pointer is shown. The scale and all other furniture needs to be hidden, as we are displaying the pointer over a custom image in our web page.
My code for the gauge so far is as follows:


This is almost there, and displays the pointer with just a single, undecorated line where you would expect the scale to be (see attached image), but I can't seem to find in the API reference how you would switch that line off. Any help would be appreciated.