We Keep Coding

Highcharts click event should apply only on marker point

Highcharts.chart('container', {
title: {
//text: 'Solar Employment Growth by Sector, 2010-2016'
text: false
},
subtitle: {
//text: 'Source: thesolarfoundation.com'
text: false
},
yAxis: {
title: {
text: '$'
}
//,categories: [10,20,30,40,50,60,70,80,90,100]
},
xAxis: {
title: {
text: 'Units'
},
categories: [10, 20, 30]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
/*plotOptions: {
series: {
pointStart: 0
}
},*/
series: [{
lineWidth: 0,
showInLegend: false,
cursor: 'pointer',
point: {
events: {
click: function(e) {
hs.close();
hs.htmlExpand(null, {
pageOrigin: {
x: (e.pageX || e.clientX) - 100,
y: (e.pageY || e.clientY) + 60
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
states: {
hover: {
lineWidthPlus: 0
}
},
name: 'Installation',
data: [12, 40, 42]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle
As per requirement, I have implemented highslide popup. But in some cases, the toggle click event is applying to the outside of the marker points also. the highslide popup should toggle when I click on marker points only. can anyone help me out with this issue?

Add chart type scatter by default it is type line. In line chart hover is due to connecting line, which cause pop up to appear.In scatter chart this does not happen
Highcharts.chart('container', {
chart: {
type: "scatter"
},
title: {
//text: 'Solar Employment Growth by Sector, 2010-2016'
text: false
},
subtitle: {
//text: 'Source: thesolarfoundation.com'
text: false
},
yAxis: {
title: {
text: '$'
}
//,categories: [10,20,30,40,50,60,70,80,90,100]
},
xAxis: {
title: {
text: 'Units'
},
categories: [10, 20, 30]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
/*plotOptions: {
series: {
pointStart: 0
}
},*/
series: [{
lineWidth: 0,
showInLegend: false,
cursor: 'pointer',
point: {
events: {
click: function(e) {
hs.close();
hs.htmlExpand(null, {
pageOrigin: {
x: (e.pageX || e.clientX) - 100,
y: (e.pageY || e.clientY) + 60
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
states: {
hover: {
lineWidthPlus: 0
}
},
name: 'Installation',
data: [12, 40, 42]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

how to pass data to next page in HighCharts?

currently i doing Highchart in ColdFusion. I want to pass my data in Highchart to next page when i click on the x-axis' label. The charts i doing is spiderweb. For a scenario,i have x-axis label like 'Overall','Appt Booking', 'Reception', 'Service Advisor', 'Completion Delivery Process'. When i click on overall, the data in overall axis are pass to next page in the link i going. So anyone can guide me how to do it? I manage to link to the page i want,now i just dunno how to get the data to pass to next page.
Below is my code,TQ.
<cfscript>
categories= ['Overall','Appt Booking', 'Reception', 'Service Advisor', 'Completion Delivery Process'] ;
series = [{
'name': 'Last Month',
'data': [3.775,3.5, 3.9, 4, 3.7],
'pointPlacement': 'on'
}, {
'name': 'MTD',
'data': [ 3.775, 3.7, 3.5, 3.9, 4],
'pointPlacement': 'on'
}, {
'name': 'Target',
'data': [3.725, 3.8,3.5, 3.7, 3.9],
'pointPlacement': 'on',
'url': 'https://www.google.com/'
}];
</cfscript>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<script src="highcharts-more.js"></script>
<script>
$(function () {
var categoryLinks = {
'Overall': 'http://127.0.0.1:8500/highCharts/Spiderweb.cfm?id=1234',
'Appt Booking': 'http://127.0.0.1:8500/highCharts/line.cfm',
'Service Advisor': 'http://127.0.0.1:8500/highCharts/combine.cfm'
};
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -1000
},
pane: {
size: '70%'
},
xAxis: {
categories: <cfoutput>#serializeJson(categories)#</cfoutput>,
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
formatter: function () {
return '<a href="' + categoryLinks[this.value] + '">' +
this.value + '</a>';
}
}
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 3,
endOnTick: true,
showLastLabel: true,
tickPositions: [3,3.5, 4, 4.5, 5],
}],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: <cfoutput>#serializeJson(series)#</cfoutput>
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Try using:
labels: {
formatter: function () {
location.href = categoryLinks[this.value];
}
}
instead of:
return '' + this.value + '';`

How to implement this JSFiddle code to my page?

This is probably a very newbie question but I'm trying to copy (not embed) code from the following Highcharts JSFiddle page: http://jsfiddle.net/3cr2yebq/9/
My page is a basic HTML5 page. I've copied the html-code from the top as well as put the Javascript to my page inside tags. It doesn't seem to work at all. Even tried it in an empty HTML-page and it didn't work.
When I checked my page with a debugger, I got these errors:
highcharts.js:309
Uncaught TypeError: Cannot read property 'addEvent' of undefined
highcharts-more.js:8
Uncaught TypeError: l.getOptions is not a function
solid-gauge.js:9
Uncaught TypeError: a.getOptions is not a function
gauge.php:10
Uncaught ReferenceError: $ is not defined
HTML from the fiddle:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
Here's the Javascript:
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#FFF',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#8dc63f'], // green
[0.5, '#8dc63f'], // yellow
[0.9, '#8dc63f'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Press'
}
},
credits: {
enabled: false
},
series: [{
name: 'Press',
data: [83],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#151515') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">%</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Youtube'
}
},
series: [{
name: 'Youtube',
data: [83],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#151515') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">%</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
});
Thanks in advance for taking your time to look at the issue!

Have you imported JQuery into your site? It looks as though the code needs it. You can add it by putting this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Onto your site. Hope that helps.

Exception in highcharts.js line 167

I did a chart and generally it works pretty good.
If I open my .html file with safari on MAC OX it works well.
If I open the file with Internet Explorer no chart appears. I now start the Debug Mode an I see an exception at highchairs.js line 167:
(I want to upload an image of this, but it says i need at least 10 reputations to post images).
Behind "_legendItemPos," "e=d[0]" ist marked and it says: Property "0" of an undefined or Zero-reference can not be recalled
My .html file looks like this, with 3 JSON Files named: Daten1, Daten2, Daten3
!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="Highcharts\exporting-server\phantomjs\jquery.1.9.1.min.js"></script>
var fullPath = document.getElementById('upload').value;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
alert(filename);
}
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
resetZoomButton: {
position: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: -30
}
}
},
title: {
text: 'Testgraph',
x: -20 //center
},
subtitle: {
text: '3 Datensätze mit 3 Y-Achsen',
x: -20
},
xAxis: {
lineWidth: 1,
//lineColor: Highcharts.getOptions().colors[1],
gridLineWidth: 1,
//gridLineColor: Highcharts.getOptions().colors[1],
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
},
tickPixelInterval: 150,
maxZoom: 60000,
title: {
text: 'Zeit',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
yAxis: [{
lineWidth: 0,
lineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
//gridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 5,
labels:{
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperatur',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
},
{
//gridlineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 5,
gridLineWidth: 1,
labels:{
format: '{value}ml',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Volumen',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
},
{
//gridlineColor: Highcharts.getOptions().colors[1],
//minorGridlineColor: Highcharts.getOptions().colors[1],
minorTickInterval: 50,
labels:{
format: '{value}mbar',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Druck',
style: {
color: Highcharts.getOptions().colors[1]
}
},
minPadding: 0.02,
maxPadding: 0.02
}],
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2)+
this.series.tooltipOptions.valuePrefix;
}
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'center',
layout: 'horizontal',
borderWidth: 1
},
series: [{
name: 'Temperatur',
data: [],
tooltip: {
valuePrefix: '°C'
},
color: Highcharts.getOptions().colors[0]
},
{
name: 'Volumen',
yAxis:1,
data: [],
tooltip: {
valuePrefix: 'ml'
},
color: Highcharts.getOptions().colors[3]
},
{
name: 'Druck',
yAxis:2,
data: [],
tooltip: {
valuePrefix: 'mbar'
},
color: Highcharts.getOptions().colors[2]
}
]
}
$.getJSON("Daten1.json", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
$.getJSON("Daten2.json", function(json) {
options.series[1].data = json;
chart = new Highcharts.Chart(options);
});
$.getJSON("Daten3.json", function(json) {
options.series[2].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="Highcharts\js\highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
</html>
I have no idea what ist not working correct. I have the latest Highcharts Version.
Any hint would be helpful. Thanks for your help, Patrick

The IE / Chrome / FF doens't call ajax locally. So you need to setup your own webserver and run your code.

Add series total to legend in Highcharts

Using Highcharts.js - I want to add the series total to the legend (where it currently says '12345'). I know enough that I need to write a labelFormatter function, but I don't know enough JavaScript to figure out how to sum up the total of each series. Code is below (also live version here: http://jsbin.com/ukabob/8).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: '#E9E7DC',
borderRadius:0,
margin: [0, 150, 30, 0]
},
colors: ['#A74B59', '#46C4B7', '#EDBA70'],
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ['2013', '2014', '2015', '2016', '2017', '2018',
'2019', '2020', '2021', '2022'],
gridLineWidth:1,
gridLineColor: '#FFFFFF',
labels: {
style: {
color: '#000000'
},
formatter: function() {
return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+
this.value +'</div>';
},
y:25
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
tickLength: 30
},
yAxis: {
gridLineWidth:0,
title: {
text: null
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
marker: {
radius: 6,
lineWidth: 2,
lineColor: null, // inherit from series
symbol: 'circle',
states: {
hover: {
fillColor: '#E9E7DC',
lineWidth: 2,
radius:6
}
}
},
states: {
hover: {
lineWidth:4
}
}
}
},
tooltip: {
borderWidth:0,
borderRadius: 0
},
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: 12345)</span>';
}
},
series: [{
name: 'Honeywell',
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});
});

A more generic & dynamic answer:
legend: {
labelFormatter: function() {
var total = 0;
for(var i=this.yData.length; i--;) { total += this.yData[i]; };
return this.name + '- Total: ' + total;
}
}

Figured it out. I added the total to the series, then called it with this.options. See updated code below:
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: ' + this.options.total + ')</span>';
}
},
series: [{
name: 'Honeywell',
total: 9150,
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
total: 10548,
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
total: 9301,
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});