I'm using the small U.S. map in HighMaps and I want each state and it's datalabel to open up a new URL when clicked. I have the state working, but the label does not work.
this is what I tried:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
},
datalabels: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
}
}
},
Please see https://jsfiddle.net/sfjeld/zcsxobfa/12/ for the code.
Use the this.value instead of e.target.point.value:
plotOptions: {
series: {
point: {
events: {
click: function() {
const url = this.value;
window.open(url);
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6gpL57nf/
In your example, you could use:
e.point.properties.hasc
For get the value from the clicked point.
Code:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = "https://www.google.com/search?q=" + e.point.properties.hasc;
window.open(url);
}
}
},
}
},
You can check other values using this path:
console.log(e.point.properties);
The full code is in this forked jsfiddle
Related
i tried add some url on my chart bar so when it click it goes to another page
but i have no idea where i should put the option key. Please give some advice, here's my code
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = 'https://xxxxxxxx.com/ratnik2/chart_month.php?m=' +
this.options.key;
}
}
}
},
column: {
stacking: 'normal',
pointPadding: 0.2,
borderWidth: 0,
dataLabels:
{
enabled:true
}
}
},
series: [ {
name: 'Surat Terbit',
data: [";
$query->execute("select month(tanggal), count(*) as jumlah
from surat where year(tanggal)=year(now())
and tgl_ttd is not null
group by month(tanggal)
order by month(tanggal) asc
");
while ($row = $query->fetch()){
$isi .= $row["jumlah"].",";
}
$isi .="]
name: '',
key: ''
}]
});
Take a look at this demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = 'https://en.wikipedia.org/wiki/' +
this.options.key;
}
}
}
}
},
I am using highchart contextmenu (using: https://blacklabel.github.io/custom_events/js/customEvents.js) and drill down and drill up.
Problem:
When I right click on pie chart we are able to call alert which is in contextmenu. At the same time, when I drill down and drill up then right click on pie chart, contextmenu is not working. In plotoption it's working fine but I do not need it in plotoption.
Code:
chart: {
type: 'pie',
events: {
drillup: function () {
var chart = this;
window['chart'] = chart;
setTimeout(function () {
console.log('drillup',chart.series[0].events);
if (!chart.plotOptions){
chart.plotOptions = {};
}
if (!chart.plotOptions.series) {
chart.plotOptions.series = {};
}
if (!chart.plotOptions.series.events) {
chart.plotOptions.series['events'] = {
contextmenu: function () {
alert('hi33')
}
}
}
/*
plotOptions: {
series: {
events: {
contextmenu: function () {
alert('hi33')
}
},
}
},
*/
console.log('drillup222',chart);
}, 100);
},
drilldown: function (e) {
var chart = this;
window['chart'] = chart;
setTimeout(function () {
if (!chart.series[0].events) {
chart.series[0]['events'] = {
contextmenu: function () {
alert('hi33')
}
}
}
console.log('drilldown',chart.series[0]);
}, 100);
}
}
},
https://jsfiddle.net/k14ajzpo/2/
https://jsfiddle.net/0txqk2cn/1/
The workaround for this issue is to add an event to plotOptions and check if event occurred on main series. Check demo and code posted below.
Code:
chart: {
type: 'pie',
events: {
load: function () {
var chart = this;
chart.series[0].customEventsEnabled = true;
}
}
},
plotOptions: {
series: {
events: {
contextmenu: function() {
var series = this;
if (series.customEventsEnabled || series.drilldownLevel) {
console.log('working');
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/0pLqvmky/
I form charts and a have such series format:
series: {
id : '001',
name: 'name,
data: [],
color: '#fff'
}
In plotOptions I created onClick event:
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer',
allowPointSelect: true,
marker: {
states: {
select: {
enabled: true
}
}
},
point: {
events: {
click: function () {
console.log('!!!!!', this);
}
}
}
}
}
After clock i get object in log. There is all information except id: '001'. How can I get it?
You attached the click event to the point, so this inside the callback refer to the point object. Id is defined in series' options.
You can access it from series.options object:
point: {
events: {
click: function() {
console.log('!!!!!', this.series.options.id);
}
}
}
live example: http://jsfiddle.net/4s3ayhfy/
I have used these options.
exporting: {
enabled: false,
allowHtml:true
}
This is my export function.
export(type: any) {
this.graph.exportChart({ type: type });
}
If you want only on export (add title) then use
Fiddle link
exporting: {
chartOptions: {
chart: {
events: {
load: function() {
var dynamic = document.getElementById('dynamic').value
this.setTitle({
text: dynamic
});
}
}
},
title: {
align: 'right',
}
}
},
I am implementing an animated pie chart in Highcharts where the slices pull out on mouseover and all is good apart from a issue where the on mouseOut I want the slice to return to the 'closed' position.
This is the code for the animation and I have a clearTimeout on mouseOut however this is not returning the slice to the original position.
Is there an easy way of the chart to its original position.
I have a fiddle here...
http://jsfiddle.net/rupertito/Y3wvN/1/
pie: {
allowPointSelect: true,
stickyTracking: false,
point: {
events: {
legendItemClick: function() {
return false;
},
mouseOver: function(event) {
var point = this;
if (!point.selected) {
timeout = setTimeout(function () {
point.firePointEvent('click');
sectors.tooltip.refresh(point);
}, 20);
}
}
}
},
events: {
mouseOut: function() {
clearTimeout(timeout);
},
},
Hope this all makes sense and thanks for any help in advance.
Cheers
Rob
This is bug reported here. It's about not working slice for point. There is also workaround how avoid that issue. And simple example for you with mouseOver/mouseOut: http://jsfiddle.net/GqfU4/8/
function setTranslation(p, slice){
p.sliced = slice;
if(p.sliced){
p.graphic.animate(p.slicedTranslation);
} else {
p.graphic.animate({
translateX: 0,
translateY: 0
});
}
}
And for a pie:
point: {
events: {
mouseOut: function () {
setTranslation(this, false);
},
mouseOver: function() {
setTranslation(this, true);
}
}
},