Gauge Demo on iOS

3 posts, 0 answers
  1. Philip
    Philip avatar
    2 posts
    Member since:
    Feb 2013

    Posted 27 Feb 2013 Link to this post

    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>

  2. Philip
    Philip avatar
    2 posts
    Member since:
    Feb 2013

    Posted 27 Feb 2013 Link to this post

    I moved

            <script>
                window.kendoMobileApplication = new kendo.mobile.Application(document.body);
        </script>

    below the style but before the body tag, but still same issue.
  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 28 Feb 2013 Link to this post

    Hello Philip,

    In order to resolve the issue please set a valid string for labels' position. For example:
    $("#gauge").kendoRadialGauge({
       //....
       scale: {
          //....
          labels: {
              position: "inside"
          },
       //....
    });

    Regards,

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top