Click event on legends of Google line/area chart

Question

I want to create a functionality such as : Click on legends of line/area chart which will link to another tab; and after clicking the new tab will open. I already achieved this functionality for bar charts i.e. clicking on each bar of google bar chart, open in new tab : chart.getSelection() does not work properly with google bar charts

but i am not able to find any solution for click on legends of line chart and open in new tab.

I have gone through other question on stackoverflow. like here: Google Line Chart Legend Click Events but everywhere they mention about 'select' event on legends and using getSelection. But I am already using this event for select/deselect lines/areas on line/area charts. so i want to use particularly click event on the legends.

I am able to get the event through alert statement, but now i want retrieve the name of legend which is being clicked. and that is where the problem comes. Please go through following code :

JsFiddle Ref : here

google.visualization.events.addListener(gChart, 'click', function () {
            var date = new Date();
            var millis = date.getTime();
            //match is undefined here, not able to retrieve name of legend which is being clicked.

            var match = e.targetID.match(/legend#\d+#/);
            console.log(match);

            if (millis - secondClick > 1000) {
                // add dealyed check if a single click occured
                setTimeout(function () {
                    // no second fast enough, it is a single click
                    if (secondClick == 0) {
                        //alert("click");
                    }
                }, 250);
            }

            // try to measure if double-clicked
            if (millis - firstClick < 250) {
                firstClick = 0;
                secondClick = millis;

                alert("doubleClick");
}
});

In above code, 'match' is undefined. Please help me to solve this issue.

Any help is appreciable! Thank you in advance.

UPDATE SOLUTION

var match = e.targetID.match(/legend/);
var rowIndex = parseInt((match['input']).substring((match['input']).lastIndexOf("#") + 1));
console.log("rowIndex :: ", rowIndex);

New ISSUE After revised requirement, I now want to handle the click event through jQuery; any help is appreciable. Please help!

I am trying to apply click event inside ready event of google visualization.

var readyEvent = google.visualization.events.addListener(gChart, 'ready', function () {
            google.visualization.events.removeListener(readyEvent);

            $('.chart-container').find('#' + this.id + '').on('dblclick', function (e) {
                var xPos = e.offsetX;
                var yPos = e.offsetX;
                console.log("id :: ",this);
                var cli = gChart.getChartLayoutInterface();
                var xBounds = cli.getBoundingBox('legend');
                //var x1 = cli.getXLocation(xPos);
                console.log(" xPos, cli, xBounds, x1 :: ", xPos, cli, xBounds);
                if (
                    (xPos >= xBounds.left || xPos <= xBounds.left + xBounds.width)
                ) {
                    var snapR = Defiant.getSnapshot(data);
                    var resTot = JSON.search(snapR, '//label');
                    console.log("click event :: ", data, resTot);
                   // gChart.draw(data, options);
                }
            });
        });

I am making some mistake here, but not able to get. I am having many charts o single page. (chart-container is class which holds the chart-div)