इस पेज का अनुवाद 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 चार्ट' की सबसे नई आधिकारिक रिलीज़ लोड हो जाती है. अगर आपको अगली रिलीज़ के लिए उम्मीदवार को आज़माना है, तो '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 चार्ट को लोड करने के तरीके में कुछ छोटी, लेकिन अहम सीमाएं हैं:

आप 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 चार्ट के नए वर्शन रिलीज़ करते हैं, तो उनमें से कुछ बड़े बदलाव होते हैं, जैसे कि पूरी तरह से नए चार्ट टाइप. अन्य बदलाव छोटे होते हैं, जैसे मौजूदा चार्ट के दिखने या काम करने के तरीके में सुधार.

कई 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 का इस्तेमाल करने पर, किसी भी पैकेज के बारे में बताने से बचा जा सकता है.

language

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

कॉलबैक

एक फ़ंक्शन, जिसे पैकेज लोड होने के बाद कॉल किया जाएगा. इसके अलावा, ऊपर दिए गए उदाहरण में बताए गए तरीके से, 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) अगर नीति को 'सही है' पर सेट किया जाता है, तो उपयोगकर्ता से मिले डेटा से एचटीएमएल जनरेट करने वाले सभी चार्ट और टूलटिप, असुरक्षित एलिमेंट और एट्रिब्यूट को हटाकर, उसे सैनिटाइज़ कर देंगे. इसके अलावा, (v49+) भी लाइब्रेरी को सुरक्षित मोड में लोड करने के लिए, ऐसे शॉर्टकट का इस्तेमाल किया जा सकता है जो समान लोडिंग सेटिंग स्वीकार करता हो, लेकिन हमेशा "मौजूदा" वर्शन को लोड करता हो:

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

स्थान-भाषा

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

डिफ़ॉल्ट रूप से, 'Google चार्ट' में "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();
      });

प्रॉमिस के ज़रिए कॉलबैक करें

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

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

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

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

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

पुरानी लाइब्रेरी लोडर कोड
<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>

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

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