Gauge chart Highchart size of the graph issue

Gauge chart Highchart size of the graph issue - javascript

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.

Related

unequal intervals highchart gauges

I am using Angular Gauge from HighChart and wanted to know if it is possible to have unequal intervals. Currently, unequal intervals on the Y-axis effects the size of each plot band in the gauge.How can I have equal plot band sizes with unequal intervals on Y-axis.
Here is an example of the intervals-0-86, 86-88, 88-90, 90-96 and 96-100.
I have tried so far-
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Percentage %'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 50,
tickInterval: 6,
tickWidth: 2,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '15px'
}
},
title: {
text: ''
},
plotBands: [{
from: 0,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Any help is appreciated!

Well, As per your requiremnt It seems like you want to achieve similar to this..
where min and max should updated accordingly.
Solution-
As I am understanding you want to set all value in red below 86%. correct? so why don't you change the min value of the chart. I mean while passing value to chart manipulate your input data accordingly and pass corresponding label to it.
Hoping this will help you :)

Well, High Chart doesn't provide direct method to show selected labels on the axis.
So there is alternative way to achieve this.
Below is the running code for this-
JSFiddle- https://jsfiddle.net/vikash2402/Lxoc4d8r/16/
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'This is custom High Chart'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 80,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 20,
//tickInterval: 1,
tickWidth: 0,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '14px'
}
},
title: {
text: ''
},
plotBands: [{
from: 80,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
try{
var DisplayLabels = [86, 88, 90, 96];
var labels = $(".highcharts-yaxis-labels > text>tspan");
labels.each(function(i, node){
if( DisplayLabels.indexOf(parseInt($(node).text())) == -1){
$(node).hide();
} else{
$(node).text($(node).text() + "%");
}
});
} catch(err){
console.dir(err);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Hoping this will help you :)

Highcharts multiple yaxis plotband collision

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

Is there a way to cap Highchart's Gauge at the max

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
}
}

HighCharts speed o meter query

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.

Highcharts Gauge - how to read input from file?

I currently just started on JS and needed highcharts for a project, so far so good, but I do have a very newbie question:
I have some task doing a cron job and outputing a value range: 10-90 to a file. How can I load the value into the gauge?
Here is the code I adapted (ranges, look and feel dont matter), i only could make a static value 53.8 :
$(function () {
$('#container').highcharts({
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: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
}
);
$('#container').highcharts().series[0].points[0].update(50.8)
});
Here is the jsfiddle link: http://jsfiddle.net/H8uGk/ , can you guys give me a tip how to read the content of a file? (a number in this case)
Is there any way to do it in javascript? It doesn't need to be dynamic , and i was avoiding using php.
Thank you,

The simplest is to just copy/paste it into your js file, which I'm assuming isn't good enough because you want it to be dynamic.
If you need it to be dynamic, you can't do this in javascript, because the javascript runs on the client (ie the web browser), but it needs to read from the server (ie the original machine). So, you have to create an "endpoint" to read the file, check out something simple in php like this:
<?php
// > PHP 5
$file = file_get_contents('./gauge_data.txt', FILE_USE_INCLUDE_PATH);
?>

Develop Reference

JavaScript is the programming language of the Web.

Gauge chart Highchart size of the graph issue - javascript

Related

unequal intervals highchart gauges

Highcharts multiple yaxis plotband collision

Is there a way to cap Highchart's Gauge at the max

HighCharts speed o meter query

Highcharts Gauge - how to read input from file?

Categories

Resources