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

लाइब्रेरी लोड करें

इस पेज में Google चार्ट लाइब्रेरी लोड करने का तरीका बताया गया है.

लाइब्रेरी लोड करने का बुनियादी तरीका

कुछ अपवादों के साथ, Google चार्ट वाले सभी वेब पेजों में वेब पेज के <head> में ये लाइनें शामिल होनी चाहिए:

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

इस उदाहरण की पहली लाइन, लोडर को खुद लोड करती है. लोडर को सिर्फ़ एक बार लोड किया जा सकता है. भले ही, आपको कितने भी चार्ट बनाने हों. लोड करने वाले टूल को लोड करने के बाद, किसी खास तरह के चार्ट के पैकेज लोड करने के लिए, google.charts.load फ़ंक्शन को एक या उससे ज़्यादा बार कॉल किया जा सकता है.

google.charts.load का पहला आर्ग्युमेंट, वर्शन का नाम या नंबर होता है. इसे स्ट्रिंग के तौर पर दिया जाता है. 'current' का इस्तेमाल करने पर, Google Charts का सबसे नया आधिकारिक वर्शन लोड होता है. अगर आपको अगली रिलीज़ के लिए उम्मीदवार को आज़माना है, तो इसके बजाय 'upcoming' का इस्तेमाल करें. सामान्य तौर पर दोनों के बीच बहुत थोड़ा अंतर होगा और वे पूरी तरह एक जैसे ही होंगे. हालांकि, किसी नई रिलीज़ के आने वाले समय को छोड़कर. upcoming का इस्तेमाल करने की एक आम वजह यह है कि आपको उस नए चार्ट टाइप या सुविधा को टेस्ट करना है जिसे Google अगले एक या दो महीने में रिलीज़ करने वाला है. (हम आने वाले समय में होने वाली रिलीज़ के बारे में अपने फ़ोरम पर जानकारी देते हैं. हमारा सुझाव है कि रिलीज़ होने के बाद, उन्हें आज़माकर देखें, ताकि यह पक्का किया जा सके कि आपके चार्ट में किए गए बदलाव सही हैं.)

ऊपर दिए गए उदाहरण में, यह माना गया है कि आपको corechart (बार, कॉलम, लाइन, एरिया, स्टेप एरिया, बबल, पाई, डोनट, कॉम्बो, कैंडलस्टिक, हिस्टोग्राम, स्कैटर) दिखाना है. अगर आपको कोई दूसरा या अतिरिक्त चार्ट टाइप चाहिए, तो ऊपर दिए गए corechart की जगह पर पैकेज का सही नाम जोड़ें या जोड़ें (उदाहरण के लिए, {packages: ['corechart', 'table', 'sankey']}. हर चार्ट के लिए, दस्तावेज़ पेज के 'लोड हो रहा है' सेक्शन में पैकेज का नाम देखा जा सकता है.

इस उदाहरण में यह भी माना गया है कि आपके वेब पेज में कहीं drawChart नाम का एक JavaScript फ़ंक्शन तय किया गया है. उस फ़ंक्शन को अपनी पसंद के मुताबिक नाम दिया जा सकता है. हालांकि, पक्का करें कि वह दुनिया भर में यूनीक हो और google.charts.setOnLoadCallback को कॉल करने से पहले, उसका रेफ़रंस दिया गया हो.

ध्यान दें: 'Google चार्ट' के पिछले वर्शन में लाइब्रेरी को लोड करने के लिए ऐसे कोड का इस्तेमाल किया जाता था जो ऊपर दिए गए कोड से अलग होता है. नए कोड का इस्तेमाल करने के लिए, अपने मौजूदा चार्ट अपडेट करने के बारे में जानने के लिए, लाइब्रेरी लोडर कोड अपडेट करना लेख पढ़ें.

यहां, डेटा लोड करने की बुनियादी तकनीक का इस्तेमाल करके, पाई चार्ट बनाने का पूरा उदाहरण दिया गया है:

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

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
</head>
<body>
  <!-- Identify where the chart should be drawn. -->
  <div id="myPieChart"/>
</body>

जानकारी लोड हो रही है

सबसे पहले, आपको खुद लोडर लोड करना होगा, जिसे src="https://www.gstatic.com/charts/loader.js" के साथ अलग script टैग में किया जाता है. यह टैग, दस्तावेज़ के head या body में हो सकता है. इसके अलावा, इसे दस्तावेज़ लोड होने के दौरान या लोड होने के बाद, डाइनैमिक तौर पर दस्तावेज़ में डाला जा सकता है.

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

लोडर लोड होने के बाद, google.charts.load को कॉल किया जा सकता है. इसे दस्तावेज़ के head या body में मौजूद script टैग में कहीं भी कॉल किया जा सकता है. साथ ही, इसे दस्तावेज़ लोड होने के दौरान या लोड होने के बाद किसी भी समय कॉल किया जा सकता है.

वर्शन 45 के बाद, अतिरिक्त पैकेज लोड करने के लिए, google.charts.load को एक से ज़्यादा बार कॉल किया जा सकता है. हालांकि, ऐसा न करना ही बेहतर है. हर बार आपको एक ही वर्शन नंबर और भाषा की सेटिंग देनी होगी.

अब आपके पास पुराने JSAPI autoload यूआरएल पैरामीटर का इस्तेमाल करने का विकल्प है. हालांकि, इस पैरामीटर की वैल्यू में सख्त JSON फ़ॉर्मैटिंग और यूआरएल कोड में बदलने की सुविधा का इस्तेमाल करना ज़रूरी है. JavaScript में, इस कोड की मदद से jsonObject को कोड में बदला जा सकता है: encodeURIComponent(JSON.stringify(jsonObject)).

सीमाएं

अगर v45 से पहले के वर्शन का इस्तेमाल किया जा रहा है, तो Google Charts को लोड करने के तरीके में कुछ छोटी, लेकिन अहम सीमाएं हैं:

google.charts.load को सिर्फ़ एक बार कॉल किया जा सकता है. हालांकि, एक कॉल में उन सभी पैकेज की सूची बनाई जा सकती है जिनकी आपको ज़रूरत होगी. इससे, अलग-अलग कॉल करने की ज़रूरत नहीं पड़ेगी.
अगर ChartWrapper का इस्तेमाल किया जा रहा है, तो आपको अपने काम के सभी पैकेज साफ़ तौर पर लोड करने होंगे. उन्हें अपने-आप लोड करने के लिए, ChartWrapper पर भरोसा न करें.
जियोचार्ट और मैप चार्ट के लिए, आपको पुराना लाइब्रेरी लोडर और नया लाइब्रेरी लोडर, दोनों को लोड करना होगा. ध्यान दें, यह सुविधा सिर्फ़ वर्शन 45 से पहले के वर्शन के लिए उपलब्ध है. आपको बाद के वर्शन के लिए ऐसा नहीं करना चाहिए.
```
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
```

वर्शन का नाम या नंबर लोड करना

google.charts.load कॉल का पहला आर्ग्युमेंट, वर्शन का नाम या नंबर होता है. फ़िलहाल, खास वर्शन के सिर्फ़ दो नाम और फ़्रीज़ किए गए कई वर्शन हैं.

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

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

कई Google Chart क्रिएटर्स अपने चार्ट के रंग-रूप को तब तक बेहतर बनाते हैं, जब तक कि वह ठीक वैसा नहीं होता जैसा वे चाहते हैं. कुछ क्रिएटर्स को यह जानकर बेहतर महसूस हो सकता है कि आने वाले समय में, हम चार्ट में जो भी सुधार करेंगे, उनका चार्ट कभी नहीं बदलेगा. ऐसे उपयोगकर्ताओं के लिए, हम फ़्रीज़ किए गए Google Charts का इस्तेमाल करते हैं.

फ़्रोज़न चार्ट वर्शन की पहचान संख्या से की जाती है और उनके बारे में हमारी आधिकारिक रिलीज़ में बताया जाता है. फ़्रीज़ किए गए वर्शन को लोड करने के लिए, google.charts.load के कॉल में current या upcoming को फ़्रीज़ किए गए वर्शन के नंबर से बदलें:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    ...
</script>

हमें उम्मीद है कि फ़्रीज़ किए गए वर्शन, अनलिमिटेड समय तक उपलब्ध रहेंगे. हालांकि, हम उन वर्शन को हटा सकते हैं जिनमें सुरक्षा से जुड़ी समस्याएं हैं. आम तौर पर, हम फ़्रीज़ किए गए वर्शन के लिए सहायता नहीं देंगे. हालांकि, हम आपको नए वर्शन पर अपग्रेड करने का सुझाव देंगे.

सेटिंग लोड करना

आपके google.charts.load के कॉल में दूसरा पैरामीटर, सेटिंग तय करने के लिए एक ऑब्जेक्ट है. सेटिंग के लिए, ये प्रॉपर्टी इस्तेमाल की जा सकती हैं.

पैकेज

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

भाषा

भाषा या स्थानीय भाषा का कोड, जिसे चार्ट के हिस्से के तौर पर इस्तेमाल किए जाने वाले टेक्स्ट को पसंद के मुताबिक बनाने के लिए इस्तेमाल किया जाना चाहिए. ज़्यादा जानकारी के लिए, जगहों के हिसाब से जानकारी देखें.

कॉलबैक

एक फ़ंक्शन, जिसे पैकेज लोड होने के बाद कॉल किया जाएगा. इसके अलावा, ऊपर दिए गए उदाहरण में दिखाए गए तरीके के मुताबिक, google.charts.setOnLoadCallback को कॉल करके भी इस फ़ंक्शन को तय किया जा सकता है. ज़्यादा जानकारी के लिए, कॉलबैक देखें.

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

mapsApiKey

(v45) इस सेटिंग की मदद से, एक ऐसी कुंजी तय की जा सकती है जिसका इस्तेमाल, जियोचार्ट और मैप चार्ट के साथ किया जा सकता है. आप डिफ़ॉल्ट रूप से इस्तेमाल करने के बजाय ऐसा कर सकते हैं. इसकी वजह से, आपके उपयोगकर्ताओं को समय-समय पर सेवा में रुकावट का सामना करना पड़ सकता है. 'Google Maps JavaScript API' सेवा का इस्तेमाल करने के लिए, अपनी कुंजी सेट अप करने का तरीका यहां जानें: कुंजी/पुष्टि करने का तरीका. आपका कोड कुछ ऐसा दिखेगा:

  var myMapsApiKey = 'SomeMagicToSetThis';
  google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });

safeMode

(v47) इस विकल्प को 'सही' पर सेट करने पर, उपयोगकर्ता से मिले डेटा से एचटीएमएल जनरेट करने वाले सभी चार्ट और टूलटिप, असुरक्षित एलिमेंट और एट्रिब्यूट को हटाकर उसे सुरक्षित बना देंगे. इसके अलावा, लाइब्रेरी को सुरक्षित मोड में लोड करने के लिए, एक शॉर्टकट का इस्तेमाल किया जा सकता है. यह शॉर्टकट, लोड करने की वही सेटिंग इस्तेमाल करता है जो सामान्य मोड में इस्तेमाल की जाती हैं. हालांकि, यह हमेशा "मौजूदा" वर्शन लोड करता है:

  google.charts.safeLoad({ packages: ['corechart'] });

स्थान-भाषा

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

डिफ़ॉल्ट रूप से, Google Charts "en" भाषा के साथ लोड होता है. लोड करने की सेटिंग में, किसी भाषा को साफ़ तौर पर बताकर, इस डिफ़ॉल्ट सेटिंग को बदला जा सकता है.

किसी खास स्थानीय भाषा के लिए फ़ॉर्मैट किया गया चार्ट लोड करने के लिए, language सेटिंग का इस्तेमाल इस तरह करें:

  // Load Google Charts for the Japanese locale.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

लाइव उदाहरण के लिए, इस लिंक पर जाएं.

कॉलबैक

google.charts.load के लोड किए गए किसी भी पैकेज का इस्तेमाल करने से पहले, आपको लोड होने का इंतज़ार करना होगा. सिर्फ़ दस्तावेज़ के लोड होने का इंतज़ार करना काफ़ी नहीं है. इस लोडिंग को पूरा होने में कुछ समय लग सकता है. इसलिए, आपको एक कॉलबैक फ़ंक्शन रजिस्टर करना होगा. ऐसा करने के तीन तरीके हैं. अपने google.charts.load कॉल में callback सेटिंग तय करें या तर्क के तौर पर फ़ंक्शन पास करने के लिए setOnLoadCallback को कॉल करें या google.charts.load कॉल करने पर दिए गए प्रॉमिस का इस्तेमाल करें.

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

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

  google.charts.setOnLoadCallback(drawChart1);
  google.charts.setOnLoadCallback(drawChart2);
  // OR
  google.charts.setOnLoadCallback(
    function() { // Anonymous function that calls drawChart1 and drawChart2
         drawChart1();
         drawChart2();
      });

Promise के ज़रिए कॉलबैक

अपने कॉलबैक को रजिस्टर करने का एक और तरीका, google.charts.load कॉल से मिलने वाले प्रॉमिस का इस्तेमाल करना है. ऐसा करने के लिए, then() कोड के साथ, इस तरह के तरीके का कॉल जोड़ें.

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

Promise का इस्तेमाल करने का एक फ़ायदा यह है कि ज़्यादा .then(anotherFunction) कॉल को चेन करके, आसानी से ज़्यादा चार्ट बनाए जा सकते हैं. Promise का इस्तेमाल करने पर, कॉलबैक को उस कॉलबैक के लिए ज़रूरी खास पैकेज से भी जोड़ दिया जाता है. यह तब ज़रूरी होता है, जब आपको google.charts.load() के किसी दूसरे कॉल से ज़्यादा पैकेज लोड करने हों.

लाइब्रेरी लोडर कोड अपडेट करना

Google Charts के पिछले वर्शन में, लाइब्रेरी लोड करने के लिए अलग कोड का इस्तेमाल किया जाता था. नीचे दी गई टेबल में, पुराने कोड और नए कोड के मुकाबले, पुराना कोड दिखाया गया है.

पुरानी लाइब्रेरी लोडर कोड
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); </script>
नया लाइब्रेरी लोडर कोड
<script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); </script>

पुरानी लाइब्रेरी लोडर कोड

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
</script>

नया लाइब्रेरी लोडर कोड

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

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

अगला लेख: डेटा तैयार करना