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

  1. खास जानकारी
  2. क्षेत्र के जियोचार्ट
  3. मार्कर जियोचार्ट
  4. टेक्स्ट जियोचार्ट
  5. अपने चार्ट में रंग भरना
  6. लोड हो रहा है
  7. डेटा फ़ॉर्मैट
  8. कॉन्फ़िगरेशन के विकल्प
  9. तरीके
  10. इवेंट
  11. डेटा नीति

खास जानकारी

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

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

जियोचार्ट, ब्राउज़र में 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 विकल्प का इस्तेमाल करें.

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

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

<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>

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

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

  • 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 को कॉपी नहीं करना चाहिए; यह काम नहीं करेगा. जब तक आपके चार्ट में जियोकोडिंग की आवश्यकता न हो या स्थानों की पहचान के लिए गैर-मानक कोड का उपयोग न किया जाए, तब तक आपकोMapsApiKey की आवश्यकता नहीं है. ज़्यादा जानकारी के लिए, लोड सेटिंग देखें. 

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

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

Dataटेबल का फ़ॉर्मैट, इस्तेमाल किए जाने वाले डिसप्ले मोड के हिसाब से अलग-अलग होता है: regions, markers या text.

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

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

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

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

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

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

    या

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

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

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

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

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

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

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

नाम
backgroundColor

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

टाइप: स्ट्रिंग या ऑब्जेक्ट
डिफ़ॉल्ट: सफ़ेद
backgroundColor.fill

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

Type: स्ट्रिंग
डिफ़ॉल्ट: सफ़ेद
backgroundColor.stroke

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

Type: स्ट्रिंग
डिफ़ॉल्ट: '#666'
backgroundColor.strokeWidth

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

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

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

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

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

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

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

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

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

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

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

टाइप: कलर स्ट्रिंग का कलेक्शन
डिफ़ॉल्ट: शून्य
datalessRegionColor

उन क्षेत्रों को असाइन करने के लिए रंग जिनमें कोई डेटा नहीं जोड़ा गया है.

Type: स्ट्रिंग
डिफ़ॉल्ट: '#F5F5F5'
defaultColor

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

Type: स्ट्रिंग
डिफ़ॉल्ट: '#267114'
displayMode

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

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

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

Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
enableRegionInteractivity

अगर सही है, तो माउस घुमाने पर फ़ोकस और टूल-टिप विस्तार के साथ-साथ क्षेत्र चुनने और माउस क्लिक पर regionClick और select इवेंट ट्रिगर करने समेत क्षेत्र के हिसाब से इंटरैक्शन की सुविधा चालू करें.

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

टाइप: बूलियन
डिफ़ॉल्ट: अपने-आप
forceIFrame

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

टाइप: बूलियन
डिफ़ॉल्ट: गलत
geochartVersion

GeoChart बॉर्डर डेटा का वर्शन. 10 और 11 वर्शन उपलब्ध हैं.

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

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

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

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

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

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

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

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

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

Type: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
legend.textStyle

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

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

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

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

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

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

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

{enable: true, zoomFactor: 7.5}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

अगर सही है, तो जब उपयोगकर्ता किसी अव्यवस्थित मार्कर के ऊपर जाता है, तो बड़ा ग्लास खुल जाता है.

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

टाइप: बूलियन
डिफ़ॉल्ट: सही
magnifyingGlass.zoomFactor

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

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

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

टाइप: संख्या, 0.0–1.0
डिफ़ॉल्ट: 1.0
regioncoderVersion

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

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

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

  • 'country' - अमेरिका के राज्यों को छोड़कर, बाकी सभी इलाकों में उपलब्ध है.
  • 'प्रांत' - सिर्फ़ देश के इलाकों और अमेरिका के राज्यों के लिए उपलब्ध. यह सुविधा सभी देशों में उपलब्ध नहीं है. कृपया किसी देश की जांच करके पता लगाएं कि यह विकल्प काम करता है या नहीं.
  • 'Metro' - यह सिर्फ़ अमेरिका के देश/इलाके और अमेरिका के राज्यों के लिए उपलब्ध है.
Type: स्ट्रिंग
डिफ़ॉल्ट: 'देश'
sizeAxis

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

 {minValue: 0,  maxSize: 20}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
sizeAxis.maxSize

पिक्सल में, सबसे बड़े बबल का ज़्यादा से ज़्यादा रेडियस.

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

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

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

पिक्सल में, सबसे छोटे से छोटे से बड़े बबल का रेडियस.

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

महाद्वीप उप-महाद्वीप देश
002 - अफ़्रीका 015 - उत्तरी अफ़्रीका DZ, EG, EH, LY, MA, एसडी, SS, TN
011 - पश्चिमी अफ़्रीका BF, BJ, CI, CV, GH, जीएम, जीएन, जीडब्ल्यू, एलआर, एलआर, एमएल, MR3}, MR3},SHSLSN
017 - मध्य अफ़्रीका एओ, CD, ZR, CF, सीजी, सीएम, GA, GQ, ST, TD
014 - पूर्वी अफ़्रीका BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, MZ, MZ, 3,5 और YT आरRWSCSOTZUG
018 - दक्षिणी अफ़्रीका BW, LS, NA, SZ, ZA
150 - यूरोप 154 - उत्तरी यूरोप GG, JE, AX, DK, EE, FI, FO, जीबी, IE, IMIM, IS IS 24}LV
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, आईटी, ME, MK, MK, MK, MT, MT, , HR
019 - अमेरिका 021 - उत्तरी अमेरिका BM, कनाडा, GL, पीएम, अमेरिका
029 - कैरेबियन AG, AI, AN, AW, BB, BL, BS, CU, DM, डीओ, GD, GD, {2TC5} GPLCMS
013 - मध्य अमेरिका BZ, CR, GT, HN, MX, NI, PA, SV
005 - दक्षिण अमेरिका एआर, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY 30} SRVE
142 - एशिया 143 - मध्य एशिया TM, TJ, KG, KZ, UZ
030 - पूर्वी एशिया CN, HK, जापान, KP, KR, MN, MO, ताइवान
034 - दक्षिणी एशिया AF, BD, बीटी, भारत, आईआर, LK, एमवी, NP, PK
035 - दक्षिण-पूर्व एशिया BN, आईडी, KH, LA, MM, BU, मेरा, PH, SG, TH, TL, VN
145 - पश्चिमी एशिया AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW 7,19}, LB, LB LB,
009 - ओशिएनिया 053 - ऑस्ट्रेलिया और न्यूज़ीलैंड AU, NF, NZ
054 - मेलनेशिया FJ, NC, PG, SB, VU
057 - माइक्रोनेशिया एफ़एम, जीयू, KI, एमएच, एमपी, एनआर, PW
061 - पॉलिनेशिया AS, CK, NU, PF, PN, TK, TO, TV, 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 की सेवा की शर्तें देखें.