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/
Related
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
I have a map and want to detect whenever it is zoomed or panned by the user. I understand that best way to do this would seem to be with the afterSetExtremes event.
I'm using buttons to zoom but the user can double click to zoom in too and pan.
The event doesn't seem to fire though but I'm not sure what I'm doing wrong or if there is another event I should be using to achieve this. Here's a JSFiddle which is based on one of the Highmaps demos, just with the event added:
https://jsfiddle.net/nbymstxe/
What am I doing wrong?
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/world-population-density.json', function (data) {
// Prevent logarithmic errors in color calulcation
data.forEach(function (p) {
p.value = (p.value < 1 ? 1 : p.value);
});
// Initialize the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world'
},
title: {
text: 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
xAxis: {
events: {
afterSetExtremes() {
console.log("Extremes set");
}
},
},
series: [{
data: data,
joinBy: ['iso-a3', 'code3'],
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
I think that you can use the render callback to detect when user has zoomed or panned the chart.
events: {
render() {
console.log(this.mapView)
}
}
Demo: https://jsfiddle.net/BlackLabel/zpn5goaj/
API: https://api.highcharts.com/highcharts/chart.events.render
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 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 have a problem with click events on heatmaps: it works only if you click on a tooltip, but not on the chart itself. See the demo http://jsfiddle.net/3UWaA/1/
chart: {
type: 'heatmap',
events: {
click: function(event) {
alert("clicked!");
}
}
}
Any suggestions how to fix this?
Thanks
Add the events into a plotOptions object.
Like this:
plotOptions: {
series: {
events: {
click: function (event) {
alert('event!');
}
}
}
},
Demo: http://jsfiddle.net/robschmuecker/3UWaA/3/
Because click event on chart, works in the plotArea, not on the serie. Heatmap serie overlap plotArea, so click event doesnt work. You need to catch plotOptions event on serie / point.
Try inserting the EVENTS: under series block and disable the tooltip as below:
series:
[
{ name: 'Passed',
borderWidth: '1',
borderColor: '#000000',
cursor: 'pointer',
events:
{
click: function ()
{
alert('wow');
}
},
color:'green',
data: [[0, 1, ''],[0, 2, ''],[0, 3, '']],
dataLabels:
{
enabled: 'true',
color: '#000000'
}
}
]
So when you click the chart itself,click event will work fine.