Google चार्ट टाइमलाइन आइटम से लिंक बनाना

सबसे पहले, डेटा प्रारूप टाइमलाइन चार्ट के लिए निर्दिष्ट करता है:

गैर-डिफ़ॉल्ट टूलटिप्स प्रदान करने के लिए,
आपके डेटाटेबल की प्रत्येक पंक्ति में सभी पांच कॉलम होने चाहिए
(पंक्ति लेबल, बार लेबल, टूलटिप, प्रारंभ और अंत)
टूलटिप कॉलम के साथ तीसरा कॉलम.
देखें कस्टमाइज़ टूलटिप्स ए> ...

हालांकि, टूलटिप को ट्रिगर करने का एकमात्र विकल्प 'focus' . है .
इससे माउस के तत्व छोड़ने पर टूलटिप गायब हो जाएगी।
उपयोगकर्ता लिंक पर क्लिक नहीं कर पाएगा।
अन्य चार्ट में 'selection' कोड> ट्रिगर, जो टूलटिप को जगह में लॉक कर देता है।

उदाहरण के लिए निम्नलिखित कार्यशील स्निपेट देखें...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
  var data1 = new google.visualization.DataTable();

  data1.addColumn({ type: 'string', id: 'fracao' });
  data1.addColumn({ type: 'string', id: 'contrato' });
  data1.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
  data1.addColumn({ type: 'date', id: 'Start' });
  data1.addColumn({ type: 'date', id: 'End' });
  data1.addRows([
    ['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=35">Serra Lopes, Cortes Martins & Associados</a>', new Date(2018, 5, 01), new Date(2019, 4, 31)],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=1">Serra Lopes, Cortes Martins & Associados</a>', new Date(2007, 2, 01), new Date(2013, 4, 31)],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=34">Serra Lopes, Cortes Martins & Associados</a>', new Date(2017, 5, 01), new Date(2018, 4, 31)]
  ]);

  var options1 = {
    chartArea: {
      left: 40,
      width: '100%',
    },
    timeline: {
      groupByRowLabel: true,
      singleColor: 'green' ,
      showRowLabels: true
    },
    tooltip: {
      isHtml: true
    },
    width: '100%',
    height: 600,
  };

  function drawChart1() {
    chart1.draw(data1, options1);
  }
  drawChart1();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3"></div>

इसके बजाय, 'select' . का उपयोग करने की अनुशंसा करें साइट खोलने के लिए ईवेंट।
जब कोई उपयोगकर्ता किसी तत्व का चयन करता है, तो साइट खोलें।
डेटा तालिका में लिंक संग्रहीत करने के लिए,
कॉलम को अंतिम कॉलम के रूप में जोड़ें,
इसलिए समयरेखा इसे अनदेखा कर देगी।

निम्नलिखित कार्यशील स्निपेट देखें...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
  var data1 = new google.visualization.DataTable();

  data1.addColumn({ type: 'string', id: 'fracao' });
  data1.addColumn({ type: 'string', id: 'contrato' });
  data1.addColumn({ type: 'date', id: 'Start' });
  data1.addColumn({ type: 'date', id: 'End' });
  data1.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
  data1.addRows([
    ['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2018, 5, 01), new Date(2019, 4, 31), 'detalhe_fraccao.php?id=35'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2007, 2, 01), new Date(2013, 4, 31), 'detalhe_fraccao.php?id=35'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2017, 5, 01), new Date(2018, 4, 31), 'detalhe_fraccao.php?id=35']
  ]);

  var options1 = {
    chartArea: {
      left: 40,
      width: '100%',
    },
    timeline: {
      groupByRowLabel: true,
      singleColor: 'green' ,
      showRowLabels: true
    },
    width: '100%',
    height: 600,
  };

  google.visualization.events.addListener(chart1, 'select', function () {
    var selection = chart1.getSelection();
    if (selection.length > 0) {
      window.open(data1.getValue(selection[0].row, 4), '_blank');
      console.log(data1.getValue(selection[0].row, 4));
    }
  });

  function drawChart1() {
    chart1.draw(data1, options1);
  }
  drawChart1();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3"></div>

नोट:लिंक उपरोक्त स्निपेट से नहीं खुलेगा,
लेकिन आपके अपने पेज से ठीक काम करना चाहिए...