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

टूलबार

खास जानकारी
उदाहरण
इस्तेमाल करने का तरीका
1. आउटपुट टाइप
2. सिंटैक्स
डेटा से जुड़ी नीति

खास जानकारी

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

इसके ज़रिए: Google

उदाहरण

टूलबार में दिए गए विकल्पों में से कोई एक चुनें.

<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']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

इस्तेमाल करने का तरीका

अपने पेज पर एक टूलबार जोड़ें. इसके लिए, google.visualization.drawToolbar() तरीके को कॉल करें. साथ ही, यह जानकारी दें कि किस तरह के एक्सपोर्ट की अनुमति है और हर एक के लिए ज़रूरी डेटा.

टूलबार का इस्तेमाल करने के लिए, आपके विज़ुअलाइज़ेशन को किसी यूआरएल से डेटा लेना होगा. साथ ही, मैन्युअल तरीके से भरी गई DataTable या DataView ऑब्जेक्ट को पास नहीं किया जा सकता. आपको अपने विज़ुअलाइज़ेशन को पॉप्युलेट करने के लिए इस्तेमाल किए गए डेटा का यूआरएल drawToolbar() तरीके में भेजना होगा.

अगर आपको गैजेट को होल्ड करने वाला कोई आइटम या, जोड़ा जा सकने वाला iFrame उपलब्ध कराना है, तो आपके पास विज़ुअलाइज़ेशन के गैजेट वाले वर्शन का यूआरएल होना चाहिए.

आउटपुट टाइप

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

डेटा का एक सामान्य CSV वर्शन. आपके ब्राउज़र कॉन्फ़िगरेशन के आधार पर, डेटा को आपका ब्राउज़र रेंडर करेगा या डाउनलोड करने और सेव करने के लिए ऑफ़र करेगा, और/या
एचटीएमएल टेबल में डेटा मौजूद होना, जो नई ब्राउज़र विंडो में खुला हुआ हो और/या
इस विज़ुअलाइज़ेशन को वेब पेज में एम्बेड करने के लिए एचटीएमएल <iframe> कोड, और/या
पेज का एक लिंक जो उपयोगकर्ता को इस गैजेट को अपनेiGoogle पेज में एम्बेड करने में सक्षम बनाता है.

सिंटैक्स

google.visualization.drawToolbar(container, components)

पैरामीटर

कंटेनर

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

कॉम्पोनेंट

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

type: 'csv' - यह विकल्प, डेटा को कॉमा लगाकर अलग की गई वैल्यू वाली फ़ाइल में एक्सपोर्ट करता है. ब्राउज़र में 'इस रूप में सेव करें' डायलॉग खुलेगा.
- datasource: 'string' - डेटा सोर्स का यूआरएल.
type: html' - यह विकल्प, डेटा को एचटीएमएल टेबल में एक्सपोर्ट करता है. डेटा टेबल वाला पेज, ब्राउज़र में एक नई विंडो में खुलेगा.
- datasource: डेटा सोर्स की यूआरएल स्ट्रिंग.
type: igoogle - इस विकल्प की मदद से उपयोगकर्ता, अपने Googlebot पेज पर विज़ुअलाइज़ेशन जोड़ सकता है. ब्राउज़र में एक 'iGoogle में जोड़ें' पेज खुल जाएगा. इसका इस्तेमाल सिर्फ़ तब करें, जब विज़ुअलाइज़ेशन, गैजेट वाले वर्शन में उपलब्ध हो.
- datasource: डेटा सोर्स की यूआरएल स्ट्रिंग.
- Googlebot: गैजेट वाले वर्शन की एक्सएमएल यूआरएल स्ट्रिंग. ध्यान दें कि टूलबार से जुड़ा विज़ुअलाइज़ेशन, गैजेट का वर्शन होना ज़रूरी नहीं है.
- userprefs: इस विज़ुअलाइज़ेशन के लिए सही विकल्प के तौर पर एक ऑब्जेक्ट है, जिसमें विज़ुअलाइज़ेशन से जुड़ी प्राथमिकताएं तय होती हैं.
type: htmlcode - इस विकल्प से एचटीएमएल कोड का एक ब्लॉक बन जाता है, जिसे उपयोगकर्ता, iframe में विज़ुअलाइज़ेशन दिखाने के लिए वेब पेज में जोड़ सकता है. गैजेट के सटीक html तत्व वाली एक पॉप-अप विंडो ब्राउज़र में खुलेगी.इसका इस्तेमाल तभी करें, जब विज़ुअलाइज़ेशन किसी गैजेट वाले वर्शन में उपलब्ध हो.
- datasource: डेटा सोर्स की यूआरएल स्ट्रिंग.
- Googlebot: गैजेट xml यूआरएल स्ट्रिंग.
- userprefs: इस विज़ुअलाइज़ेशन के लिए सही विकल्प के तौर पर एक ऑब्जेक्ट है, जिसमें विज़ुअलाइज़ेशन से जुड़ी प्राथमिकताएं तय होती हैं.
- style: iframe की स्टाइल के लिए वैकल्पिक स्ट्रिंग. उदाहरण के लिए: 'width: 300px; ऊंचाई: 500px;'.

उदाहरण

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

डेटा नीति

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

स्थानीय भाषा में कॉन्टेंट उपलब्ध कराना

फ़िलहाल, टूलबार सिर्फ़ अमेरिकन इंग्लिश में काम करता है.