I have been trying using angular gauge with multiple y axis. I have used offset axis property to avoid collision between them. However, plotband of the axes getting collided with each other. Is there any property to separate them out or any other workaround?
My try:
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -90,
endAngle: 90,
background: null
},
// the value axis
yAxis:[
{
min: 0,
max:100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
labels: {
distance: 12,
rotation: 'auto'
},
offset: -30,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
plotBands: [{
from: 0,
to: 10,
color: '#55BF3B',
}, {
from: 10,
to: 70,
color: '#DDDF0D',
}, {
from: 70,
to: 90,
color: '#DF5353',
}]
},
{
min: 0,
max:100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
labels: {
distance: 12,
rotation: 'auto'
},
offset: 30,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
plotBands: [{
from: 0,
to: 10,
color: 'red',
offset:30,// green
}, {
from: 10,
to: 70,
color: 'orange' // yellow
}, {
from: 70,
to: 90,
color: 'violet' // red
}]
}
],
series: [{
name: 'Speed',
data: [{
id: 'hour',
y: 90,
}],
},{
name: 'Speed',
data: [{
id: 'minute',
y: 50,
}],
},
]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
}, 3000);
}
});
$('.highcharts-axis text').click(function(){ alert($(this).text());
});
});
https://jsfiddle.net/n1djkxLr/8/
This issue is related with know bug, reported to our developers here: https://github.com/highcharts/highcharts/issues/5283
Related
I try to display 3 vu-meters within a single call, but the vu-meters number 2 and 3 are one over the other.
Is there a way to display 3 vu-meters at once, or is the component locked?
You need to define additional pane, yAxis and series:
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['20%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['50%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['80%', '145%'],
size: 300
}],
yAxis: [{
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
y: -40
}
}, {
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}, {
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 2,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}],
series: [{
name: 'Channel A',
data: [-20],
yAxis: 0
}, {
name: 'Channel B',
data: [-20],
yAxis: 1
}, {
name: 'Channel C',
data: [-10],
yAxis: 2
}]
Live demo: https://jsfiddle.net/BlackLabel/43ft09mq/
API Reference: https://api.highcharts.com/highcharts/series.gauge
I am facing a weird issue for size of the graph.
I want the size of strip like this.
However, I am getting like this.
You can see my efforts below.
chart: {
type: 'gauge',
alignTicks: false,
height: 330,
width: 160
},
title: null,
pane: {
startAngle: -90,
endAngle: 90,
size: '90%',
background: [{
backgroundColor: '#fff',
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
tickPosition: 'inside',
tickColor: '#666',
tickLength: 10,
tickWidth: 0,
minorTickWidth: 3,
minorTickColor: '#fff',
minorTickPosition: 'inside',
minorTickLength: 0,
minorTickInterval: null,
offset: -10,
lineWidth: 0,
labels: {
enabled: false
},
endOnTick: false
}
Your help would be appreciated.
If I understand your Question correctly: in a Gauge chart the 'width' of the strips is determined by the option thickness of each plotBand.
plotBands: [{
from: 0,
to: 20,
thickness: 40,
color: '#55BF3B' // green
}, {
from: 20,
to: 60,
thickness: 40,
color: '#DDDF0D' // yellow
}, {
from: 60,
to: 100,
thickness: 40,
color: '#DF5353' // red
}]
See http://jsfiddle.net/doc_snyder/zd9mshm7/ for an example.
I try to disable tooltip for gauge but no matter what I do, it doesn't work.
I tried to place:
tooltip: {
enabled: false
}
under chart, pane, series ...
Here is a demo I use: Fiddle
and this is a code:
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
tooltip: {
enabled: false
}
},
exporting: {enabled: false},
title: {
text: 'meetings',
//align: 'bottom'
verticalAlign: 'bottom',
y: 10,
style: {
fontWeight: 'bold',
fontSize:'18px'
}
},
pane: {
tooltip: {
enabled: false
},
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
tooltip: {
enabled: false
},
min: 0,
max: max,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 0,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 0,
tickWidth: 0,
tickPosition: 'inside',
tickLength: 0,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: '',
y: 150,
style: {
fontWeight: 'bold',
fontSize:'18px'
}
},
plotBands: [{
from: 0,
to: color_threshold_values[0],
color: '#DA2626'
}, {
from: color_threshold_values[0],
to: color_threshold_values[1],
color: '#F19E26'
}, {
from: color_threshold_values[1],
to: color_threshold_max,
color: '#88A61F'
}]
},
series: [{
name: 'Count',
data: [data.count],
dataLabels: {
enabled:false,
borderColor: 'red',
borderWidth: 0,
padding: 5,
shadow: true,
style: {
fontWeight: 'bold',
fontSize:'25px'
}
},
}]
});
Any ideas?
Try adding it to the config object itslef?
http://jsfiddle.net/hesonazx/
$('#container').highcharts({
tooltip: {
enabled: false
},
chart: {
...
});
This is based on the documentation. Notice that the toottip property for a guage type chart doesn't have an enabled option. The general tooltip property does however.
You can just add .highcharts-tooltip{opacity: 0;}
See fiddle http://jsfiddle.net/DIRTY_SMITH/dpyy732d/2/
Im looking to have a set min and max (0-200) and to cap the gauge line at the 200. The data could be over 200, but the line on the gauge would still need to cap at 200.
Is there a parameter to do this?
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [555],
tooltip: {
valueSuffix: ' km/h'
}
}]
You can use plotOptions.gauge.wrap: false to prevent wrapping around.
The API description:
wrap: Boolean
When this option is true, the dial will wrap around the axes. For instance, in a full-range gauge going from 0 to 360, a value of 400 will point to 40. When wrap is false, the dial stops at 360. Defaults to true.
Example usage (JSFiddle):
plotOptions: {
gauge: {
wrap: false
}
}
I am using highcharts speed o meter with PHP and MYSQL. It is working fine but the problem is that when I merge the JavaScript in my website, the speed o meter is not displaying. It does not appear any error, just blank screen where the speed o meter code is used. Here is my code:
$(function () {
$('#containers').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ''
},
pane: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'Speed km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [<?php echo join($result, ',') ?>],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
}
});
});
I don't know what is problem if any one knows please tell me.
The only thing i see is that you forgot a semi-colon:
<?php echo join($result, ',') ?>
Change to
<?php echo join($result, ','); ?>
Otherwise try the console-debugger for the javascript-part.