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?
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:
The pointer is solid, you can configure the color but not the border:
There is no "Average" annotation.
You can see it here : http://jsfiddle.net/OnaBai/sThK3/1/
This is quite an old question, but there is a working answer here:
Give a Linear Gauge custom labels
Related
Alrighty so I've run into an interesting little problem. I am trying to create a gauge chart, which then has plot bands. Simple enough.
The complication comes in when I want the plot bands to have a gradient run through the center of if evenly.
A rough js fiddle I forked:
http://jsfiddle.net/maraket/omez0n9r/3/
It should be noticed I am trying a radialgradient with a sharp change as per:
{
color: {
radialGradient: {
cx: 0.5,
cy: 0.5,
r: 0.5
},
stops: [
[0, '#000000'],
[0.8, '#ffffff'],
[1, '#000000'],
]
},
from: 0,
to: 100,
innerRadius: '90%',
outerRadius: '110%'
}
Now for a single plotband I noticed that the radial Gradient is more eliptical then circular which makes the solution I'm using not ideal. Furthermore when using multiple plotbands this solution won't work, since it uses the local plotbands x,y which changes if there are multiple plot bands. Any thoughts would be very helpful.
The reason why gradient is elliptical is because the bounding box of the plot band is not a square, but more a rectangle. It is because, you don't use full angle. Compare the gradient with full angle pane - http://jsfiddle.net/3mm1bjqf/.
Because your bounding box is not a square, then you need to define your own coordinate system for the gradient. Gradient attributes can be obtained from axis properties.
Your gradient should look like this:
plotBands: [{
color: {
radialGradient: {
gradientUnits: 'userSpaceOnUse', // we use our own coord system instead of bbox
cx: axis.left + axis.center[0],
cy: axis.top + axis.center[1],
r: axis.center[2] / 2 * 1.1 // multiplying by 1.1 because plotBand's outerRadius is set to 110%
},
Unfortunately, this gradient must be set dynamically because you do not know axis coords before the chart is rendered - so it must be done on load/redraw events.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
events: {
load: function() {
var axis = this.yAxis[0];
axis.update({
plotBands: [{
color: {
radialGradient: {
gradientUnits: 'userSpaceOnUse',
cx: axis.left + axis.center[0],
cy: axis.top + axis.center[1],
r: axis.center[2] / 2 * 1.1
},
stops: [
[0, '#000000'],
[0.8, '#ffffff'],
[1, '#000000'],
]
},
from: 0,
to: 100,
innerRadius: '90%',
outerRadius: '110%'
}]
})
}
}
},
example: http://jsfiddle.net/zfyzvqw1/
I want to make a solid gauge using High Chart but I want my yAxis min value to be anything but zero. Whenever, I change the value, the label disappears. Is there a way to make the label appear again? Or maybe someone has an alternative way to make those labels.
In my project, I will have to change the min amount dynamically, depending on user's settings.
Here's a fiddle sample:
jsfiddle.net/TH2aB/1/
You can get the label back by specifying startOnTick:true,
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
startOnTick:true,
title: {
y: -70
},
labels: {
y: 16
}
},
http://jsfiddle.net/yU7EM/
You can also explicitly set the tick positions using the tickPOsitions option:
tickPositions:[10,200],
http://jsfiddle.net/L6vVr/
Using latest highcharts (3.0.7). We are trying to add text to the top of the chart on export. to do this I need to increase the spacingTop so that we do not overwrite any chart elements. This then causes the chart to become less high by that amount of spacingTop for a the same chart height. How can I get the current chart height and add X amount to it on export? I have tried:
exporting: {
sourceWidth: 400,
//sourceHeight: this.chartHeight,
//sourceHeight: this.chartHeight + 200,
scale: 1, //(default)
chartOptions: {
subtitle: null,
height: this.chartHeight + 200
}
}
This seems to be ignored. See this fiddle. This was just a test to see if I could do this at all. Seems like it should be straight forward. If I uncomment out the sourceHeight it still does not do what I expect - the chart is still 400px high. So it seems that this.chartHeight does not contain anything.
In the end this height change code is going to exist in a function we call:
chartMainLoc.exportChart({
type: 'image/jpeg',
sourceHeight: this.chartHeight + 200,
sourceWidth: this.chartWidth,
scale: 1
}, {
chart: {
events: {
load: function () {
this.renderer.text('Occupational Employment and Wage Rates (OES) for Multiple Occupations in Louisiana in 2012<br /> The graph below shows the annual occupational employment and annual wage data for Multiple Occupations in Louisiana in 2012.<br /> ', 5, 15).attr({
rotation: 0
}).css({
color: '#4572A7',
fontSize: '10px',
fontStyle: 'italic',
width: this.chartWidth
}).add();
this.renderer.rect(5, 5, this.chartWidth - 10, 60, 5).attr({
'stroke-width': 2,
stroke: 'black',
zIndex: 2
}).add();
}
},
spacingTop: 200,
shadow: false
}
})
Since I do not know the chart's height or width beforehand I have to get this value somehow.
You need to set chart optiosn with objects (chart / series etc) like in the example http://jsfiddle.net/GQUDJ/2/
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. (Right now, it reads "0" on the black bar, as this is the value set in my js.) Any suggestions?
Solved by setting the starting point to 0 and using SignalR to update the other end of the bar. (Initial starting point)
Using a Kendo UI Datawiz component (Linear gauge) in my project. It's supposed to be an indicator for depth, where surface is at 0 (top) and bottom should be at x (bottom). Currently I have not figured out how to 'reverse' the direction of the gauge, causing it to start at 0, and move downwards towards x at bottom.
Does anyone know how to achieve this?
Here's my gauge:
function createGauges() {
var value = $("#depthBar").val();
$("#depthBar").kendoLinearGauge({
pointer: {
value: 28,
shape: "arrow"
},
scale: {
majorUnit: 20,
minorUnit: 2,
min: -40,
max: 60,
vertical: true,
directions:
}
});
}
$(document).ready(function() {
createGauges();
});
Aaand, I've found the answer. Actually missed a tiny piece of code in the docs;
...
scale: {
majorUnit: 1000,
minorUnit: 500,
min: 0,
max: 12000,
vertical: true,
reverse: true
}
...