इस पेज का अनुवाद 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 पर निर्भर करने के बजाय, अपने-आप लोड हो जाएगी.
भौगोलिक चार्ट और मैप चार्ट के लिए, आपको पुराना लाइब्रेरी लोडर और नया लाइब्रेरी लोडर, दोनों लोड करने होंगे. ध्यान रखें कि यह वर्शन सिर्फ़ v45 से पहले के वर्शन के लिए है. आपको बाद के वर्शन के लिए ऐसा नहीं करना चाहिए.
```
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
```

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

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

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

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

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

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

<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  });

सेफ़ मोड

(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);

प्रॉमिस का इस्तेमाल करने का एक फ़ायदा यह भी है कि आप ज़्यादा .then(anotherFunction) कॉल करके, आसानी से ज़्यादा चार्ट बना सकते हैं. प्रॉमिस का इस्तेमाल करने पर, कॉलबैक को उस कॉलबैक के लिए ज़रूरी खास पैकेज से भी जोड़ा जाता है. यह तब ज़रूरी होता है, जब आप 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>

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

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