This is a migrated thread and some comments may be shown as answers.

Gauge Demo on iOS

2 Answers 90 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Philip
Top achievements
Rank 1
Philip asked on 27 Feb 2013, 07:34 PM
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 Answers, 1 is accepted

Sort by
0
Philip
Top achievements
Rank 1
answered on 27 Feb 2013, 08:55 PM
I moved

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

below the style but before the body tag, but still same issue.
0
Iliana Dyankova
Telerik team
answered on 28 Feb 2013, 04:38 PM
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!
Tags
Gauges
Asked by
Philip
Top achievements
Rank 1
Answers by
Philip
Top achievements
Rank 1
Iliana Dyankova
Telerik team
Share this question
or