HighCharts :(Solid Gauge) How to generate gauge dial with an arrow end.

HighCharts :(Solid Gauge) How to generate gauge dial with an arrow end. - javascript

I am trying to create a custom data dial using high charts ( solid gauge ).
Please help me .
I am unable to generate an arrow end like tip dial of solid gauge. This is my current chart :
Updated Code : Please copy paste the code in the fiddle link provided below:
$(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge',
height: 80,
width: 120,
backgroundColor: null
},
title: null,
pane: {
center: ['50%', '60%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
},
gauge: {
dial: {
baseWidth: 1,
topWidth: 1
},
pivot: {
radius: 3,
borderWidth: 1
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
tickPositions: [],
plotBands: [{ // mark the weekend
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.2, '#DDDF0D'], // yellow
[0.3, '#DF5353']
]
},
from: 0,
to: 5,
innerRadius: '60%',
outerRadius: '100%',
}],
},
series: [{
name: 'Ship Average',
type: 'gauge',
data: [2],
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.25, '#DDDF0D'], // yellow
[0.4, '#DF5353']
]
},
dataLabels: {
format: '<span style="font-size:10px;color:grey;">{y} delays</span></div>',
y: 30,
borderWidth: 0
},
tooltip: {
valueSuffix: ' days'
}
}]
}));
});
http://jsfiddle.net/n9gfeor2/29/
Expected result :

You can realize it by wrapping dial method (translate) and edit path.
point.shapeArgs = {
d: dialOptions.path || [
'M', -rearLength, -baseWidth / 2,
'L',
baseLength, -baseWidth / 2,
radius, -topWidth / 2,
radius - 10, -topWidth / 2 - 10,
'M',
radius, -topWidth / 2,
'L',
radius - 10, -topWidth / 2 + 10,
'M',
radius, -topWidth / 2,
baseLength, baseWidth / 2, -rearLength, baseWidth / 2,
'z'
],
Simple demo:
http://jsfiddle.net/L488w1as/

Related

Highcharts gauge chart size

I've been trying to make the gauge thinner. I succeeded a little by making the innerRadius 90%, but I'm unable to change the size of the green section. It's always bigger. I tried playing around with 'outerRadius' too but lo luck so far.
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['30%', '85%'],
size: '150%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '110%',
outerRadius: '85%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [20],
dataLabels: {
format: '<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>'
}
}]
}));
Here's a fiddle. I'm basically trying to make the green match the grey.

The size of the green section can be set by add properties radius and innerRadius in series.data.
In your case, it should be:
series: [{
name: 'Speed',
data: [{
y: 20,
radius: 90,
innerRadius: 105
}],
dataLabels: {...}
}]
more info here

You can also set radius and innerRadius properties on a series level:
series: [{
radius: 90,
innerRadius: 105,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/fwumc7db/
API Reference:
https://api.highcharts.com/highcharts/series.solidgauge.innerRadius
https://api.highcharts.com/highcharts/series.solidgauge.radius

Highcharts - 2 synchronized activity gauges

I am starting from this Highcharts activity gauge and trying to have two of them, aligned horizontally (similar to this other example) and synchronised.
I started modifying the code from the 1st example, based on the 2nd example, and so far I am unsuccessful, the 2nd chart doesn't even display successfully.
What I am doing wrong?
My code, also in JSFiddle:
function renderIcons() {
// Move icon
if (!this.series[0].icon) {
this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[0].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
(this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
);
// Exercise icon
if (!this.series[1].icon) {
this.series[1].icon = this.renderer.path(
['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
'M', 8, -8, 'L', 16, 0, 8, 8
]
)
.attr({
'stroke': '#ffffff',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[1].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
(this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
);
// Stand icon
if (!this.series[2].icon) {
this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[2].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
(this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
);
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
//height: 200,
height: '50%',
events: {
render: renderIcons
}
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function(labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: [{
startAngle: 0,
endAngle: 360,
center: ['25%', '50%'],
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
{
startAngle: 0,
endAngle: 360,
center: ['75%', '50%'],
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
}
],
yAxis: [{
min: 0,
max: 100,
lineWidth: 0,
pane: 0,
tickPositions: []
},
{
min: 0,
max: 100,
lineWidth: 0,
pane: 1,
tickPositions: []
}
],
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
yAxis: 0,
pane: 0,
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
yAxis: 0,
pane: 0,
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
yAxis: 0,
pane: 0,
y: 50
}]
},
{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
yAxis: 1,
pane: 1,
y: 75
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
yAxis: 1,
pane: 1,
y: 60
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
yAxis: 1,
pane: 1,
y: 45
}]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="width: 800px; height: 300px; margin: 0 auto"></div>

The problem in your example is that you don't have separate charts but one chart with two yAxis. Check Highcharts synchronized charts example here: jsfiddle. Notice, that each chart is separate and inserted into separate div container.
So firstly create two solidgauge type charts and align them horizontally. Then add mousemove trigger on a container div element that contains your charts. Highcharts wrap all browser events and when you hover over charts series you have information about a hovered chart, series etc.
Use hovered series index to invoke onMouseOver() method on proper series in both charts and refresh tooltip with the point from hovered series:
HTML:
<div id="container">
<div id="container1"></div>
<div id="container2"></div>
</div>
JS:
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
document.getElementById('container').addEventListener(
eventType,
function(e) {
var chart,
point,
i,
seriesIndex,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e);
if (event.srcElement.point) {
seriesIndex = event.srcElement.point.series.index;
}
if (chart.series[seriesIndex]) {
point = chart.series[seriesIndex].points[0];
chart.series[seriesIndex].onMouseOver();
chart.tooltip.refresh(point);
}
}
}
);
});
Notice, Highcharts.charts contains all charts reference.
Demo:
https://jsfiddle.net/wchmiel/ce01y63s/
Api reference:
Highcharts.Series.onMouseOver
Highcharts.charts

Highchart Activity Gauge always display text in the center

I want to use Highchart's activity gauge as some kind of circle animation surrounding a number/ figure in text form. The default behaviour is the text in the center of the chart will be displayed only if the user hovered over the series.
There is an existing solution by Mustapha here: http://jsfiddle.net/mushigh/ubb2wz72/
$(function () {
// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'black'
},
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
// */
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}]
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}]
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
/**
* In the chart load callback, add icons on top of the circular shapes
*/
function callback() {
// Move icon
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.translate(190, 26)
.add(this.series[2].group);
// Exercise icon
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.translate(190, 61)
.add(this.series[2].group);
// Stand icon
this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.translate(190, 96)
.add(this.series[2].group);
});
var chart = $('#container').highcharts(),
point = chart.series[0].points[0];
point.onMouseOver(); // Show the hover marker
chart.tooltip.refresh(point); // Show the tooltip
chart.tooltip.hide = function () {};
});
But the problem is if I remove 2 out of the 3 default series (leaving only 1), this solution does not work anymore. This is my fiddle: https://jsfiddle.net/v21zefzs/
$(function () {
// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'black'
},
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
// */
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}]
}]
},
/**
* In the chart load callback, add icons on top of the circular shapes
*/
function callback() {
// Exercise icon
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.translate(190, 61)
.add(this.series[2].group);
});
var chart = $('#container').highcharts(),
point = chart.series[0].points[0];
point.onMouseOver(); // Show the hover marker
chart.tooltip.refresh(point); // Show the tooltip
chart.tooltip.hide = function () {};
});

You have the error in the console. You should fix the code responsible for rendering arrows.
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.translate(190, 61)
.add(this.series[0].group); //it tried add path to a non-existing 3rd series
example: https://jsfiddle.net/v21zefzs/1/

Gauge chart with steps of colors

How can I achieve this using highcarts? tired using stops:[...] but it will not work as above image.
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'customers',
data: [{
color: {
//
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0},
stops: [
[0.1, '#009a60'],
[0.2, '#4aa84e'],
[0.3, '#92b73a'],
[0.4, '#c6bf22'],
[0.5, '#edbd02'],
[0.6, '#ffad00'],
[0.7, '#ff8c00'],
[0.8, '#fc6114'],
[0.9, '#f43021'],
[1.0, '#ed0022']
]
},
y:76
}],
dataLabels: {
format: '<div class="prc" style="text-align:center;"><span style="font-weight:normal; font-family:Helvetica Neue, Helvetica, Arial; font-size:52px;' +
'#333' + '">{y}</span>'
}
}]

One way of getting this char could be to use axis line and ticks to cover a chart to create white spaces. Next you could add more points and set stops with a color format that is not supported for a gradient - like hex color format with 3 digits ("#rgb").
Demo: http://jsfiddle.net/bsdtsmyb/
$(function() {
var rawData = 94,
data = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 10) {
data.push({
y: i
});
}
return data;
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 10
},
title: {
text: ''
},
subtitle: {
text: rawData,
style: {
'font-size': '60px'
},
y: 200,
zIndex: 7
},
tooltip: {
enabled: false
},
pane: [{
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '80%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '120%',
center: ['50%', '65%']
}, {
startAngle: -120,
endAngle: 120,
size: '95%',
center: ['50%', '65%'],
background: []
}],
yAxis: [{
min: 0,
max: 100,
lineWidth: 2,
lineColor: 'white',
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: 'white',
zIndex: 6,
stops: [
[0, '#fff'],
[0.101, '#0f0'],
[0.201, '#2d0'],
[0.301, '#4b0'],
[0.401, '#690'],
[0.501, '#870'],
[0.601, '#a50'],
[0.701, '#c30'],
[0.801, '#e10'],
[0.901, '#f03'],
[1, '#f06']
]
}, {
linkedTo: 0,
pane: 1,
lineWidth: 5,
lineColor: 'white',
tickPositions: [],
zIndex: 6
}],
series: [{
animation: false,
dataLabels: {
enabled: false
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '80%',
data: data
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="height: 300px;">
</div>

Even this is the old question, I hope the below demo will helpful for the new users:
Demo

HighCharts JS Ajax Data Guage

Could someone please assist me on modifying the code from HighCharts Angular Gauge demo to load data from a comma-separated values file?
The comma-separated values column should be specifiable. i.e: data[0], data[1], data[2]
$(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'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
An Example of comma-separated values data being loaded into Highcharts Demo - Ajax loaded data, clickable points.
$(function () {
// Register a parser for the American date format used by Google
Highcharts.Data.prototype.dateFormats['m/d/Y'] = {
regex: '^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$',
parser: function (match) {
return Date.UTC(+('20' + match[3]), match[1] - 1, +match[2]);
}
};
// Get the CSV and create the chart
$.get('/samples/highcharts/demo/line-ajax/analytics.csv', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
type: 'datetime',
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
Many Thanks,

First of all I see that you have empty series.data which doesn't exists. In case when you download data by ajax, you push your data to series or use i.e setData() / addPoint() functions. All of them are documented here: http://api.highcharts.com/highcharts
I advice to familiar with article about preprocessing data http://docs.highcharts.com/#preprocessing

Develop Reference

JavaScript is the programming language of the Web.

HighCharts :(Solid Gauge) How to generate gauge dial with an arrow end. - javascript

Related

Highcharts gauge chart size

Highcharts - 2 synchronized activity gauges

Highchart Activity Gauge always display text in the center

Gauge chart with steps of colors

HighCharts JS Ajax Data Guage

Categories

Resources