Question

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.

Answer 1

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'
                  }
              }
          });




      });​