i tried to add click event to sankey diagram node.
I found link click event is possible, but not node click event.
is it possible to add click event to node?
In this example you can see how there is a click on point event added to the chart plotOptions, this is one way to add a click to a point.
https://api.highcharts.com/highcharts/series.sankey.point.events
plotOptions: {
series: {
point: {
events: {
click: function() {
let point = this;
console.log('click point', point, 'from', point.from, 'to', point.to);
}
},
}
}
},
Another way is a click on point linked using its id.
https://api.highcharts.com/highcharts/series.sankey.nodes
nodes: [{
id: 'Brazil',
}, {
id: 'Portugal',
events: {
click() {
let series = this.series,
nodes = series.nodeLookup;
console.log('click event on node linked by id ', nodes);
}
}
}],
Demo: https://jsfiddle.net/BlackLabel/jw8skp1z/
Related
I'm using Vue apexcharts and whenever I click on a Pie chart I have this:
options: {
chart: {
events: {
click:
(event: any, chartContext: any, config: any) => {
console.log('Clicked', chartContext);
console.log('Event', event);
console.log('Config', config);
}
},
},
In the console, config.seriesIndex and config.dataPointIndex are always -1 - How do I get the value of the pie slice I clicked on? Index/label/whatever??
To get a reference to a pie slice clicked on you'll want to use the dataPointSelection function instead. This allows you to get the config.seriesIndex and config.dataPointIndex in the way which you've tried.
options: {
chart: {
events: {
dataPointSelection:
(event, chartContext, config) => {
console.log('seriesIndex', config.seriesIndex);
console.log('dataPointIndex', config.dataPointIndex);
}
},
},
},
The click function fires when a user clicks anywhere on the chart and is not intended to be used to extract data about user interaction with specific data points.
As seen in the image below, I’d like to remove the option to cancel a drawing. Here’s my code:
With that code you can remove the "cancel" button on all shapes:
L.DrawToolbar.prototype.getActions = function (handler) {
return [
{
enabled: handler.completeShape,
title: L.drawLocal.draw.toolbar.finish.title,
text: L.drawLocal.draw.toolbar.finish.text,
callback: handler.completeShape,
context: handler
},
{
enabled: handler.deleteLastVertex,
title: L.drawLocal.draw.toolbar.undo.title,
text: L.drawLocal.draw.toolbar.undo.text,
callback: handler.deleteLastVertex,
context: handler
}
];
}
Original code: Doc
Also you can allow the cancel button for handlers when you add a if and test if the correct handler is passed.
PS: For a newer "leaflet-draw" you can use Leaflet-Geoman
I have the following JS code...
data: [
{
name: 'Active',
y: 20,
events: {
//onClick:
click: function (event) {
LoadTable(tableData, event);
}
},
drilldown: 'Active'
}
]
But the event does not fire up if the drilldown is there... Is that by design? I need to have the drilldown so I can load the Active data on the chart but I need to also call the LoadTable function first...
I tried to put an alert("test") but not even that worked....
Any idea?
Thanks!
Use the drilldown event.
events: {
drilldown: function (e) {
alert("drillDown Event");
See fiddle here
I just started using Highcharts and I need to capture an event when the user hovers over a slice of the pie and also to get contextual information about that slice. Is there an event for that? I haven't been able to find one in the documentation.
plotOptions.series allows events.mouseOver and events.mouseOut handlers to be added, a la:
$('#container').highcharts({
...
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$reporting.html('x: ' + this.x + ', y: ' + this.y);
}
}
},
events: {
mouseOut: function () {
$reporting.empty();
}
}
}
},
...
});
Demo
I have an issue with the next code block:
run: function(e, row){
var me = this;
var container = Ext.getCmp('centercontainer');
try {
container.removeAll();
} catch(e) { }
// This block is called from another file, I just put it here to show you.
me.panels = [{
xtype: 'tabpanel',
id: 'containertabpanel',
items: [{
itemId: 'package',
title: me.PackageTitle
},{
itemId: 'excursion',
title: me.ExcursionTitle
}]
}];
// Reset
container.setTitle(me.EditDestinationTitle + row.data.name);
container.add(me.panels);
me.tabs = container.getComponent('containertabpanel');
// console.log(Ext.ComponentQuery.query('#containertabpanel > #package'))
me.control({
// Work with
// 'tab': {
// Doesn't work
'containertabpanel > package': {
mouseover: me.doPackage
}
})
},
Anyone knows how do I get to catch the click event of "package" item of tabpanel component?
I saw when I use just "tab" selector on this.control query, that work, but I can't get only "package" tab component.
Thank you in advance.
In your definition of your tabpanel you can specify -
listeners:{
click:{
fn: function(){
//click handling code goes here
}
}
}
If I understood correctly this is controller code and you are trying to catch an item click on the panel which is one of many in a tabpanel
What you can do is identify your panel by any property that is unique to it via the component query syntax like this: button[myprop=blah]
This syntax will match any buttons on the page with the following config:
{
xtype:'button'
myprop:'blah'
}
In your case you can try tab[itemId=package]
What you also need to be careful about is controller can listening only for events that are fired by the components. Make sure the event you are listening for is fired (check the docs). You can always fire custom events if necessary.
You need to do this
me.control({
// Work with
// 'tab': {
// Doesn't work
'containertabpanel > #package': {
mouseover: me.doPackage
}
})