Context menu

Webix JS
1

Can the context menu be used with the chart component?

2

Chart does not listen to “context” events. But you can add oncontext event handling if you define a new view with on_context object based on existent “chart” view. Here is the example

http://webix.com/snippet/7dc5cb56

3

Thanks Maria, that’s really helpful. Whilst we’re on the subject can the left click on a data point or the background of the chart invoke a different context menu as well?

4

You can set “click” event listener for the chart container. Listeners can be set via webix API:

webix.event(node,event,handler);

There you need to call show() method for the content menu you want to show.

I have updated the previous demo to show how to apply this for a chart:

http://webix.com/snippet/c00232ac

5

You’re a star - thank you very much!

6

Is there a list of all the events that can be trapped in the documentation?

7

On looking at this again I’m struggling to see why $mychart1 is referenced when there is no object with that name?

8

webix.event sets handler for native html event, so you can use any html event name here - click, dblclick, mousedown etc.

Each component must have unique id. if you are not providing one, component will generated id automatically. “$mychart1” is such autogenerated id. ( $ + component name + component counter )

It is a bad practice to use autogenerated ids, as they can change when you have multiple components on the page. So in above code snippet it will be better to add id attribute to the chart and use the defined id it for later calls.

9

Hi!

Victor correctly explained “$mychart1” id usage. I did not set an id for the chart in the previous demo. In such cases the library creates an unique id.

Here is the demo with defined chart id:
http://webix.com/snippet/62d8e719

10

I see, my mistake - I took the naming of the second menu a bit too literally. One last thing - I’ve tried to copy your code to trap the right click on the chart background and the left click on the bar but they just get ignored. Which events should I be specifying for these?

11

Actually, I have trapped the right click on the chart with “contextmenu” but the native browser context menu appears as well.

12

… finally, how do I get the chart to automatically scale in height to the parent container?

13

OK, got the height issue sorted but I would be grateful if you could help me with the right click on chart background :slight_smile:

14

You need to set ‘contextmenu’ event listener. The listener can be set via the same approach as “click”. But to block browser menu you need to call preventDefault() for browser event or in case of webix API - webix.html.preventEvent(e) method.

webix.event(chartDiv,"contextmenu",function(e){
	e = e||event;
	var trg = e.target|| e.srcElement;
	if(!trg.tagName || trg.tagName.toLowerCase()!= "area"){
		var pos = webix.html.pos(e);
		$$("cmenu2").show({x:pos.x-2,y:pos.y+10});
	}
	webix.html.preventEvent(e);
});