Skip to content

July 8, 2011

Create Context Menu on Highcharts graph with ExtJS 3

by Joe Kuan

Since I released the changes for the Highcharts context menu mod, I received a few requests for a proper working example. So I have included an ExtJS 3 example file in my github Highcharts_ContextMenu. Check it out.

Creating ExtJS context menu over a point in Highcharts

The following is the main ExtJS code to get the context menu displayed. First, line 4 – 6 is to disable the browser’s default context menu. The function ctxMenu is called by the modified Highcharts which fires a contextmenu event with a right mouse click. There is a lot of fields inside the Highcharts point object but the example code below should give you a start.

By examining the properties of the point object inside ctxMenu, you can construct & display different menus on the fly.

Ext.onReady(function() {

  // Disable browser default context menu
  $(document).bind("contextmenu",function(e){
       return false;
  });

  // Main routine for creating and display context menu for the point data
  var ctxMenu = function(point) {

    // Position of the cursor right click
    var pos = [ point.clientX, point.clientY ];

    var menu = new Ext.menu.Menu({
      items: [
        { text: 'Menu 1',
          scope: point,
          handler: function() {
            // Values of the serie's selected point
            var x_val = this.point.category;
            var y_val = this.point.y;
            var msg = "Selected series name: " +
                      this.point.series.name + "<BR/>";
            msg += "Selected point x val: " + x_val +
                   " (" + Highcharts.dateFormat('%d %b', x_val) +
                   "), y val: " + y_val + "<BR/>";
            Ext.Msg.alert('Info', msg);
            menu.destroy();
          }
        },
        { text: 'Menu 2' }
      ]
    });

    menu.showAt(pos);
  };

Then the last step is to bind the Highcharts’s contextmenu event to ctxMenu. This is the same as how you bind the click event in Highcharts. See events for more details.

 plotOptions: {
    series: {
      allowPointSelect: true,
        events: {
          contextmenu: ctxMenu
        }
    },
    .....

Screenshots

Here is a screenshot of right click context menu

Here is a screenshot of clicking the first menu and displaying the selected point value.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: