I have a column chart and I would like to be able to assign a click event which would fire a window.open() to a dynamically generated URL. I have an array that contains the elements for the x-Axis which I can use to generate the URL for the window.open() if I can get a pointer to the selected column. Below is the code for the chart.

    $(document).ready(function () {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            margin: [50, 50, 350, 50]
        },

        title: {
            text: 'E-Tags Cause'
        },
        xAxis: {
            categories: _MyArray2,
            labels: {
                rotation: 45,
                align: 'left',
                style: {
                    fontSize: '18px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            title: {
                text: 'Count'
            }
        },
        plotOptions: {
            column: {
                events: {
                    click: function (event) {
                        window.open('test' +  + '.html');
                    }
                }
            }
        },
        series: [{
            name: 'E-Tag Count',
            data: _MyArray,
            pointWidth: 40,
            dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#000000',
                align: 'center',
                x: -3,
                y: -2,
                formatter: function () {
                    return this.y;
                },
                style: {
                    fontSize: '14px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
    $('tspan').last().remove();
});

Any help is appreciated.

I have a column chart and I would like to be able to assign a click event which would fire a window.open() to a dynamically generated URL. I have an array that contains the elements for the x-Axis which I can use to generate the URL for the window.open() if I can get a pointer to the selected column. Below is the code for the chart.

    $(document).ready(function () {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            margin: [50, 50, 350, 50]
        },

        title: {
            text: 'E-Tags Cause'
        },
        xAxis: {
            categories: _MyArray2,
            labels: {
                rotation: 45,
                align: 'left',
                style: {
                    fontSize: '18px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            title: {
                text: 'Count'
            }
        },
        plotOptions: {
            column: {
                events: {
                    click: function (event) {
                        window.open('test' +  + '.html');
                    }
                }
            }
        },
        series: [{
            name: 'E-Tag Count',
            data: _MyArray,
            pointWidth: 40,
            dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#000000',
                align: 'center',
                x: -3,
                y: -2,
                formatter: function () {
                    return this.y;
                },
                style: {
                    fontSize: '14px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
    $('tspan').last().remove();
});

Any help is appreciated.

• javascript
• jquery
• highcharts

Share Improve this question Follow asked Jul 3, 2012 at 18:14 boostsboosts 62511 gold badge88 silver badges1515 bronze badges 2

• I'm not very familiar with Highcharts, but check out this similar question: stackoverflow./questions/3524774/… Calling console.log on the event object and this that are available in the click handler seems like a good place to start. – Cecchi Commented Jul 3, 2012 at 18:22
• This also might be relevant, from the docs: Click: Fires when the series is clicked. The this keyword refers to the series object itself. One parameter, event, is passed to the function. This contains mon event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. Additionally, event.point holds a pointer to the nearest point on the graph. – Cecchi Commented Jul 3, 2012 at 18:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

EDIT

ADD the point object after column

WORKING JSFIDDLE

   $(function() {
      chart = new Highcharts.Chart({

          chart: {
              renderTo: 'container',
              defaultSeriesType: 'column'
          },

          title: {
              text: ''
          },

          xAxis: {
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May',
                      'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },

          plotOptions: {
              column :{
                  point:{
                      events:{
                          click:function(){
                            window.open(this.x + '.html') ;
                          }
                      }
                  }
              }
          },

          series: [{
              data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 
                   135.6, 148.5, 216.4,     194.1, 95.6, 54.4]
               }],

              navigation: {
                  buttonOptions: {
                      align: 'center'
                  }
              }
          });




      });​