इस पेज का अनुवाद Cloud Translation API से किया गया है.

टूलटिप

टूलटिप: शुरुआती जानकारी
टूलटिप टाइप तय करना
स्टैंडर्ड टूलटिप
टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाना
एचटीएमएल टूलटिप का इस्तेमाल करना
एचटीएमएल कॉन्टेंट को पसंद के मुताबिक बनाना
घुमावदार टूलटिप
टूलटिप में चार्ट डालना
टूलटिप से जुड़ी कार्रवाइयां
डेटा की व्याख्या करना
इस्तेमाल किए जा सकने वाले चार्ट

टूलटिप: परिचय

टूलटिप, ऐसे छोटे बॉक्स होते हैं जो किसी चीज़ पर कर्सर घुमाने पर पॉप-अप होते हैं. (होवरकार्ड आम तौर पर इस्तेमाल होते हैं और स्क्रीन पर कहीं भी दिख सकते हैं). टूलटिप हमेशा किसी चीज़ के साथ जुड़े होते हैं, जैसे कि स्कैटर चार्ट पर कोई बिंदु या बार चार्ट पर बार.

इस दस्तावेज़ में, Google चार्ट में टूलटिप बनाने और उन्हें पसंद के मुताबिक बनाने का तरीका बताया गया है.

Google चार्ट अपने आप सभी मुख्य चार्ट के लिए टूलटिप बनाता है. इन्हें डिफ़ॉल्ट रूप से SVG के तौर पर रेंडर किया जाएगा. हालांकि, IE 8 में इसे VML के तौर पर रेंडर नहीं किया जाएगा. draw() कॉल में दिए गए चार्ट के विकल्पों में tooltip.isHtml: true की जानकारी देकर, कोर चार्ट पर एचटीएमएल टूलटिप बनाए जा सकते हैं. इससे टूलटिप ऐक्शन भी बनाया जा सकता है.

स्टैंडर्ड टूलटिप

अगर कोई कस्टम कॉन्टेंट मौजूद नहीं है, तो टूलटिप का कॉन्टेंट, दिए गए डेटा के आधार पर अपने-आप जनरेट होता है. चार्ट में किसी भी बार पर माउस को घुमाकर, टूलटिप देखी जा सकती है.

स्टैंडर्ड टूलटिप देखने के लिए, बार पर कर्सर घुमाएं.

इस उदाहरण में, हमने टूलटिप में कस्टम कॉन्टेंट जोड़ने के लिए, DataTable में एक नया कॉलम जोड़ा है और उसे टूलटिप रोल से मार्क किया है.

ध्यान दें: यह बबल चार्ट विज़ुअलाइज़ेशन में काम नहीं करता.

        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = { legend: 'none' };
        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
        chart.draw(dataTable, options);
      }

एचटीएमएल टूलटिप का इस्तेमाल करना

यह उदाहरण एचटीएमएल टूलटिप चालू करके, पिछले उदाहरण को ध्यान में रखकर बनाया गया है. चार्ट के विकल्पों में tooltip.isHtml: true को जोड़ने पर ध्यान दें.

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = {
          tooltip: {isHtml: true},
          legend: 'none'
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
        chart.draw(dataTable, options);
      }

यह बहुत अलग नहीं लग रहा है, लेकिन अब हम एचटीएमएल को अपनी पसंद के मुताबिक बना सकते हैं.

एचटीएमएल कॉन्टेंट को पसंद के मुताबिक बनाना

पहले के सभी उदाहरणों में सामान्य टेक्स्ट वाले कॉन्टेंट के साथ टूलटिप का इस्तेमाल किया गया है. हालांकि, एचटीएमएल टूलटिप का असली फ़ायदा तब मिलता है, जब एचटीएमएल मार्कअप का इस्तेमाल करके, इन्हें अपनी पसंद के मुताबिक बनाया जा सकता है. इसे सक्षम करने के लिए, आपको दो काम करने होंगे:

चार्ट के विकल्पों में tooltip.isHtml: true तय करें. यह चार्ट को, SVG के बजाय एचटीएमएल में टूलटिप ड्रॉ करने का निर्देश देता है.
डेटा टेबल में html कस्टम प्रॉपर्टी का इस्तेमाल करके, एक पूरे कॉलम या किसी सेल को मार्क करें. टूलटिप की भूमिका और एचटीएमएल प्रॉपर्टी वाला डेटा टेबल कॉलम इस तरह का होगा:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})
ध्यान दें: यह बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करता. बबल चार्ट के एचटीएमएल टूलटिप के कॉन्टेंट को पसंद के मुताबिक नहीं बनाया जा सकता.

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

कस्टम एचटीएमएल कॉन्टेंट, <img> टैग जोड़ने या किसी टेक्स्ट को बोल्ड करने जितना आसान हो सकता है:

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

इस उदाहरण में बताया गया है कि कस्टम एचटीएमएल टूलटिप को डोमेन कॉलम में कैसे अटैच किया जा सकता है. (पिछले उदाहरणों में, इसे डेटा कॉलम में अटैच किया गया था.) डोमेन ऐक्सिस के लिए टूलटिप चालू करने के लिए, focusTarget: 'category' विकल्प सेट करें.

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  // Use custom HTML content for the domain tooltip.
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn('number', 'Bronze');

  dataTable.addRows([
    ['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29],
    ['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
    ['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
  ]);

  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    // This line makes the entire category's tooltip active.
    focusTarget: 'category',
    // Use an HTML tooltip.
    tooltip: { isHtml: true }
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}

function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
  return '<div style="padding:5px 5px 5px 5px;">' +
      '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
      '<table class="medals_layout">' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}

घुमावदार टूलटिप

Google चार्ट में टूलटिप को सीएसएस की मदद से बदला जा सकता है. नीचे दिए गए चार्ट में, इस इनलाइन CSS का इस्तेमाल करके चार्ट div के ठीक पहले टूलटिप को 30° घड़ी की दिशा में घुमाया जाता है:


<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>

ध्यान दें कि यह सिर्फ़ एचटीएमएल टूलटिप के लिए काम करेगा, यानी कि वे जिनके लिए isHtml: true विकल्प है.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Fixations'],
          ['2015',  80],
          ['2016',  90],
          ['2017',  100],
          ['2018',  90],
          ['2019',  80],
        ]);

        var options = {
          tooltip: { isHtml: true },    // CSS styling affects only HTML tooltips.
          legend: { position: 'none' },
          bar: { groupWidth: '90%' },
          colors: ['#A61D4C']
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
    <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
    <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
  </body>
</html>

टूलटिप में चार्ट डालना

एचटीएमएल टूलटिप में, आपकी पसंद का ज़्यादातर एचटीएमएल कॉन्टेंट शामिल हो सकता है—यहां तक कि Google चार्ट भी. टूलटिप में मौजूद चार्ट की मदद से, उपयोगकर्ताओं को किसी डेटा एलिमेंट पर कर्सर घुमाने पर, ज़्यादा जानकारी मिल सकती है. यह लोगों को सिर्फ़ एक नज़र में ज़्यादा जानकारी उपलब्ध कराने का एक अच्छा तरीका है.

नीचे दिए गए कॉलम चार्ट में, खेल-कूद के कई बड़े इवेंट को हाल ही में सबसे ज़्यादा देखे गए दर्शकों की जानकारी दी गई है. इसमें, हर एक चैनल के दर्शकों की संख्या से जुड़ी टूलटिप दी गई है. इसमें पिछले 10 सालों के दौरान, दर्शकों की औसत संख्या का लाइन चार्ट दिया गया है.

यहां ध्यान देने वाली कुछ बातें. सबसे पहले, डेटा के हर सेट को टूलटिप में दिखाने के लिए, प्रिंट किया जा सकने वाला चार्ट बनाना होगा. दूसरे, हर टूलटिप चार्ट के लिए एक "तैयार" इवेंट हैंडलर की ज़रूरत होती है, जिसे हम प्रिंट करने लायक चार्ट बनाने के लिए addListener के ज़रिए कॉल करते हैं.

ज़रूरी जानकारी: सभी टूलटिप चार्ट, मुख्य चार्ट से पहले बनाए जाने चाहिए. प्राथमिक चार्ट के DataTable में इमेज जोड़ने के लिए इमेज हासिल करना ज़रूरी है.

अहम हिस्से

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }

पूरा वेब पेज

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawTooltipCharts);

      // Set up data for visible chart.
      var primaryData = [
        ['NBA Finals', 22.4],
        ['NFL Super Bowl', 111.3],
        ['MLB World Series', 19.2],
        ['UEFA Champions League Final', 1.9],
        ['NHL Stanley Cup Finals', 6.4],
        ['Wimbledon Men\'s Championship', 2.4]
      ];

      // Set up data for your tooltips.
      var tooltipData = [
        ['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
        'UEFA Champions League Final', 'NHL Stanley Cup Finals',
        'Wimbledon Men\'s Championship'],
        ['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
        ['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
        ['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
        ['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
        ['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
        ['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
        ['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
        ['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
        ['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
        ['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
      ];

      var primaryOptions = {
        title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
        legend: 'none',
        tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
      };

      var tooltipOptions = {
        title: 'U.S. Viewership Over The Last 10 Years (in millions)',
        legend: 'none'
      };

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
    </script>
  </head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>

टूलटिप में JavaScript की तय की गई कार्रवाइयां भी शामिल हो सकती हैं. एक आसान उदाहरण के तौर पर, यहां एक टूलटिप दिया गया है. इस टूलटिप में कार्रवाई करने पर, जब उपयोगकर्ता "सैंपल बुक देखें" पर क्लिक करता है, तब एक डायलॉग बॉक्स पॉप-अप होता है:

जब उपयोगकर्ता पाई का एक वेज चुनता है, तो tooltip विकल्प ट्रिगर होता है, जिसकी वजह से setAction में तय किया गया कोड चलता है:

        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics/Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'sample',
          text: 'See sample book',
          action: function() {
            selection = chart.getSelection();
            switch (selection[0].row) {
              case 0: alert('Ender\'s Game'); break;
              case 1: alert('Feynman Lectures on Physics'); break;
              case 2: alert('Numerical Recipes in JavaScript'); break;
              case 3: alert('Truman'); break;
              case 4: alert('Freakonomics'); break;
              case 5: alert('The Mezzanine'); break;
              case 6: alert('The Color of Magic'); break;
              case 7: alert('The Law of Superheroes'); break;
            }
          }
        });

        chart.draw(data, options);
      }

कार्रवाइयां visible, enabled, दोनों या इनमें से कोई भी नहीं हो सकती हैं. Google चार्ट रेंडर होने पर, टूलटिप सिर्फ़ तब दिखती है, जब वह दिख रही हो. साथ ही, इस कार्रवाई के चालू होने पर ही इस पर क्लिक किया जा सकता है. (बंद है, लेकिन दिखने वाली कार्रवाइयों को धूसर किया गया है.)

visible और enabled ऐसे फ़ंक्शन होने चाहिए जो सही या गलत वैल्यू दिखाते हों. वे फ़ंक्शन एलिमेंट आईडी और उपयोगकर्ता के चुने गए विकल्प पर निर्भर हो सकते हैं. इससे, ऐक्शन को देखने और क्लिक करने की क्षमता को बेहतर बनाया जा सकता है.

टूलटिप focus के साथ-साथ selection पर भी ट्रिगर हो सकती है. हालांकि, टूलटिप ऐक्शन के साथ, selection को प्राथमिकता दी जाती है. इससे टूलटिप लंबे समय तक चलता रहता है, जिससे उपयोगकर्ता कार्रवाई को ज़्यादा आसानी से चुन सकता है.

यह ज़रूरी नहीं है कि इन कार्रवाइयों के लिए सूचना दी जाए: JavaScript से जो कुछ भी किया जा सकता है उसे किसी कार्रवाई से किया जा सकता है. यहां हम दो कार्रवाइयां करेंगे: एक खूंटी (वेज) को छोटा करने के लिए और एक खूंटी (वेज) को छोटा करने के लिए.

        google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics & Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action_2'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'increase',
          text: 'Read 20 more books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) + 20);
            chart.draw(data, options);
          }
        });

        chart.setAction({
          id: 'decrease',
          text: 'Read 20 fewer books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) - 20);
            chart.draw(data, options);
          }
        });

        chart.draw(data, options);
      }

डेटा की व्याख्या करना

Google चार्ट पर टेक्स्ट को सीधे तौर पर ओवरले किया जा सकता है. ऐसा करने के लिए कॉलम भूमिका के तौर पर tooltip के बजाय annotationText का इस्तेमाल करें. माउस की मदद से, एनोटेशन पर कर्सर घुमाकर टूलटिप देखी जा सकती है.

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'USA');
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
  dataTable.addColumn('number', 'China');
  dataTable.addColumn('number', 'UK');
  dataTable.addRows([
    ['2000',  94, '',  '', 58, 28],
    ['2004', 101, '',  '', 63, 30],
    ['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">', 100, 47],
    ['2012', 104, '',  '', 88, 65]
  ]);

  var options = { tooltip: {isHtml: true}};
  var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
  chart.draw(dataTable, options);
}

इस्तेमाल किए जा सकने वाले चार्ट

फ़िलहाल, इन चार्ट टाइप के लिए एचटीएमएल टूलटिप का इस्तेमाल किया जा सकता है:

अगर आप annotationText या tooltip भूमिकाओं का इस्तेमाल कर रहे हैं, तो आने वाले समय में होने वाले बदलावों और आने वाले समय में होने वाली परेशानी से बचने के तरीकों के बारे में पढ़ने के लिए, कृपया भूमिकाओं से जुड़ा दस्तावेज़ देखें.