Hi,
I have a radial gauge and it is working fine, but as soon as i add the following it goes completely blank when i run the code.
labels: {
position: labelPosition || "inside"
},
If i remove this code it works again.
Any ideas?
Here is the complete function for reference.
function createGauges() {
var theme = $(document).data("kendoSkin") || "default";
// value = $("#gauge-value").val();
$("#Lgauge").kendoRadialGauge({
theme: theme,
pointer: {
value: 80
},
scale: {
majorUnit: 10,
minorUnit: 2,
min: 0,
max: 100,
labels: {
position: labelPosition || "inside"
},
ranges: [
{
from: 0,
to: 35,
color: "red"
}, {
from: 35,
to: 70,
color: "yellow"
}, {
from: 70,
to: 100,
color: "green"
}
]
}
});
}
And here is the only styling i apply to the div :
div#gaugeLCon {
background: transparent url("../images/gauge-container-partial.png") no-repeat 50% 50%;
width: 386px;
height: 386px;
text-align: center;
margin: 0 0 30px 50px;
}
div#Lgauge
{
width: 330px;
height: 310px;
text-align: center;
margin: 0 auto 0;
}
I have a radial gauge and it is working fine, but as soon as i add the following it goes completely blank when i run the code.
labels: {
position: labelPosition || "inside"
},
If i remove this code it works again.
Any ideas?
Here is the complete function for reference.
function createGauges() {
var theme = $(document).data("kendoSkin") || "default";
// value = $("#gauge-value").val();
$("#Lgauge").kendoRadialGauge({
theme: theme,
pointer: {
value: 80
},
scale: {
majorUnit: 10,
minorUnit: 2,
min: 0,
max: 100,
labels: {
position: labelPosition || "inside"
},
ranges: [
{
from: 0,
to: 35,
color: "red"
}, {
from: 35,
to: 70,
color: "yellow"
}, {
from: 70,
to: 100,
color: "green"
}
]
}
});
}
And here is the only styling i apply to the div :
div#gaugeLCon {
background: transparent url("../images/gauge-container-partial.png") no-repeat 50% 50%;
width: 386px;
height: 386px;
text-align: center;
margin: 0 0 30px 50px;
}
div#Lgauge
{
width: 330px;
height: 310px;
text-align: center;
margin: 0 auto 0;
}