I'm trying to pass data from Series Point on Click
I have 2 examples first one is not working, that what i'd like to use.
But second one is working.
[{"name":"Unknown","data":38.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"0"},"selected":0},{"name":"Resolved","data":15.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"-99"},"selected":0},{"name":"Open","data":255.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"2"},"selected":0}]
Here's jsFiddle
I'm not sure if it's because of the latest Highcharts but the chosen answer doesn't work for me. For Highcharts v3.0.6 I got the right information from the following:
series: {
cursor: 'pointer',
events: {
click: function (ev) {
console.log(ev.point.options.id);
}
}
}
Hope the helps!
In your first example you are passing an array of series objects to options.series. In the second you are passing an array of point objects to the first series. The "this" in the click callback is the point object getting clicked on. In the first, your custom option is stored in the series object, and not that point.
What you need in the first is (fiddle here):
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert(this.series.options.DrillDown.Callback); // get the series for the point
}
}
}
}
Related
Regarding HighChart's cluster module:
I'm trying to figure out how to properly distinguish between a user clicking on an individual point versus clicking on a "cluster" of points. I've tried plotOptions.series.point.events.click as well as plotOptions.scatter.events.click.
I've found some other posts that recommend using the click(event)'s event.point.isCluster field, but during my testing I've observed that for clusters, event.point.isCluster is null and for points it isn't present in the event object at all.
So does this mean I should just check for isCluster's existence only via event.point.hasOwnProperty('isCluster'), such as like this?:
{
...,
plotOptions: {
scatter: {
events: {
click: function(e) {
if (!e.point.hasOwnProperty('isCluster')) {
alert('A point was clicked! Do stuff.');
}
}
}
}
},
...
im searching an example for using the exportData event in Highcharts
https://api.highcharts.com/highcharts/chart.events.exportData
I do not find any example, can someone help me?
You need to add exporting and export-data modules and click for example 'View data table' in the context menu:
chart: {
events: {
exportData: function() {
alert('export data!');
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/50vx6ad8/
Docs: https://www.highcharts.com/docs/export-module/export-module-overview
In high chart there is an event for clicking on the bar. But bar is small in height it is impossible to click on it. Hence I want the event in high chart for further processing.
E.g. I want the event for month name in following example.
Thanks In advance.
If you don't want to use JQuery you can use it as follows
chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
label.style.cursor = "pointer";
label.onclick = function(){
alert('You clicked on '+this.textContent);
}
});
complete code at http://jsfiddle.net/t07ok5v3/5/
Alternate solution, maintained since Highcharts v3 is to use Custom Events plugin. Plugin adds a lot of new event, natively not supported by Highcharts.
Demo: https://jsfiddle.net/BlackLabel/Utx8g/963/
Events are added the same way as official events in Highcharts, and we don't need to re-inspect every release the DOM:
xAxis: {
labels: {
events: {
click: function () { ... }
}
}
}
I get Error: Object doesn't support property or method 'forEach' when running the solution from Malay Sarkar in Internet Explorer. Here's a workaround I used which works in both Chrome and IE.
for (let i = 0; chart.xAxis[0].labelGroup.element.childNodes.length; i++)
{
chart.xAxis[0].labelGroup.element.childNodes[i].onclick = function(){
alert('You clicked on '+this.textContent);
}
});
I'm trying to get the click and mouseOver handlers to work with Highmaps. I've checked the docs and tried to follow their examples. I inserted the event handler configs just about everywhere where I think it makes sense.
The wanted result is that the click and mouseOver handlers get called when hovering and clicking on the labels (pin icons) in the map.
Fiddle with my non-working code:
http://jsfiddle.net/fyp86hct/1/
One of the Highmaps examples shows that you should be able to do this:
point:
{
events:
{
click: function ()
{
alert("this doesn't work"); // <-- non working event handler
},
mouseOver: function()
{
alert("this doesn't work"); // <-- non working event handler
}
}
}
Unfortunately it is not supported, but you can add shape by renderer and then attach click event.
I have a problem that I can't seem to figure out. I'm trying to have a droppable element conditionally fire a different function based on the class of the item dropped. For the life of me I can't figure out how to do this. Here's the link: http://jsfiddle.net/643PC/22/
The pageContainer accepts Rows. Rows accept Spans. Spans should accept Actions and Fields and fire a different function based on which item is dropped. Any ideas?
Finished function with David's help:
function generalDrop(event, ui) {
var appendTarget = $(this);
if (ui.draggable.hasClass('field-item')) {
fieldDrop(event, ui, appendTarget);
}
else {
actionDrop(event, ui, appendTarget);
}
}
function actionDrop(event, ui, appendTarget) {
$(document.createElement('a'))
.addClass('btn btn-primary')
.attr('href', '#')
.text('Button')
.appendTo(appendTarget)
}
Change your generalDrop function to this:
function generalDrop(event, ui) {
if (ui.draggable.hasClass('field-item')) {
fieldDrop(event, ui);
}
else {
actionDrop(event, ui);
}
}