I am working on a script that produces a chart (Highcharts). This work fine but I would like to add a "click" function which when clicked opens another scropt on the same site. After reading about clickable columns I am not sure how to make it work.

How would I made a column clickable to say google

The code I 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 from the top
style: {
   fontSize: '10px',
   fontFamily: 'Verdana, sans-serif'
}
}
}
},

credits: {
   enabled: false
},

series: data2
});
});

});
});

Many thanks in advance for your time.

I am working on a script that produces a chart (Highcharts). This work fine but I would like to add a "click" function which when clicked opens another scropt on the same site. After reading about clickable columns I am not sure how to make it work.

How would I made a column clickable to say google.

The code I 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 from the top
style: {
   fontSize: '10px',
   fontFamily: 'Verdana, sans-serif'
}
}
}
},

credits: {
   enabled: false
},

series: data2
});
});

});
});

Many thanks in advance for your time.

• javascript
• jquery
• iframe
• highcharts

1 Answer 1

Here is explained: http://api.highcharts./highcharts#plotOptions.series.point.events.click

You could acplish this with 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./search?q=foo'
            }, {
                y: 71.5,
                url: 'http://bing./search?q=bar'
            }, {
                y: 106.4,
                url: 'http://bing./search?q=foo+bar'
            }]
        }]

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

or all the same URL:

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

Hope it helps!

UPDATE

If is in a frame, you could try using:

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

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