विज़ुअलाइज़ेशन: जियोचार्ट

खास जानकारी

जियोचार्ट किसी देश, महाद्वीप या क्षेत्र का मैप होता है, जिसमें तीन में से किसी एक तरीके से इलाके की पहचान की जाती है:

  • क्षेत्र मोड देशों, प्रांतों या राज्यों जैसे पूरे क्षेत्रों को रंगता है.
  • मार्कर मोड उन इलाकों को तय करने के लिए सर्कल का इस्तेमाल करता है जिन्हें आपकी बताई गई वैल्यू के मुताबिक बढ़ाया जाता है.
  • टेक्स्ट मोड, क्षेत्रों को आइडेंटिफ़ायर से लेबल करता है (उदाहरण के लिए, "रूस" या "एशिया").

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

इलाके के हिसाब से जियोचार्ट

regions स्टाइल पूरे क्षेत्रों (आम तौर पर देशों) को आपकी असाइन की गई वैल्यू से मिलते-जुलते रंगों से भर देता है.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

मार्कर जियोचार्ट

markers स्टाइल, जियोचार्ट पर बताई गई जगहों पर सर्कल रेंडर करता है. इनमें, आपके दिए गए रंग और साइज़ होते हैं.
रोम के आस-पास मौजूद अव्यवस्थित मार्कर पर माउस घुमाने की कोशिश करें और मार्कर को ज़्यादा जानकारी के साथ दिखाने के लिए एक मैग्नीफ़ाइंग ग्लास खुल जाएगा. (मेग्नीफ़ाइंग ग्लास, Internet Explorer वर्शन 8 या इससे पहले के वर्शन पर काम नहीं करता.)

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['City',   'Population', 'Area'],
        ['Rome',      2761477,    1285.31],
        ['Milan',     1324110,    181.76],
        ['Naples',    959574,     117.27],
        ['Turin',     907563,     130.17],
        ['Palermo',   655875,     158.9],
        ['Genoa',     607906,     243.60],
        ['Bologna',   380181,     140.7],
        ['Florence',  371282,     102.41],
        ['Fiumicino', 67370,      213.44],
        ['Anzio',     52192,      43.43],
        ['Ciampino',  38262,      11]
      ]);

      var options = {
        region: 'IT',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

आनुपातिक मार्कर प्रदर्शित करना

आम तौर पर, मार्कर जियोचार्ट सबसे छोटे मार्कर मान को कम से कम बिंदु के रूप में दिखाते हैं. इसके बजाय, अगर आप अनुपात के हिसाब से मार्कर वैल्यू (जैसे, वे प्रतिशत हैं) दिखाना चाहते हैं, तो minValue और maxValue को साफ़ तौर पर सेट करने के लिए sizeAxis विकल्प का इस्तेमाल करें.

उदाहरण के लिए, यहां पश्चिमी यूरोप का नक्शा दिया गया है, जिसमें तीन देशों के लिए जनसंख्या और क्षेत्र हैं: फ़्रांस, जर्मनी, और पोलैंड. सभी जनसंख्याएं, आंकड़ों की सटीक वैल्यू होती हैं. उदाहरण के लिए, फ़्रांस के लिए)

इस कोड में, हम 0 से 100 के बीच की रेंज में मार्कर साइज़ बताने के लिए sizeAxis का इस्तेमाल करते हैं. हम जनसंख्या को नारंगी से नीले रंग की रेंज के रूप में दिखाने के लिए RGB वैल्यू वाले colorAxis का भी इस्तेमाल करते हैं. यह एक ऐसा स्पेक्ट्रम है जो कलर विज़न की कमी वाले उपयोगकर्ताओं के लिए अच्छा होता है. आखिर में, हम इस पश्चिमी दस्तावेज़ में "कॉन्टेंट हैरारकी और कोड" सेक्शन के मुताबिक, 155 के region के साथ पश्चिमी यूरोप की जानकारी देते हैं.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country',   'Population', 'Area Percentage'],
        ['France',  65700000, 50],
        ['Germany', 81890000, 27],
        ['Poland',  38540000, 23]
      ]);

      var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        region: '155', // Western Europe
        displayMode: 'markers',
        colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

टेक्स्ट जियोचार्ट

displayMode: text की मदद से, टेक्स्ट लेबल को जियोचार्ट पर डाला जा सकता है.

डेटा और विकल्प
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };
पूरा एचटीएमएल
<html>
 <head>
  <script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="regions_div" style="width: 900px; height: 500px;"></div>

  <script type="text/javascript">
  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: Because this chart requires geocoding, you'll need a mapsApiKey.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });
  google.charts.setOnLoadCallback(drawRegionsMap);

   function drawRegionsMap() {
     var data = google.visualization.arrayToDataTable([
       ['Country', 'Popularity'],
       ['South America', 600],
       ['Canada', 500],
       ['France', 600],
       ['Russia', 700],
       ['Australia', 600]
     ]);

     var options = { displayMode: 'text' };

     var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

     chart.draw(data, options);
   }
  </script>
 </head>
 <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
 </body>
</html>

अपने चार्ट में रंग भरना

भौगोलिक चार्ट के रंगों को पसंद के मुताबिक बनाने के कई विकल्प हैं:

  • colorAxis: डेटाटेबल में क्षेत्रों के लिए उपयोग किए जाने वाले रंगों का स्पेक्ट्रम.
  • backgroundColor: चार्ट का बैकग्राउंड कलर.
  • datalessRegionColor: उन क्षेत्रों को असाइन करने के लिए रंग जहां कोई डेटा मौजूद नहीं है.
  • defaultColor: डेटाटेबल में उन क्षेत्रों को असाइन किया जाने वाला रंग जिनके लिए मान null है या जिनके बारे में जानकारी नहीं है.

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

इस चार्ट में, हम सभी चारों विकल्पों का उपयोग करेंगे. colorAxis का इस्तेमाल अफ़्रीका और भारत के अक्षांशों का इस्तेमाल करके, अफ़्रीका और अफ़्रीका के फ़्लैन के रंगों के साथ अफ़्रीका को दिखाने के लिए किया जाता है. ये चिह्न, लाल रंग से लेकर दक्षिण से दक्षिणी हिस्से में दिखाए जाते हैं. backgroundColor विकल्प का इस्तेमाल, बैकग्राउंड को हल्का नीला, datalessRegionColor को गैर-अफ़्रीकी देशों को हल्के गुलाबी, और defaultColor को मैडागास्कर के लिए रंग देने के लिए किया जाता है.

विकल्प
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
पूरा वेब पेज
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: Because this chart requires geocoding, you'll need mapsApiKey.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country',   'Latitude'],
          ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
          ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
          ['Canary Islands', 28], ['Cape Verde', 15],
          ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
          ['Comoros', -12], ['Cote d\'Ivoire', 6],
          ['Democratic Republic of the Congo', -3], ['Djibouti', 12],
          ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
          ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
          ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
          ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
          ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
          ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
          ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
          ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
          ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
          ['São Tomé and Principe', 0], ['Senegal', 15],
          ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
          ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
          ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
          ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
          ['Zimbabwe', -18]
        ]);

        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="geochart-colors" style="width: 700px; height: 433px;"></div>
  </body>
</html>

लोड हो रहा है

google.charts.load पैकेज का नाम "geochart" है. ध्यान रखें कि आपको हमारा mapsApiKey कॉपी नहीं करना चाहिए; जो काम नहीं करेगा. जब तक आपके चार्ट के लिए भौगोलिक कोडिंग की ज़रूरत नहीं होती, तब तक आपको MapApiKey की ज़रूरत नहीं है. ज़्यादा जानकारी के लिए, सेटिंग लोड करना देखें.

  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: if your chart requires geocoding or uses nonstandard codes, you'll
    // need to get a mapsApiKey for your project. The one below won't work.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });

जियोचार्ट विज़ुअलाइज़ेशन क्लास का नाम google.visualization.GeoChart है.

  var visualization = new google.visualization.GeoChart(container);

डेटा फ़ॉर्मैट

DataTable का फ़ॉर्मैट इस बात पर निर्भर करता है कि आप किस डिसप्ले मोड का इस्तेमाल करते हैं: regions, markers या text.

'क्षेत्र' मोड का फ़ॉर्मैट

जगह की जानकारी एक कॉलम में डाली जाती है. साथ ही, यहां बताए गए तरीके से एक वैकल्पिक कॉलम भी डाला जाता है:

  1. क्षेत्र की जगह [स्ट्रिंग, ज़रूरी है] - हाइलाइट किया जाने वाला क्षेत्र. नीचे दिए गए सभी फ़ॉर्मैट स्वीकार किए जाते हैं. अलग-अलग लाइन का इस्तेमाल अलग-अलग लाइन में किया जा सकता है:
    • स्ट्रिंग के तौर पर देश का नाम (उदाहरण के लिए, "इंग्लैंड"), या अपरकेस ISO-3166-1 ऐल्फ़ा-2 कोड या इसका अंग्रेज़ी टेक्स्ट एक जैसा है (उदाहरण के लिए, "GB" या "यूनाइटेड किंगडम").
    • अंग्रेज़ी के बड़े अक्षरों में लिखे गए ISO-3166-2 कोड का नाम, या अंग्रेज़ी भाषा में इसके बराबर नाम (जैसे, "US-NJ" या "न्यू जर्सी").
    • महानगरीय क्षेत्र का कोड. इन तीन अंकों वाले महानगर के कोड, जिनका इस्तेमाल अलग-अलग इलाकों के लिए किया जाता है. सिर्फ़ अमेरिका के कोड के लिए इनकी सुविधा है. ध्यान दें कि ये टेलीफ़ोन क्षेत्र कोड से अलग नहीं होते हैं.
    • region प्रॉपर्टी के साथ काम करने वाला कोई भी मान.
  2. क्षेत्र का रंग [संख्या, ज़रूरी नहीं] - colorAxis.colors प्रॉपर्टी में दिए गए स्केल के आधार पर, इस क्षेत्र को रंग देने के लिए इस्तेमाल किया जाने वाला वैकल्पिक न्यूमेरिक कॉलम. अगर यह कॉलम मौजूद नहीं है, तो सभी इलाकों का रंग एक ही होगा. अगर कॉलम मौजूद है, तो शून्य वैल्यू की अनुमति नहीं है. वैल्यू को sizeAxis.minValue/sizeAxis.maxValue वैल्यू या colorAxis.values प्रॉपर्टी में बताई गई वैल्यू के हिसाब से बढ़ाया जाता है.

मार्कर मोड का फ़ॉर्मैट

कॉलम की संख्या, इस्तेमाल किए जाने वाले मार्कर फ़ॉर्मैट के साथ-साथ अन्य वैकल्पिक कॉलम के हिसाब से अलग-अलग हो सकती है.

  • मार्कर की जगह [ज़रूरी है]
    पहला कॉलम एक खास स्ट्रिंग पता होता है (उदाहरण के लिए, "1600 पेंसिलवेनिया एवेन्यू").

    या

    पहले दो कॉलम संख्या में होते हैं. इनमें पहला कॉलम अक्षांश और दूसरा कॉलम देशांतर होता है.

    ध्यान दें: हम सुझाव देते हैं कि 'क्षेत्र' मोड में इस्तेमाल करने के लिए, ISO 3166 कोड इस्तेमाल करें. इसकी वजह यह है कि जियोचार्ट 'मार्कर' मोड में होने पर, जगहों को जियोकोड करने के लिए Google Maps का इस्तेमाल किया जाता है. इसकी मदद से, किसी स्ट्रिंग की जगह को अक्षांश और देशांतर में बदला जाता है. इस वजह से, हो सकता है कि आपकी जगहों को आपकी उम्मीद के मुताबिक भौगोलिक जगह न मिल पाए. जैसे, जर्मनी या डेलावेयर के लिए 'DE' खड़े होने की जगह या पनामा या पेंसिलवेनिया में 'PA' खड़े होने की स्थिति.

  • मार्कर का रंग [संख्या, ज़रूरी नहीं] अगला कॉलम, संख्या के तौर पर एक वैकल्पिक कॉलम है. इसका इस्तेमाल colorAxis.colors प्रॉपर्टी में दिए गए स्केल के आधार पर, इस मार्कर को रंग असाइन करने के लिए किया जाता है. अगर यह कॉलम मौजूद नहीं है, तो सभी मार्कर का रंग एक जैसा होगा. अगर कॉलम मौजूद है, तो शून्य वैल्यू की अनुमति नहीं है. वैल्यू को एक-दूसरे के हिसाब से या पूरी तरह से colorAxis.values प्रॉपर्टी में तय की गई वैल्यू के हिसाब से स्केल किया जाता है.
  • मार्कर का साइज़ [नंबर, ज़रूरी नहीं] मार्कर का इस्तेमाल एक वैकल्पिक कॉलम होता है. इसका इस्तेमाल मार्कर के साइज़ को तय करने के लिए किया जाता है. यह मार्कर मार्कर के दूसरे साइज़ से मिलता-जुलता होता है. अगर यह कॉलम मौजूद नहीं है, तो पिछले कॉलम की वैल्यू का इस्तेमाल किया जाएगा (या डिफ़ॉल्ट साइज़, अगर कोई कलर कॉलम नहीं दिया गया है). अगर कॉलम मौजूद है, तो शून्य वैल्यू की अनुमति नहीं है.

टेक्स्ट मोड फ़ॉर्मैट

लेबल को पहले कॉलम में डाला जाता है. साथ ही, एक वैकल्पिक कॉलम भी डाला जाता है:

  • टेक्स्ट लेबल [स्ट्रिंग, ज़रूरी है] कोई खास स्ट्रिंग पता (उदाहरण के लिए, "1600 पेंसिलवेनिया एवेन्यू").
  • टेक्स्ट का साइज़ [संख्या, ज़रूरी नहीं] दूसरा कॉलम, संख्या वाला वैकल्पिक कॉलम है. इसे लेबल का साइज़ असाइन करने के लिए इस्तेमाल किया जाता है. अगर यह कॉलम मौजूद नहीं है, तो सभी लेबल का साइज़ एक जैसा होगा.

कॉन्फ़िगरेशन के विकल्प

नाम
बैकग्राउंड का रंग

चार्ट के मुख्य हिस्से का बैकग्राउंड कलर. यह एचटीएमएल रंग की सामान्य स्ट्रिंग हो सकती है. उदाहरण के लिए: 'red' या '#00cc00'. इसके अलावा, यह नीचे दी गई प्रॉपर्टी वाला ऑब्जेक्ट भी हो सकता है.

टाइप: स्ट्रिंग या ऑब्जेक्ट
डिफ़ॉल्ट: सफ़ेद
बैकग्राउंड का रंग भरें

चार्ट, एचटीएमएल कलर स्ट्रिंग के तौर पर रंग भरता है.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: सफ़ेद
बैकग्राउंड का रंग

चार्ट के बॉर्डर का रंग, एचटीएमएल कलर स्ट्रिंग के तौर पर.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#666'
पृष्ठभूमिरंग.स्ट्रोकचौड़ाई

बॉर्डर की चौड़ाई, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: 0
ColorAxis

वह ऑब्जेक्ट जो कलर कॉलम की वैल्यू और कलर या ग्रेडिएंट स्केल के बीच मैपिंग करता है. इस ऑब्जेक्ट की प्रॉपर्टी तय करने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
colorAxis.minValue

अगर मौजूद हो, तो चार्ट में रंग डेटा के लिए कम से कम वैल्यू तय की जाती है. इस वैल्यू और इससे कम के कलर डेटा की वैल्यू को colorAxis.colors रेंज में पहले रंग के तौर पर दिखाया जाएगा.

टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, कलर कॉलम की कम से कम वैल्यू
colorAxis.maxValue

अगर मौजूद हो, तो चार्ट के रंग डेटा के लिए ज़्यादा से ज़्यादा वैल्यू तय करता है. इस वैल्यू और इससे ज़्यादा वैल्यू के कलर डेटा की वैल्यू, colorAxis.colors रेंज में आखिरी कलर के तौर पर रेंडर की जाएगी.

टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, कलर कॉलम की ज़्यादा से ज़्यादा वैल्यू
colorAxis.values

मौजूद होने पर यह कंट्रोल किया जाता है कि वैल्यू को रंगों से किस तरह जोड़ा जाए. हर वैल्यू, colorAxis.colors कैटगरी में मौजूद रंग से जुड़ी होती है. ये वैल्यू, चार्ट के कलर डेटा पर लागू होती हैं. रंग यहां बताए गए मानों के ग्रेडिएंट के अनुसार किए जाते हैं. इस विकल्प के लिए वैल्यू की जानकारी देना, [minValue, maxValue] तय करने के बराबर है.

टाइप: संख्याओं की श्रेणी
डिफ़ॉल्ट: शून्य
colorAxis.colors

विज़ुअलाइज़ेशन में वैल्यू के लिए रंग. स्ट्रिंग की श्रेणी, जहां हर एलिमेंट एक एचटीएमएल कलर स्ट्रिंग होता है, उदाहरण के लिए: colorAxis: {colors:['red','#004411']}. आपके पास कम से कम दो वैल्यू होनी चाहिए. ग्रेडिएंट में, आपकी सभी वैल्यू और सबसे कम वैल्यू वाली आखिरी वैल्यू के साथ आखिरी वैल्यू, सबसे छोटी वैल्यू के तौर पर इंटरमीडिएट वैल्यू शामिल होंगी.

टाइप: रंग वाली स्ट्रिंग की कैटगरी
डिफ़ॉल्ट: शून्य
बिना डेटा वाला क्षेत्र का रंग

बिना किसी डेटा वाले क्षेत्रों को असाइन करने के लिए रंग.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#F5F5F5'
डिफ़ॉल्ट रंग

जगह के हिसाब से जियोचार्ट में डेटा पॉइंट दिखाने के लिए, इस्तेमाल किया जाने वाला रंग (उदाहरण, 'US' ) मौजूद है, लेकिन वैल्यू null है या नहीं. यह datalessRegionColor से अलग है. इसका मतलब है कि रंग मौजूद नहीं होने पर इसका इस्तेमाल किया जाता है.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#267114'
डिसप्ले मोड

यह किस तरह का जियोचार्ट है. DataTable फ़ॉर्मैट, दी गई वैल्यू से मेल खाना चाहिए. इस पर इस्तेमाल की जा सकती हैं:

  • 'अपने-आप' - DataTable के फ़ॉर्मैट के आधार पर चुनें.
  • 'इलाके' - जियोचार्ट पर क्षेत्रों को रंग दें.
  • 'मार्कर' - क्षेत्रों पर मार्कर लगाएं.
  • 'text' - DataTable के टेक्स्ट वाले क्षेत्रों को लेबल करें.
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'अपने-आप'
डोमेन

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: शून्य
रीजनल इंटरैक्टिविटी चालू करें

सही होने पर, माउस होवर पर फ़ोकस और टूल-टिप बढ़ाने और क्षेत्र चुनने और माउस क्लिक करने पर regionClick और select इवेंट के सक्रिय होने सहित क्षेत्र की सहभागिता चालू करें.

डिफ़ॉल्ट रूप से, यह मोड मोड में सही होता है और मार्कर मोड में गलत होता है.

टाइप: बूलियन
डिफ़ॉल्ट: अपने-आप
फ़ोर्सआईफ़्रेम

चार्ट को इनलाइन फ़्रेम के अंदर दिखाता है. (ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है; सभी IE8 चार्ट को i-frame में बनाया गया है.)

टाइप: बूलियन
डिफ़ॉल्ट: गलत
जियोचार्टवर्शन

भौगोलिक चार्ट के बॉर्डर डेटा का वर्शन. 10 और 11 वर्शन उपलब्ध हैं.

टाइप: नंबर
डिफ़ॉल्ट:10
ऊंचाई

पिक्सल में, विज़ुअलाइज़ेशन की ऊंचाई. डिफ़ॉल्ट ऊंचाई 347 पिक्सल है. जब तक width के विकल्प के बारे में बताया नहीं जाता और keepAspectRatio को 'सही' पर सेट नहीं किया जाता - दोनों मामलों में ऊंचाई का हिसाब इसके हिसाब से लगाया जाता है.

टाइप: नंबर
डिफ़ॉल्ट: अपने-आप
Keepऐप की आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) रखें

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

अगर गलत हो, तो जियोचार्ट को चार्ट के सटीक साइज़ तक बढ़ाया जाएगा, जैसा कि width और height विकल्पों में बताया गया है.

टाइप: बूलियन
डिफ़ॉल्ट: true
लेजेंड

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

 {textStyle: {color: 'blue', fontSize: 16}}
टाइप: ऑब्जेक्ट / 'कोई नहीं'
डिफ़ॉल्ट: शून्य
लेजेंड.नंबर फ़ॉर्मैट

संख्या वाले लेबल के लिए फ़ॉर्मैट स्ट्रिंग. यह आईसीयू पैटर्न सेट का सबसेट है. उदाहरण के लिए, {numberFormat:'.##'} "10.66", "10.6", और "10.0" को 10.666, 10.6, और 10 वैल्यू के तौर पर दिखाएगा.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
लेजेंड.टेक्स्टस्टाइल

ऐसा ऑब्जेक्ट जो लेजेंड टेक्स्ट की स्टाइल बताता है. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, उदाहरण के लिए: 'red' या '#00cc00'. fontName और fontSize भी देखें.

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
इलाका

जियोचार्ट पर दिखाया जाने वाला इलाका. (आस-पास के क्षेत्र भी दिखाए जाएंगे.) इनमें से कोई एक हो सकती है:

  • 'दुनिया' - पूरी दुनिया का एक जियोचार्ट.
  • किसी महाद्वीप या उपमहाद्वीप में मौजूद तीन अंकों के कोड से, उदाहरण के लिए, पश्चिमी अफ़्रीका के लिए '011'.
  • कोई देश, जो अपने ISO 3166-1 ऐल्फ़ा-2 कोड से तय होता है, जैसे, ऑस्ट्रेलिया के लिए 'AU'.
  • अमेरिका का कोई राज्य, जिसे इसके ISO 3166-2:US कोड से दिखाया जाता है, उदाहरण के लिए, अलाबामा के लिए 'US-AL'. ध्यान रखें कि resolution के विकल्प को 'प्रांत' या 'मेटर्स' पर सेट करना ज़रूरी है.
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'दुनिया'
मैग्नीग्लास

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

{enable: true, zoomFactor: 7.5}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: {enable: true, zoomFactor: 5.0}
मैग्नीफ़ाइंग ग्लास को चालू करें

अगर सही है, तो उपयोगकर्ता जब अव्यवस्थित मार्कर पर रुकता है, तो मैग्नीफ़ाइंग ग्लास खुल जाता है.

ध्यान दें: यह सुविधा ऐसे ब्राउज़र में काम नहीं करती जो SVG के साथ काम नहीं करते. उदाहरण के लिए, Internet Explorer का वर्शन 8 या इससे पहले का वर्शन.

टाइप: बूलियन
डिफ़ॉल्ट: true
आवर्द्धनGlass.zoomFactor

मैग्नीफ़ाइंग ग्लास का ज़ूम फ़ैक्टर. यह 0 से बड़ी कोई भी संख्या हो सकती है.

टाइप: नंबर
डिफ़ॉल्ट: 5.0
मार्कर की ओपैसिटी

मार्कर की पारदर्शिता, जहां 0.0 पूरी तरह से पारदर्शी है और 1.0 पूरी तरह से अपारदर्शी है.

टाइप: नंबर, 0.0–1.0
डिफ़ॉल्ट: 1.0
AreacoderVersion

Areacoder डेटा का वर्शन. 0 और 1 वर्शन उपलब्ध हैं.

टाइप: नंबर
डिफ़ॉल्ट:0
रिज़ॉल्यूशन

जियोचार्ट बॉर्डर का रिज़ॉल्यूशन. इनमें से कोई एक वैल्यू चुनें:

  • 'देश' - अमेरिका के राज्य के अलावा, सभी क्षेत्रों के लिए उपलब्ध.
  • 'प्रांत' - केवल देश के क्षेत्रों और अमेरिकी राज्य के क्षेत्रों के लिए समर्थित. यह सुविधा सभी देशों में उपलब्ध नहीं है. कृपया किसी देश में डालकर देखें कि यह विकल्प काम करता है या नहीं.
  • 'metaros' - सिर्फ़ अमेरिका के देश और अमेरिका के राज्यों के लिए उपलब्ध.
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'देश'
साइज़ ऐक्सिस

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

 {minValue: 0,  maxSize: 20}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
साइज़-ऐक्सिस

सबसे बड़े संभावित बबल की ज़्यादा से ज़्यादा पिक्सल, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: 12
साइज़Axis.maxValue

sizeAxis.maxSize के लिए मैप किए जाने वाले साइज़ का मान (जैसा कि चार्ट के डेटा में दिखता है). इस सेटिंग से, बड़ी वैल्यू को काटा जाएगा.

टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, साइज़ कॉलम की ज़्यादा से ज़्यादा वैल्यू
साइज़ ऐक्सिस का कम से कम साइज़

पिक्सल में, सबसे छोटे संभव बबल की कम से कम त्रिज्या.

टाइप: नंबर
डिफ़ॉल्ट: 3
साइज़Axis.minValue

sizeAxis.minSize के लिए मैप किए जाने वाले साइज़ का मान (जैसा कि चार्ट के डेटा में दिखता है). छोटी वैल्यू को, इस वैल्यू पर काट दिया जाएगा.

टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, साइज़ कॉलम की कम से कम वैल्यू
टूलटिप

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
टूलटिप

टूलटिप टेक्स्ट की स्टाइल के बारे में बताने वाला ऑब्जेक्ट. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, उदाहरण के लिए: 'red' या '#00cc00'. fontName और fontSize भी देखें.

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
टूलटिप

जिस उपयोगकर्ता इंटरैक्शन की वजह से टूलटिप दिखता है:

  • 'फ़ोकस' - जब उपयोगकर्ता एलिमेंट पर कर्सर घुमाता है, तो टूलटिप दिखता है.
  • 'कोई नहीं' - टूलटिप नहीं दिखाया जाएगा.
  • 'चुना हुआ' - जब उपयोगकर्ता एलिमेंट चुनता है, तो टूलटिप दिखता है.
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'फ़ोकस'
width

विज़ुअलाइज़ेशन में चौड़ाई, पिक्सल में. डिफ़ॉल्ट चौड़ाई 556 पिक्सल होती है, बशर्ते height विकल्प के बारे में बताया न गया हो और keepAspectRatio को सही पर सेट किया गया हो - इस स्थिति में चौड़ाई की गिनती इसी हिसाब से की जाती है.

टाइप: नंबर
डिफ़ॉल्ट: अपने-आप

 

महाद्वीप के क्रम और कोड

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

महाद्वीप उपमहाद्वीप देश
002 - अफ़्रीका 015 - उत्तरी अफ़्रीका DZ, EG, EH, LY, MA, SD, SS, TN
011 - पश्चिमी अफ़्रीका BF, BJ, CI, CV, GH, GM, GN, GW, एलआर, , ML, ली, 2,{2,{/1,{2,{/1,,
017 - मध्य अफ़्रीका AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - पूर्वी अफ़्रीका
018 - दक्षिणी अफ़्रीका BW, LS, NA, SZ, ZA
150 - यूरोप 154 - उत्तरी यूरोप GG
155 - पश्चिमी यूरोप AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL
151 - पूर्वी यूरोप BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
039 - दक्षिणी यूरोप AD, AL, BA, ES, GI, GR, HR, IT, ME, {1, {3 लगता है, 2, {, 2, 2, 2, 2, 2, 2, {, {2,{/1,} {2, {/ 2-2, 2-2, 2, { {2, {/ 2, 2-2, 2, { {2, {/-2, {2, { संदेश, {, 2-2-2, 2, 2, 2, 2, { {2, {2, 2-2, 2-2, 2,}
019 - अमेरिका 021 - उत्तरी अमेरिका BM, CA, GL, PM, US
029 - कैरेबियन
013 - मध्य अमेरिका BZ, CR, GT, HN, MX, NI, PA, SV
005 - दक्षिण अमेरिका AR, BO, BR, CL, CO, EC, FK, GF, GY, पीई, पीवाई, }
142 - एशिया 143 - मध्य एशिया TM, TJ, KG, KZ, UZ
030 - पूर्वी एशिया CN, HK, JP, KP, KR, MN, MO, TW
034 - दक्षिणी एशिया AF, BD, BT, IN, IR, LK, MV, NP, PK
035 - दक्षिण-पूर्व एशिया BN, ID, KH, LA, MM, BU, MY, PH, SG, th, TL, वें, T, }
145 - पश्चिमी एशिया
009 - ओशिएनिया 053 - ऑस्ट्रेलिया और न्यूज़ीलैंड AU, NF, न्यूज़ीलैंड
054 - मेलनेशिया FJ, NC, PG, SB, VU
057 - माइक्रोनेशिया FM, GU, KI, MH, MP, NR, PW
061 - पॉलिनेशिया AS, CK, NU, PF, PN, TK, TO, टीवी, WF, WS

तरीके

तरीका
clearChart()

चार्ट साफ़ करता है और अपने सभी आवंटित संसाधन रिलीज़ करता है.

सामान लौटाने का टाइप: कोई नहीं
draw(data, options)

चार्ट ड्रॉ करता है. चार्ट में, readyइवेंट के चालू होने के बाद ही दूसरे तरीके से कॉल किए जा सकते हैं. Extended description.

सामान लौटाने का टाइप: कोई नहीं
getImageURI()

चार्ट को चित्र यूआरआई के रूप में क्रमांकित करता है.

इसे चार्ट बनाने के बाद कॉल करें.

PNG चार्ट प्रिंट करना देखें.

सामान लौटाने का टाइप: स्ट्रिंग
getSelection()

चुनी गई चार्ट इकाइयों की श्रेणी दिखाता है. चुनी जा सकने वाली इकाइयां, ऐसे क्षेत्र होते हैं जिनमें असाइन की गई वैल्यू होती है. इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई को चुना जा सकता है. Extended description .

लौटाए गए आइटम का टाइप: चुने गए एलिमेंट की कैटगरी
setSelection()

चार्ट की दी गई इकाइयों को चुनें. पहले चुने गए को रद्द करता है. चुनी जा सकने वाली इकाइयां, ऐसे क्षेत्र होते हैं जिनमें असाइन की गई वैल्यू होती है. इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई को चुना जा सकता है. Extended description .

सामान लौटाने का टाइप: कोई नहीं

इवेंट

नाम
error

जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है, तब सक्रिय किया जाता है.

प्रॉपर्टी: आईडी, मैसेज
ready

चार्ट, मेथड कॉल के लिए तैयार है. चार्ट बनाने के बाद, अगर आपको चार्ट और इंटरैक्ट करने के तरीकों से इंटरैक्ट करना है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट चालू होने के बाद ही उन्हें कॉल करना चाहिए.

प्रॉपर्टी: कोई नहीं
regionClick

यह तब कॉल किया जाता है, जब किसी क्षेत्र पर क्लिक किया जाता है. 'क्षेत्र' विकल्प में दिए गए खास देश के लिए, इसे नहीं दिया जाएगा (अगर कोई खास देश सूची में मौजूद था).

प्रॉपर्टी: एक प्रॉपर्टी region वाला ऑब्जेक्ट, जो ISO-3166 फ़ॉर्मैट में है. उस स्ट्रिंग में, क्लिक किए गए क्षेत्र का ब्यौरा होता है.
select

तब सक्रिय होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. अगर आपको चुना गया है, तो यह जानने के लिए getSelection() को कॉल करें.

प्रॉपर्टी: कोई नहीं

डेटा नीति

Google Maps, जगहों की जानकारी को भौगोलिक जगह पर भेजता है. ऐसा कोई भी डेटा किसी भी सर्वर को नहीं भेजा जाता है जिसके लिए जियोकोडिंग की ज़रूरत नहीं होती है. उनकी डेटा नीति के बारे में ज़्यादा जानने के लिए, कृपया Google Maps की सेवा की शर्तें देखें.