Questions on Kendo UI for jQuery Forum

1 answer

282 views

Resizing the gauge for responsive websites

Is there any way we can resize the gauge with css media queries for our responsive websites?

Gauges

answered on 12 Feb 2014

4 answers

97 views

Can I Have Two pointers in the same guage

Hi Kendo Team

Can I show two pointers in the guage one of which points to an actual value and the other points to a target value.Please take a look at the image that shows my requirement.

Thanks
Ramoji

Gauges

answered on 26 Oct 2013

3 answers

88 views

Missing styling options?

Hi,

I've found the need to style my gauges somewhat "outside" the scope of your documentation (At least as far as I could see). I'm trying to style the scale it self, both in the linear and radial gauges. What I'm trying to achieve is a border along the edges, as can be seen in the attachments (These are custom styled Telerik components by the way). Is this at all possible with the Kendo equivalent components?

Also, is it possible to style the pointer of the radial gauge, to look more like the one in the attached image? I know there's probably alot of custom css to be done here, but I find it really neccesary to be able to do this.

Best regards,
Nicklas

Gauges

answered on 22 Oct 2013

2 answers

228 views

Changing theme on Gauge (radial ou linear)

I try to change the theme dynamically.

I change the kendo.dataviz.(theme).min.css in the page
then I call this

var kendoElem = $elem.data('kendoRadialGauge');

kendoElem.setOptions({ theme: 'moonlight'});

kendoElem.redraw();

The gauge redraw but the color of the pin and text graduation do not change.

Any suggestion?

Gauges

answered on 25 Sep 2013

3 answers

281 views

Update ranges in linear gauge dynamically

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 :)

Gauges

answered on 16 Sep 2013

1 answer

132 views

RadialGauge Scale Labels Position Outside not working

Hi,

I am using a RadialGauge and want to position the scale labe on the outside. The Gauge is created with HTML helper as follows:

@(Html.Kendo().RadialGauge()

.Name("gauge1")

.Pointer(pointer => pointer

.Color("#8EBC00")

.Value(@ViewBag.ServiceLevel))

.Scale(scale => scale

.MinorUnit(5)

.StartAngle(0)

.EndAngle(180)

.Max(100)

.Labels(labels => labels

.Position(GaugeRadialScaleLabelsPosition.Outside))

.Ranges(ranges => {

ranges.Add().From(0).To(5).Color("#c20000");

ranges.Add().From(5).To(25).Color("#ff7a00");

ranges.Add().From(25).To(60).Color("#ffc700");

})

)

The result is, that the scale is still positioned inside the scale. Is there anything wrong in my code?

I am using v.2013.2.716.340.

Regards
Sven

Gauges

answered on 21 Aug 2013

2 answers

42 views

How do I specify the "rangeSize" option using fluent?

I've looked but cannot find how to set the rangeSize option when using Kendo DataViz's fluent syntax. Is this possible and how do I do it?

Gauges

answered on 19 Aug 2013

3 answers

127 views

Variable Linear Gauge Range & Labels

Can I define my own range and labels in the Linear Gauge?

Controller:
public ActionResult LinearGauge()
{
List<gaugeSetting> gaugeModel = new List<gaugeSetting>();

gaugeModel.Add(new gaugeSetting { From = 1, To = 2, Color = "#000099", Label = "Requirements" });
gaugeModel.Add(new gaugeSetting { From = 2, To = 3, Color = "#009900", Label = "Design" });
gaugeModel.Add(new gaugeSetting { From = 3, To = 4, Color = "#ff0000", Label = "Development" });

return View(gaugeModel)
}

View:

@(Html.Kendo().LinearGauge()
.Name("gauge")
.Pointer(pointer => pointer
.Value(2)
.Shape(GaugeLinearPointerShape.Arrow)
)
.Scale(scale => scale
.Vertical(false)
.Labels(l =>
{
//Get the Labels from the Model
})
.MajorUnit(1)
.MinorUnit(1)
.Max(7)
.Ranges(ranges =>
{
//Get the Ranges from the Model
}
)
)
.HtmlAttributes(new { style = "width:500px;" })
)

Gauges

answered on 07 Aug 2013

3 answers

120 views

Is it possible to have the linear gauge pointer start from the center?

Hi,

I have a case where I measure negative and positive speed using the same linear gauge. I was wondering if it's possible to have the pointer start with the center as a zero-point? Here's my code:

<script>

function createSpeedGauge() {

$("#speedBar").kendoLinearGauge({

pointer: {

value: 0,

color: "black",

start: 0

},

scale: {

majorUnit: 20,

minorUnit: 2,

min: -120,

max: 120,

vertical: true,

reverse: true,

ranges: [

{

from: -120,

to: -30,

color: "#ffc700"

},

{

from: 120,

to: 30,

color: "#ffc700"

}

]

}

});

}

$(document).ready(function() {

createSpeedGauge();

});

</script>

I've attached an image of how it's setup (the gauge in question on the right side). If this was setup the way I wanted, this gauge would've read -120 from this picture. Hopefully, I've expressed myself clearly :)

Gauges

answered on 25 Jul 2013

1 answer

472 views

Dynamically change range sizes on radial gauge

Hi

I currently have the following but I would like to be able to specify the ranges dynamically using sliders. Can anyone tell me how to implement this?

Note - there will always be four ranges, its just where these start and stop is where I want to regulate.

@(Html.Kendo().RadialGauge()

.Name("testRadialGauge")

.Pointer(pointer => pointer

.Value(0)

.Color("Blue")

)

.Scale(scale => scale

.MinorUnit(200)

.StartAngle(-30)

.EndAngle(210)

.Max(5000)

.Labels(GaugeRadialScaleLabels => GaugeRadialScaleLabels