Update ranges in linear gauge dynamically

4 posts, 1 answers
  1. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 12 Sep 2013 Link to this post

    I have a Linear Gauge looking like this:
    function createGauges(conveyanceId) {
            $("#depthBar-" + conveyanceId).kendoLinearGauge({
                pointer: {
                    value: 0,
                    shape: "arrow",
                    color: "transparent",
                    start: 0,
                    reverse: true
                },
                scale: {
                    majorUnit: 500,
                    minorUnit: 100,
                    labels: {
                        visible: false
                    },
                    min: -2000,
                    max: 2000,
                    vertical: false,
                    reverse: false,
                    ranges: [
                        {
                            from: -2000, // LimitLo
                            to: -1500,
                            color: "#ffc700"
                        },
                        {
                            from: 2000, // LimitHi
                            to: 1500,
                            color: "#ffc700"
                        }, {
                            from: 2000, // LimitHiHi
                            to: 1800,
                            color: "#c20000"
                        }, {
                            from: -5000,
                            to: -1800,
                            color: "#c20000" // LimitLoLo
                        }, {
                            from: 0,
                            to: 0,
                            color: "lightblue"
                        }
                    ]
                }
            });
    Is it possible to update the ranges dynamically with a custom input number?
    I'm trying to get the gauge like this: (I'm able to locate the gauge with no problems, it's just the ranges I cannot seem to locate correctly :))
    $('#depthBar-' + conveyanceId).data("kendoLinearGauge").options.scale.ranges[4].to = depthMessage;
    Any help / suggestions would be greatly appreciated :)
  2. Answer
    Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 16 Sep 2013 Link to this post

    Hi Nicklas,

    After you change the linear gauge ranges you need to redraw it:

    var gauge = $("#yourLinearGaugeSelector").data("kendoLinearGauge");
    gauge.options.scale.ranges[0].from = 200;
    gauge.redraw();

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 16 Sep 2013 Link to this post

    Thank you! Have you guys planned for this kind of functionality to be implemented? I.e. instead of using the arrow as a pointer, one could use a bar moving up / down, either from center (0) to max / min values or from 0 (min) to x (max).

    If not, can I add a request / wish for this somewhere?
  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 16 Sep 2013 Link to this post

    Hello Nicklas,

    Thank you for the feedback.

    Currently there is no such functionality available but this is a good idea and I would suggest to submit your request in Kendo's UserVoice so other members of the community can evaluate, comment on and vote for it. 

    Regards,
    Hristo Germanov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready