In HighStock, I'd like to use the built-in StockTools toolbar for marking up the chart, but remove some of the tools that aren't needed. I'd like to avoid building a custom toolbar (as described in their docs).
I've tried variations on adjustments to
stockTools:{ gui: { buttons: {...} } }
and
stockTools:{ gui: { definitions: {...} } }
but nothing seems to hide items.
The best option I have at the moment is using CSS to hide various toolbar items but if there's a javascript-configuration option, that would be preferable.
You tried an object but stockTools.gui.buttons is an array - Documentation
stockTools: {
gui: {
buttons: ['indicators', 'separator', 'simpleShapes']
}
},
Fiddle
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);
}
});
I would like to hide specific menu items from the HighCharts context menu. Can someone point me to an example of how to do that.
Thanks.
exporting.buttons.contextButton.menuItems - this is a property in which you define items for the exporting menu.
Highcharts.defaultOptions.buttons.contextButtons.menuItems is an array with predefined menu items, so you copy and modify it.
exporting: {
buttons: {
contextButton: {
menuItems: Highcharts.defaultOptions.exporting.buttons.contextButton.menuItems.slice(4,5)
}
}
}
example: http://jsfiddle.net/ta9mtap1/
See API Docs - Menu Items.
I have searched the web for the past hour for a solution. I want to achieve the following hover-behavior on iOS.
1st tap -> hover on
2nd tap -> hover off
This will mainly be used to present images.
Because of the CSS tag I assume you want to do this in HTML.
This is almost impossible to do without javascript. You could add a click event handler that toggles the .hover class. For example (untested code, don't copy-paste ;)
element.addEventListener('click', function(evt) {
if (this.className == 'hover') {
this.className = 'hover';
} else {
this.className = '';
}
});
If you have other classes on the document it's probably easier to use a JS framework, e.g. jQuery (again untested):
jQuery(element).click(function(evt) {
jQuery(this).toggleClass('hover');
});
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 have a toolbarbutton and I want it to toggle a toolbox > toolbar when it is clicked. I thought there might be an internal function similar to toggleSidebar(id) but I cannot find it.
Well there is no function, however there is a simple solution for anyone looking for it.
First on the toolbarbutton add the following attribute:
oncommand="extName.toggleToolbar(event);"
then in the javascript:
toggleToolbar: function(e) {
var toolbar = document.getElementById('uniqueName-toolbar');
if(toolbar.getAttribute('hidden')== 'true'){
toolbar.setAttribute('hidden', false);
}
else{
toolbar.setAttribute('hidden', true);
}
}