JSFiddle - React, Tailwind, and code Playground

by Huy Dinh

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="chart_div" style="width: 550px; height: 500px;"></div>

JavaScript

// Google Chart API with element's link

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);
}