javascript - Highcharts clickable column to open another page on same site -

i working on script produces chart (highcharts). work fine add "click" function when clicked opens scropt on same site. after reading clickable columns not sure how make work.

how made column clickable google.com

the code have is:

$(function () {  var categories=[]; var data2 =[];   var chart; $(document).ready(function() {  $.getjson("../charts/imaint_audit_water_temp_cold_chart.php", function(json) {   $.each(json,function(i,el) {   if (el.name=="count")       categories = el.data;   else data2.push(el); });  $('#container1').highcharts({ chart: {    renderto: 'container',    type: 'column',    margintop: 40,    marginright: 30,    marginbottom: 50,    plotbackgroundcolor: '#fcffc5' },  title: {    text: 'failed cold water temperatures',    x: -20, //center    style: {        fontfamily: 'tahoma',        color: '#000000',        fontweight: 'bold',        fontsize: '10px'    } },  subtitle: {    text: '',    x: -20 }, xaxis: {    labels: {        enabled: false    } },  yaxis: {    showfirstlabel: false,    linecolor:'#999',    linewidth:1,    tickcolor:'#666',    tickwidth:1,    ticklength:2,    tickinterval: 10,    gridlinecolor:'#ddd',     title: {       text: '',       style: {          fontfamily: 'tahoma',          color: '#000000',          fontweight: 'bold',          fontsize: '10px'       }   },  plotlines: [{    color: '#808080' }] },  legend: {    enabled: true,    itemstyle: {       font: '11px trebuchet ms, verdana, sans-serif',       color: '#000000'    },    itemhoverstyle: {       color: '#000000'    },    itemhiddenstyle: {       color: '#444'    }  },   colors: [    '#0066cc',    '#ff2f2f', ],  plotoptions: {    series: {       point: {          events: {             click: function() {              }          }   } }, legendindex:0,  datalabels: { enabled: true, color: '#000000', align: 'center', cursor: 'pointer', y: 0, // 10 pixels down top style: {    fontsize: '10px',    fontfamily: 'verdana, sans-serif' } } } },  credits: {    enabled: false },  series: data2 }); });  }); }); 

many in advance time.

here explained: http://api.highcharts.com/highcharts#plotoptions.series.point.events.click

you accomplish custom url in each bar:

plotoptions: {             series: {                 cursor: 'pointer',                 point: {                     events: {                         click: function () {                             location.href = this.options.url;                         }                     }                 }             }         },          series: [{             data: [{                 y: 29.9,                 url: 'http://bing.com/search?q=foo'             }, {                 y: 71.5,                 url: 'http://bing.com/search?q=bar'             }, {                 y: 106.4,                 url: 'http://bing.com/search?q=foo+bar'             }]         }] 

working fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/

or same url:

point: {                     events: {                         click: function () {                             location.href = "http://stackoverflow.com";                         }                     }                 } 

hope helps!

update

if in frame, try using:

window.top.location.href='urlgoeshere'; 

"_top" loads content in top-level frameset (in effect, whole browser window), no matter how many nested levels down current frame located