CODEWITHSUNDEEP
extjschartscustomization
Freddo37
Freddo37

Reputation: 11

In ExtJS cant seem to find a way to turn chart axis field label into a hyperlink

I am using ExtJS 4 and have a working horizontal bar chart. In the 'axes:' section I need the field labels to be hyperlinks so when you are looking at the chart, all of the labels on the x axis, and also the bars themselves, would be a link to another webpage that describes more about it.

...
axes: [{
  type: 'Numeric',
  position: 'bottom',
  fields: ['field1', 'field2', 'field3', 'field4'],
  title: 'Percentages',
  grid: true
}, {
  type: 'Category',
  position: 'left',
  fields: ['machineName'],
  title: 'Machine Names'
}],
...

It is that 'fields' section of 'Category' that prints out the names of the machines. By default this field only prints out the name as it gets it from JSON. I have created another variable that attempts to take the machine name and surrounds it with ' + name + ' but that just renders it as text, no clickability. All other searches have come up short. Ive seen some stuff on Themes or LabelLinks but couldnt get any of that to work in my particular setup. Any help would be appreciated.

Upvotes: 1

Views: 1536

Answers (2)

Pablo Borowicz
Pablo Borowicz

Reputation: 921

Here's my solution based on the one by Colombo.

This version allows you to set a handler while declaring your axis. Furthermore, it allows you to retrieve the label index, and only applies the override to Category axes, since we're not interested in clicking on the other types of axes anyway.

The axis declaration:

...
axes: [{
  type: 'Numeric',
  position: 'bottom',
  fields: ['field1', 'field2', 'field3', 'field4'],
  title: 'Percentages',
  grid: true
}, {
  type: 'Category',
  position: 'left',
  fields: ['machineName'],
  title: 'Machine Names',
  handler: function(axis, i, label){
    console.log('Label text: %o',label.text);
    console.log('Label index: %o',i);
    console.log('Axis: %o',axis);
  }
}],
...

The override:

Ext.override(Ext.chart.axis.Category,{
  getOrCreateLabel: function(i, text) {
    var me = this,
        labelGroup = me.labelGroup,
        textLabel = labelGroup.getAt(i),
        surface = me.chart.surface;
    if (textLabel) {
        if (text != textLabel.attr.text) {
            textLabel.setAttributes(Ext.apply({
                text: text
            }, me.label), true);
            textLabel._bbox = textLabel.getBBox();
        }
    }
    else {
        textLabel = surface.add(Ext.apply({
            group: labelGroup,
            type: 'text',
            x: 0,
            y: 0,
            text: text
        }, me.label));
        surface.renderItem(textLabel);
        textLabel._bbox = textLabel.getBBox();
        // add event handler
        if (me.label.handler && typeof(me.label.handler) == 'function') {
          textLabel.on('click',Ext.pass(me.label.handler,[me, i]));
        }
    }
    if (me.label.rotation) {
        textLabel.setAttributes({
            rotation: {
                degrees: 0
            }
        }, true);
        textLabel._ubbox = textLabel.getBBox();
        textLabel.setAttributes(me.label, true);
    } else {
        textLabel._ubbox = textLabel._bbox;
    }
    return textLabel;
  }
});

Note that this was done on ExtJS 4.0.7

Upvotes: 0

jorel
jorel

Reputation: 808

This is how I did it. You can attach a 'click' event handler to axis labels by overriding getOrCreateLabel method in Axis.js.

function labelClickHandler(e, t, eopts) {
        console.log('clicked ' + e.text); // do your stuff here
}

// override getOrCreateLabel  
Ext.chart.axis.Axis.override({
        getOrCreateLabel: function (i, text) {
        // Copy and paste original getOrCreateLabel body from Axis.js here
        ...
        textLabel = surface.add(Ext.apply({
            group: labelGroup,
            type: 'text',
            x: 0,
            y: 0,
            text: text
        }, me.label));
        surface.renderItem(textLabel);
        textLabel._bbox = textLabel.getBBox();
        // Add event handler after label creation
        textLabel.on('click', labelClickHandler); 
        ...
    }
});

Upvotes: 1

Related Questions