I would like to open a new tab like <a href="http://google.com"
target="_blank">Plant 1</a>
whenever click on the Chart with
Javascript.
Summary:
When you click on Plant 1
in the Chart, a new tab with google.com
will appear.
When you click on Tan Thanh
in the Chart, a new tab with dell.com
will appear.
When you click on Plant 3
in the Chart, a new tab with w3schools.com
will appear.
When you click on Plant 4
in the Chart, a new tab with simplion.com
will appear.
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', 'link', 'Sales', 'Expenses'],
['Plant 1', 'http://google.com', 1000, 400],
['Tan Thanh', 'http://dell.com', 1170, 460],
['Plant 3', 'http://w3schools.com/', 660, 1120],
['Plant 4', 'http://simplion.com', 1030, 540]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 3]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function (e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1);
}
// Add our selection handler.
google.visualization.events.addListener(chart, 'select', selectHandler);
}