टूलबार

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

खास जानकारी

टूलबार के किसी भी एलिमेंट में टूलबार एलिमेंट जोड़ा जा सकता है. ऐसा करने से, उपयोगकर्ता पहले से मौजूद डेटा को 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() तरीके से पास करना होगा.

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

आउटपुट के प्रकार

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

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

सिंटैक्स

google.visualization.drawToolbar(container, components)

पैरामीटर

कंटेनर
पेज पर मौजूद DOM एलिमेंट का हैंडल. एपीआई, इस एलिमेंट में टूलबार दिखाएगा. यह किसी स्टैंडर्ड विज़ुअलाइज़ेशन के कंटेनर पैरामीटर की तरह है. आपको टूलबार को उसे इस्तेमाल करने वाले विज़ुअलाइज़ेशन के पास रखना चाहिए.
कॉम्पोनेंट
ऑब्जेक्ट की कलेक्शन, जिसमें से हर एक उस फ़ॉर्मैट की जानकारी देता है जिसमें डेटा या विज़ुअलाइज़ेशन को एक्सपोर्ट किया जा सकता है. टूलबार, उपयोगकर्ताओं को विकल्पों की जानकारी उसी क्रम में देगा जो क्रम में जोड़ा गया है. हर ऑब्जेक्ट में एक टाइप प्रॉपर्टी होती है, जो फ़ॉर्मैट के बारे में बताती है. साथ ही, उस ऑब्जेक्ट के टाइप के आधार पर एक या ज़्यादा प्रॉपर्टी होती हैं:
  • type: 'csv' - यह विकल्प डेटा को कॉमा-सेपरेटेड वैल्यू फ़ाइल में एक्सपोर्ट करता है. ब्राउज़र में 'इस रूप में सेव करें' डायलॉग खुलेगा.
    • datasource: 'स्ट्रिंग' - डेटा सोर्स यूआरएल.
  • type: html' - इस विकल्प से डेटा, एचटीएमएल टेबल में एक्सपोर्ट हो जाता है. डेटा टेबल वाला पेज, ब्राउज़र में एक नई विंडो में खुलेगा.
    • datasource: डेटा सोर्स यूआरएल स्ट्रिंग.
  • type: igoogle - इस विकल्प की मदद से, उपयोगकर्ता अपने iGoogle पेज में विज़ुअलाइज़ेशन जोड़ सकते हैं. ब्राउज़र में 'iGoogle में जोड़ें' पेज खुलेगा. इसका इस्तेमाल सिर्फ़ तब करें, जब विज़ुअलाइज़ेशन गैजेट के वर्शन में उपलब्ध हो.
    • datasource: डेटा सोर्स यूआरएल स्ट्रिंग.
    • गैजेट: गैजेट के वर्शन की एक्सएमएल यूआरएल स्ट्रिंग. ध्यान दें कि जिस विज़ुअलाइज़ेशन से टूलबार जुड़ा होता है उसका गैजेट के हिसाब से बनाया गया वर्शन होना ज़रूरी नहीं है.
    • userprefs: इस विज़ुअलाइज़ेशन के लिए एक वैकल्पिक प्राथमिकता ऑब्जेक्ट, जो विज़ुअलाइज़ेशन की प्राथमिकताओं के बारे में बताता है.
  • type: htmlcode - यह विकल्प एचटीएमएल कोड का एक ब्लॉक बनाता है. इससे, उपयोगकर्ता किसी iframe में विज़ुअलाइज़ेशन दिखाने के लिए, वेब पेज में एम्बेड कर सकते हैं. ब्राउज़र में, गैजेट के html एलिमेंट वाली सटीक पॉप-अप विंडो खुलेगी. इसका इस्तेमाल सिर्फ़ तब करें, जब विज़ुअलाइज़ेशन गैजेट के वर्शन में उपलब्ध हो.
    • datasource: डेटा सोर्स यूआरएल स्ट्रिंग.
    • Gadget: गैजेट xml url स्ट्रिंग.
    • userprefs: इस विज़ुअलाइज़ेशन के लिए एक वैकल्पिक प्राथमिकता ऑब्जेक्ट, जो विज़ुअलाइज़ेशन की प्राथमिकताओं के बारे में बताता है.
    • style: iframe की स्टाइल के लिए वैकल्पिक स्ट्रिंग. उदाहरण के लिए: 'चौड़ाई: 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);
};

डेटा नीति

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

स्थानीय भाषा के अनुसार

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