Highcharts click event should apply only on marker point - javascript

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>

Related

Creating Pie Chart from external JSON not working

I have the following code to generate a pie chart. I am calling an external json file to generate the pie chart.
For some reason. it not generating the pie chart. what am i missing or doing wrong?
Here is my code below:
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
// options.xAxis.categories = json[0]['data'];
// options.series[0] = json[1];
// options.series[1] = json[2];
// chart = new Highcharts.Chart(options);
// debugger
console.log(json);
alert(json);
options.series[0].data = json
chart = new Highcharts.Chart(options);
});
}, 0)
</script>
JSON - pie.json
[{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
Here we are.The pie json data need a transfrom as I show you below:
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{type:"pie"}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
console.log(json);
alert(json);
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
}, 0);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body></html>
pie..json
[{
"name": "Microsoft Internet Explorer",
"y": 56.33
}, {
"name": "Chrome",
"y": 24.03,
"sliced": true,
"selected": true
}, {
"name":"Firefox",
"y": 10.38
}, {
"name":"Safari",
"y": 4.77
}, {
"name":"Opera",
"y": 0.91
}, {
"name": "Proprietary or Undetectable",
"y": 0.2
}]

Highcharts - How to change display data and remove mouseover?

I have a Highcharts pie chart on my page, working fine.
What I would like to do is remove the values displayed on mouseover of the pie and instead display the values statically with dataLabels(?).
I am not that good at JS and have no idea where to start.
See image below for explanation.
$(function() {
$('#total').highcharts({
credits: {
enabled: false
},
data: {
table: document.getElementById('datatable_total'),
switchRowsAndColumns: true,
endRow: 1
},
chart: {
type: 'pie'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -20
}
}
});
});
$(function () {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br>{point.y}</br>',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Europe',
y: 50
}, {
name: 'Africa',
y: 25
}, {
name: 'Australia',
y: 18
}, {
name: 'US',
y: 7
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; 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 + '';`

Cannot get Highcharts to show in 3D with data from mysql database

What do I need to do to make this chart work with 3D options? I have everything connected properly and it shows the charts in 2D just fine.
When I add the options3d like in the example below it throws an error that the identifier is depreciated.
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
Here is what I have tried with no luck, I commented out the 3D portion because that was the only way it worked with my data query:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 75,
marginBottom: 25
//options3d: {
// enabled: true,
//alpha: 15,
//beta: 15,
// depth: 50,
// viewDistance: 25
// }
},
title: {
text: 'Contributions to Filers by Year',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Money Contributed to Filers'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
}
$.getJSON("/charts/data/filers-test.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>
Since no one was able to help me with this, I figured it out on my own with trial and error. Here is the script I used to get the final working result from the server. This produces a nice 3D highchart that can show the data properly. I may need to edit it a few more times before it is actually used...
$(document).ready(function() {
var options = {
// basic chart options
chart: {
height: 350,
renderTo: 'container',
type: 'column',
marginRight: 130,
lang: {
thousandsSep: ','
},
marginBottom: 25,
// 3D initialization, comment out for non-3D columns
options3d: {
enabled: true,
alpha: 0,
beta: 2,
depth: 50,
viewDistance: 25
}
},
// main chart title (TOP)
title: {
text: 'Contributions to Filers',
x: -20 //center
},
// main chart sub-title (TOP)
subtitle: {
text: '',
x: -20
},
// xAxis title
xAxis: {
reversed: true,
title: {
text: 'Election Year'
},
categories: [],
reversed: true
},
// yAxis title
yAxis: {
title: {
text: 'Dollar Amount'
},
// chart options for each plotted point
plotLines: [{
value: 1,
width: 1,
color: '#66837B'
}]
},
// tooltip on hover options
tooltip: {
lang: {
thousandsSep: ','
},
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: 0,
y: 0,
borderWidth: 0,
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#F2C45A'
}
},
series: {
text: 'Total Dollar Amount',
color: '#66837B',
cursor: 'pointer'
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#F2C45A'
}
}
},
series: []
}
Highcharts.setOptions({
// sets comma for thousands separator
lang: {
thousandsSep: ','
}
});
$.getJSON("/charts/data/filers-test.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
chart.legend.allItems[0].update({name:'Total by Election Year'}); ///// LEGEND LABEL CHANGES HERE!
});
});

Highcharts only rendering one div

i was searching for an explaination here in this forum for my problem but couldnt find anything that helps me.
My problem is, that I want to get two solid gauges and one spline shown on my site but i can only see one chart at a time.
Here's my code where i guess the error is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Data</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/highcharts.js"></script>
<script src="../js/highcharts-more.js"></script>
<script src="../js/solid-gauge.js"></script>
<link rel="stylesheet" href="../css/style.css">
<link href='http://fonts.googleapis.com/css?family=Abel|BenchNine|Poiret+One|Ropa+Sans|Ubuntu|Marvel' rel='stylesheet' type='text/css'>
<script>
function target_popup(form){
window.open('','formpopup','width=950,height=400,resizeable,scrollbars');
form.target = 'formpopup';
}
</script>
</head>
<body>
<!-- JS -->
<script>
$(document).ready(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) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
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,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The first gauge
$('#yearlykm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 13392,
title: {
text: 'Distance for 2015'
}
},
credits: {
enabled: true
},
series: [{
name: 'Distance for 2015',
data: [<?php include("../data/db_car.php");
$sql = "SELECT sum(km) as SUMKM FROM tbl_data";
$result = mysql_query($sql);
while ($line = mysql_fetch_array($result))
{
echo $line[SUMKM];
}
?>
],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">total km</span></div>'
},
tooltip: {
valueSuffix: ' total km '
}
}]
}));
// The second gauge
$('#totalkm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 80000,
title: {
text: 'Total Distance'
}
},
series: [{
name: 'Total Distance',
data: [<?php include("../data/db_car.php");
$sql2 = "SELECT sum(liters) as SUMLITERS FROM tbl_data";
$result2= mysql_query($sql2);
while ($line2 = mysql_fetch_array($result2))
{
echo $line2[SUMLITERS];
}
?>
],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">total km</span></div>'
},
tooltip: {
valueSuffix: ' total liters'
}
}]
}));
});
</script>
<!-- JS -->
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'car',
type: 'spline',
marginRight: 0,
marginBottom: 25,
backgroundColor: '#FFFFFF'
},
title: {
text: '',
x: -00 //center
},
xAxis: {
categories: []
},
yAxis: {
title: {
style: {
color: 'white'
},
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#ffff00'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' €';
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'center',
x: 00,
y: -19,
borderWidth: 0,
style: {
fontSize: '10px',
color: '#000000',
}
},
plotOptions: {
spline: {
fillColor: {
linearGradient : {
x1: 1,
y1: 0.1,
x2: 0,
y2: 0.2
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: []
}
$.getJSON("../data/data_car.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<!-- HTML STARTS HERE -->
<div id="header-wrapper">All Car Data</div>
<div id="menu">
Home |
PHP MyAdmin |
All FX Data |
All Travel Data |
Travel Dev |
Car
</div>
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="page-content">
<div id="content">
<br>CHARTS<p>
<div style="width: 600px; height: 200px; margin: 0 auto">
<div id="yearlykm" style="width: 300px; height: 200px;"></div>
<div id="totalkm" style="width: 300px; height: 200px;"></div>
</div><p>
<div id="car" style="width:630px; height: 200px;"></div><p>
</div>
<div id="sidebar">
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Any help or pointer is appreciated!
Thanks in advance!

Categories