jquery - How to add more href elements for each column in the chart with Javascript -

what doing here add link each column works first link1's column.

please me correct problem , make code shorter when there not 3 links each plant.

    ['year', 'link1', 'dollars', 'link2', 'conts', 'link3', 'quantity'],     ['plant 1', 'http://google.com', 1000, 'http://bing.com', 400, 'http://alexa/com', 2000],     ['tan thanh', 'http://dell.com', 1170, 'http://lenovo.com', 460, 'http://hp.com', 1420],     ['plant 3', 'http://w3schools.com', 660, 'http://microsoft.com', 1120, 'http://adobe.com', 1080],     ['plant 4', 'http://apple.com', 1030, 'http://htc.com', 540, 'http://samsung.com', 2240] 

summary:

in plant 1:

problem goes here:

• click on first column (blue column), new tab appears http://google.com.
• click on second column (red column), new tab appears http://google.com.
• click on third column (yellow column), new tab appears http://google.com.

it must be:

• click on first column (blue column), new tab appears http://google.com.
• click on second column (red column), new tab appears http://bing.com.
• click on third column (yellow column), new tab appears http://alexa/com.

demo

---

html:

<div id="chart_div" style="width: 550px; height: 500px;"></div> 

javascript:

google.load("visualization", "1", {     packages: ["corechart"] }); google.setonloadcallback(drawchart);  function drawchart() {     var data = google.visualization.arraytodatatable([         ['year', 'link1', 'dollars', 'link2', 'conts', 'link3', 'quantity'],         ['plant 1', 'http://google.com', 1000, 'http://bing.com', 400, 'http://alexa/com', 2000],         ['tan thanh', 'http://dell.com', 1170, 'http://lenovo.com', 460, 'http://hp.com', 1420],         ['plant 3', 'http://w3schools.com', 660, 'http://microsoft.com', 1120, 'http://adobe.com', 1080],         ['plant 4', 'http://apple.com', 1030, 'http://htc.com', 540, 'http://samsung.com', 2240]     ]);      var view = new google.visualization.dataview(data);     view.setcolumns([0, 2, 4, 6]);      var options = {         title: 'company performance'     };      var chart = new google.visualization.columnchart(document.getelementbyid('chart_div'));      chart.draw(view, options);     function selecthandler1() {         window.open(data.getvalue(chart.getselection()[0]['row'], 1), '_blank');     }      function selecthandler2() {         window.open(data.getvalue(chart.getselection()[0]['row'], 3), '_blank');     }      function selecthandler3() {         window.open(data.getvalue(chart.getselection()[0]['row'], 5), '_blank');     }     // add our selection handler.     google.visualization.events.addlistener(chart, 'select', selecthandler1);     google.visualization.events.addlistener(chart, 'select', selecthandler2);     google.visualization.events.addlistener(chart, 'select', selecthandler3); } 

use single event handler, , fetch relevant url based on column index of selected element:

google.visualization.events.addlistener(chart, 'select', function () {     var selection = chart.getselection();     // test selection array length, since can 0 if user deselects element     if (selection.length) {         var row = selection[0].row;         // convert view column index table column index,         // subtract 1 url index         var urlcol = view.gettablecolumnindex(selection[0].column) - 1;         window.open(data.getvalue(row, urlcol), '_blank');     } });