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
Related
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);
}
});
JSFiddle Example
Can someone explain, why the
xAxis: { //...
events: {
pointBreak: function()...
}
}
does not work ?
See the JSFiddle example.
Thanks!
This looks like a bug, so I reported this case to our developers here: https://github.com/highslide-software/highcharts.com/issues/4533
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 been using editor.plugins.contextmenu.onContextMenu.add to customize the contextmenu plugin in TinyMCE 3.x but cannot use it in version 4.0
Here is the error I receive:
TypeError: a.plugins.contextmenu.onContextMenu is undefined
and my code for plugin is:
tinymce.PluginManager.add("example", function(a,b) {
a.plugins.contextmenu.onContextMenu.add(function(th, menu, event) {
//my code for customizing contextmenu
})
a.addButton("exampleHelp", {
text : "help",
icon : !1,
onclick : function() {
//some code
}
})
});
Does it relate to init function which I had been using in version 3.X?
I was able to reverse engineer a solution by looking at the table plugin code.
tinymce.init({
plugins: "contextmenu",
contextmenu: "link image inserttable | cell row column deletetable | myMenuItem"
});
// Inside plugin
editor.addMenuItem('myMenuItem', {
text: 'My Menu Item',
context: 'div', // not sure what this does
onPostRender: postRender,
onclick: function() { console.log('hi!'); }
});
// Determine whether menu item is visible
function postRender() {
handleDisabledState(this, 'div.myCustomItem');
}
function handleDisabledState(ctrl, selector) {
function bindStateListener() {
ctrl.visible(editor.dom.getParent(editor.selection.getStart(), selector));
editor.selection.selectorChanged(selector, function(state) {
ctrl.visible(state);
});
}
if (editor.initialized)
bindStateListener();
else
editor.on('init', bindStateListener);
}
So the context menu should only render if it's inside a div.myCustomItem element. If you want the context menu item to always be visible, comment out handleDisabledState()
For now I found a temporary solution:
a.on("contextmenu",function(n){
// console.log($(a.getDoc()).find(' .mce-floatpanel.mce-menu'));
// find a way to add it into current context menu instead of deleting it
$(a.getDoc()).find(' .mce-floatpanel.mce-menu').remove();
var i;
var o=[]
o.push({text:'option1'})
o.push({text:'option2'})
o.push({text:'menu option', menu:o})
t=new tinymce.ui.Menu({items:o,context:"contextmenu"}),t.renderTo(document.body)
// fix positioning
var r={x:n.pageX,y:n.pageY};
a.inline||(r=tinymce.DOM.getPos(a.getContentAreaContainer()),
r.x+=n.clientX,r.y+=n.clientY),t.moveTo( r.x,r.y),
a.on("remove",function() {t.remove(),t=null})
})
I remove the default context menu and replace it with my customized menu. But I still need to know how I can add my items to default context menu
I found a solution on how to customise TinyMCE's (4.1.9) contect menu on the fly, see my response and proposed solution on this page: http://archive.tinymce.com/forum/viewtopic.php?pid=116109#p116109
Thanks,
Nic
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
}
}
}
}