How to add link (which is clickable and fetch new data) in google column chart api

Question

I have recently used google chart API.

I want to add external link in google chart tool tip.

For example, if type is X then load data. After loading X type data, I want to fetch Y type data which url is in chart and it will be clickable.

var get_chart = function(cdata, htitle) {
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(cdata);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
      {
        calc: "stringify",
        //sourceColumn: 1,
        type: "string",
        role: "annotation"
      },
      2, 3
    ]);

    var options = {
      //title: "Density of Precious Metals, in g/cm^3",
      //width: 600,
      //height: 400,
      bar: {
        groupWidth: "80%"
      },
      //legend: { position: "none" },
      legend: "none",
      vAxis: {
        viewWindow: {
          min: 0,
          max: 100
        },
        ticks: [0, 40, 60, 84, 94, 100],
        textPosition: 'none',
        //annotations: {style: ""}
      },
      hAxis: {
        title: htitle,
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
  }
}

var json = {
  "cdata": [
    ["Element", "", {
      "role": "style"
    }, {
      "role": "annotation"
    }],
    ["USA", 84, "#f39c12", "Best"]
  ],
  "url": "x.php?type=y"
};
var cdata = json.cdata;
get_chart(cdata, '');

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>

Now how can I use my url property in chart?

Answer 1

Use this from url: https://developers.google.com/chart/interactive/docs/events?csw=1

var get_chart = function(cdata, htitle,url) {
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(cdata);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
      {
        calc: "stringify",
        //sourceColumn: 1,
        type: "string",
        role: "annotation"
      },
      2, 3
    ]);

    var options = {
      //title: "Density of Precious Metals, in g/cm^3",
      //width: 600,
      //height: 400,
      bar: {
        groupWidth: "80%"
      },
      //legend: { position: "none" },
      legend: "none",
      vAxis: {
        viewWindow: {
          min: 0,
          max: 100
        },
        ticks: [0, 40, 60, 84, 94, 100],
        textPosition: 'none',
        //annotations: {style: ""}
      },
      hAxis: {
        title: htitle,
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
    
    //modify code
    google.visualization.events.addListener(chart, 'select', selectHandler);

    function selectHandler(e) {
      //alert(url);
      window.location = url;
    }
  }
}

var json = {
  "cdata": [
    ["Element", "", {
      "role": "style"
    }, {
      "role": "annotation"
    }],
    ["USA", 84, "#f39c12", "Best"]
  ],
  "url": "x.php?type=y"
};
var cdata = json.cdata;
var url = json.url
get_chart(cdata, '',url);

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>