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

टूलटिप

टूलटिप: परिचय
टूलटिप के टाइप के बारे में बताना
सामान्य टूलटिप
टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाना
एचटीएमएल टूलटिप का इस्तेमाल करना
एचटीएमएल कॉन्टेंट को पसंद के मुताबिक बनाना
रोटेटिंग टूल के बारे में सलाह
टूलटिप में चार्ट डालना
टूलटिप की कार्रवाइयां
डेटा की व्याख्या करना
काम करने वाले चार्ट

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

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

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

Google चार्ट सभी मुख्य चार्ट के लिए अपने आप टूलटिप बनाता है. उन्हें डिफ़ॉल्ट रूप से SVG के तौर पर रेंडर किया जाएगा. हालांकि, IE 8 के तहत वे VML के तौर पर रेंडर होंगे. आप ड्रॉ() कॉल में पास किए गए चार्ट विकल्पों में 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 चार्ट में मौजूद टूलटिप को सीएसएस के साथ रोटेट किया जा सकता है. नीचे दिए गए चार्ट में, चार्ट div से ठीक पहले इस इनलाइन CSS का उपयोग करके टूलटिप को घड़ी की दिशा में 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 चार्ट भी. टूलटिप में दिए गए चार्ट की मदद से, आपके उपयोगकर्ता किसी डेटा एलिमेंट पर कर्सर घुमाते समय ज़्यादा जानकारी पा सकते हैं. यह एक अच्छा तरीका है जिससे लोग पहली बार में ही, ज़्यादा जानकारी पा सकते हैं. इससे, उपयोगकर्ता अपनी जानकारी को गहराई से देख सकते हैं.

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

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

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

ज़रूरी जानकारी

      // 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 का इस्तेमाल कर रहे हैं, तो आने वाले समय में होने वाले बदलावों और आने वाले समय में होने वाले दर्द से बचने के बारे में जानने के लिए, कृपया भूमिकाओं से जुड़े दस्तावेज़ देखें.