2

Looking at the radial gauge control.was wondering if it would be possible to make it to look like the following picture, without the needle?

enter image description here

Community
  • 1
  • 1
kob490
  • 3,177
  • 4
  • 25
  • 40

2 Answers2

1

You can get pretty close doing:

$("#gauge").kendoRadialGauge({
    pointer: {
        // Current value
        value: 0.72
    },
    scale: {
        // Start and End angle of the Gauge
        startAngle: 0,
        endAngle: 180,

        // Make range wider and with units inside
        rangeSize: 40,
        rangeDistance: -10,

        // Configure major and minor unit
        minorUnit: 0.05,
        majorUnit: 0.25,
        // Make major ticks same size than minor ticks
        majorTicks: {
            size: 10
        },

        // Define min and max (0% - 100%)
        min: 0,
        max: 1,

        // Labels outside the range and number as percentage with no decimals
        labels: {
            position: "outside",
            format: "p0"
        },

        // Color ranges
        ranges: [
            {
                from: 0,
                to: 0.45,
                color: "red"
            }, 
            {
                from: 0.45,
                to: 0.80,
                color: "yellow"
            },
            {
                from: 0.80,
                to: 1.00,
                color: "green"
            }
        ]
    }
});

Some differences are:

  1. The pointer is solid, you can configure the color but not the border:
  2. There is no "Average" annotation.

You can see it here : http://jsfiddle.net/OnaBai/sThK3/1/

enter image description here

OnaBai
  • 40,767
  • 6
  • 96
  • 125
0

This is quite an old question, but there is a working answer here:

Give a Linear Gauge custom labels

Community
  • 1
  • 1
xjsc16x
  • 278
  • 1
  • 6
  • 16