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 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
0
Philip
Top achievements
Rank 1
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.
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
below the style but before the body tag, but still same issue.
0
Hello Philip,
In order to resolve the issue please set a valid string for labels' position. For example:
the Telerik team
In order to resolve the issue please set a valid string for labels' position. For example:
$("#gauge").kendoRadialGauge({ //.... scale: { //.... labels: { position: "inside" }, //....});Regards,
Iliana Nikolovathe Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!