Show More Calibration Chart Data With Highcharts
I am drawing a Canvas diagram manually like this:
However, canvas is not IE8 compatible.
Now I would like to use HighCharts. I found a similar diagram in
jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
How can I show additional values (in the example: 76.38 and 93) and draw out the needle as well?
UPDATE:
Basically, Kacper's answer solves the original problem. I just want to improve the diagram with a better representation. Needle and extra point lines like this.
And I can detect the colors when the current value reaches a new point. For example: [0, 76.38] red, [76.38, 93] green, [93, 95] green.
Please teach me more.
source to share
You are trying to use the features of two Highcharts chart charts - solidgauge and gauge .
You can put both of them in one chart and set the same (or nearly the same) values for both series.
Example: http://jsfiddle.net/2L1bmhb5/
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#ccc',
borderWidth: 0,
shape: 'arc',
innerRadius: '60%',
outerRadius: '95%'
}
},
yAxis: {
stops: [
[1, '#f00'] // red
],
min: 0,
max: 95,
minorTickLength: 0,
lineWidth: 0,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 5,
tickColor: '#666',
tickPositions: [0, 72, 82.68, 95],
labels: {
distance: 10
}
},
series: [{
type: 'gauge',
data: [14],
pivot: {
radius: 0
},
dataLabels: {
y: -5,
borderWidth: 0,
style: {
fontSize: '20px'
}
},
dial: {
radius: '85%',
backgroundColor: 'red',
borderWidth: 0,
baseWidth: 3,
topWidth: 3,
baseLength: '100%', // of radius
rearLength: '0%'
}
}, {
type: 'solidgauge',
fillColor: 'red',
data: [14.5],
radius: '95%'
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
point2 = chart.series[1].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 95) {
newVal = point.y - inc;
}
point.update(newVal, false);
point2.update(newVal + 0.5);
}, 3000);
}
});
});
UPDATE:
- The colors are free to change if you install yAxis stops. API: http://api.highcharts.com/highcharts#yAxis.stops
The scale stops if 0-1, so if you want the colors to be based on the axis values - scale them.
stops: [
[0, '#ff0000'], // red
[76.38/95, '#00ff00'], // green
[93/95, '#0000ff'] // blue
],
Another way would be to use yAxis minColor and maxColor to change colors. In this case, the axis must be updated, and the series must be additionally linked to the axes.
http://jsfiddle.net/2L1bmhb5/2/
...
if (newVal < 76.38) {
color = col[0];
} else if (newVal < 93) {
color = col[1];
} else {
color = col[2];
}
chart.yAxis[0].update({
stops: [
[1, color]
]
},false);
point.update(newVal, false);
point2.update(newVal, false);
chart.series[1].bindAxes(); //solidgauge series
chart.redraw(true);
- Needle (aka dial) and vault can be written using the options described in the API.
http://api.highcharts.com/highcharts#series.pivot
http://api.highcharts.com/highcharts#series.dial
pivot: {
backgroundColor: "#fff",
borderColor: "#666",
borderWidth: 5,
radius: 6
},
dial: {
radius: '100%',
backgroundColor: '#666',
borderWidth: 0,
baseWidth: 5,
topWidth: 5,
baseLength: '100%', // of radius
rearLength: '0%'
}
http://jsfiddle.net/2L1bmhb5/3/
-
The additional point lines are the y-axis. You cannot use the default options to change the visibility of selected lines or their dash style. One way would be to change their style on load and after each redraw.
function styleTickLines() { var paths = $('.highcharts-axis > path').splice(0), len = paths.length; // hide first and last paths[0].setAttribute('opacity', 0); paths[len - 1].setAttribute('opacity', 0); // style the rest for (var i = 1; i < len - 1; i++) { paths[i].setAttribute('stroke-dasharray', '3,3'); } }
http://jsfiddle.net/2L1bmhb5/4/
Another way would be to write a Highcharts wrapper that would change the default behavior and include a setting style for each tick selected.
- At this point, you may notice that the tick lines are covered with a series. If you want to avoid this, set the zIndex for yAxis, eg. 7
Final example: http://jsfiddle.net/2L1bmhb5/6/
$(function () {
var col = ['#ff0000', '#00ff00', '#0000ff'],
color;
function styleTickLines() {
var paths = $('.highcharts-axis > path').splice(0),
len = paths.length;
// hide first and last
paths[0].setAttribute('opacity', 0);
paths[len - 1].setAttribute('opacity', 0);
// style the rest
for (var i = 1; i < len - 1; i++) {
paths[i].setAttribute('stroke-dasharray', '3,3');
}
}
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
events: {
load: styleTickLines,
redraw: styleTickLines
}
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#ccc',
borderWidth: 0,
shape: 'arc',
innerRadius: '60%',
outerRadius: '100%'
}
},
yAxis: {
zIndex: 7,
stops: [
[1, '#ff0000']
],
min: 0,
max: 95,
minorTickLength: 0,
lineWidth: 0,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 46,
tickColor: '#666',
tickPositions: [0, 76.38, 93, 95],
labels: {
distance: 20
}
},
series: [{
type: 'solidgauge',
fillColor: 'red',
data: [72],
radius: '100%',
dataLabels: {
y: 10,
borderWidth: 0,
style: {
fontSize: '20px'
}
}
}, {
type: 'gauge',
data: [72],
pivot: {
backgroundColor: "#fff",
borderColor: "#666",
borderWidth: 5,
radius: 6
},
dataLabels: {
enabled: false
},
dial: {
radius: '105%',
backgroundColor: '#666',
borderWidth: 0,
baseWidth: 5,
topWidth: 5,
baseLength: '100%', // of radius
rearLength: '0%'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
point2 = chart.series[1].points[0],
newVal,
inc = Math.round((Math.random()) * 10);
newVal = point.y + inc;
if (newVal < 0 || newVal > 95) {
newVal = point.y - inc;
}
if (newVal < 76.38) {
color = col[0];
} else if (newVal < 93) {
color = col[1];
} else {
color = col[2];
}
chart.yAxis[0].update({
stops: [
[1, color]
]
}, false);
point.update(newVal, false);
point2.update(newVal, false);
chart.series[0].bindAxes();
chart.redraw(true);
}, 3000);
}
});
});
source to share