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

खास जानकारी

ब्राउज़र में SVG या VML का इस्तेमाल करके रेंडर किया जाने वाला बबल चार्ट. बबल्स के ऊपर कर्सर घुमाने पर सलाह दिखाता है.

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

उदाहरण

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

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

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

संख्याओं के हिसाब से रंग भरना

colorAxis विकल्प का इस्तेमाल करके, बबल को वैल्यू के अनुपात में कलर किया जा सकता है. इसका उदाहरण नीचे दिया गया है.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

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

लेबल को पसंद के मुताबिक बनाना

bubble.textStyle विकल्प की मदद से, बबल टाइपफ़ेस, फ़ॉन्ट, और रंग को कंट्रोल किया जा सकता है:

विकल्प
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };
पूरा वेब पेज
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

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

ऊपर दिए गए चार्ट पर मौजूद लेबल को पढ़ना मुश्किल है और इसकी एक वजह है उनके आस-पास मौजूद खाली जगह. इसे ऑरा कहा जाता है. अगर आपको बिना चार्ट के चार्ट दिखाने हैं, तो bubble.textStyle.auraColor को 'none' पर सेट किया जा सकता है.

विकल्प
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };
पूरा वेब पेज
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

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

लोड हो रहा है

google.charts.load पैकेज का नाम "corechart" है. 

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

विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.BubbleChart है. 

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

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

पंक्तियां: टेबल की हर पंक्ति एक बबल को दिखाती है.

कॉलम:

  कॉलम 0 कॉलम 1 कॉलम 2 कॉलम 3 (ज़रूरी नहीं) कॉलम 4 (ज़रूरी नहीं)
मकसद: बबल का आईडी (नाम) X निर्देशांक Y निर्देशांक कॉलम टाइप के आधार पर, सीरीज़ का आईडी या वैल्यू, ग्रेडिएंट स्केल पर रंग दिखाने वाली:
  • स्ट्रिंग
    एक ऐसी स्ट्रिंग जो एक ही सीरीज़ में बबल की पहचान करती है. एक ही सीरीज़ से जुड़े सभी बबल की पहचान करने के लिए, एक ही वैल्यू का इस्तेमाल करें. एक ही सीरीज़ में मौजूद बबल को एक ही रंग दिया जाएगा. सीरीज़ को series विकल्प का इस्तेमाल करके कॉन्फ़िगर किया जा सकता है.
  • संख्या
    यह वैल्यू, colorAxis विकल्प का इस्तेमाल करके ग्रेडिएंट स्केल पर असल रंग में मैप की जाती है.
साइज़; इस कॉलम में मौजूद वैल्यू को sizeAxis विकल्प का इस्तेमाल करके, असल पिक्सल वैल्यू के साथ मैप किया जाता है.
डेटा टाइप: स्ट्रिंग नंबर नंबर स्ट्रिंग या संख्या नंबर

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

नाम
animation.duration

ऐनिमेशन की अवधि, मिलीसेकंड में. ज़्यादा जानकारी के लिए, ऐनिमेशन दस्तावेज़ देखें.

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

ऐनिमेशन पर ईज़िंग फ़ंक्शन लागू किया गया. ये विकल्प उपलब्ध हैं:

  • 'लीनियर' - कॉन्स्टेंट स्पीड.
  • 'in' - आसानी से शुरू करें - धीरे शुरू करें और स्पीड बढ़ाएं.
  • 'आउट' - आसानी से शुरू करें - तेज़ी से शुरू करें और स्पीड कम करें.
  • 'inAndOut' - आसान अंदर और बाहर - धीरे शुरू करें, स्पीड बढ़ाएं, फिर धीमा करें.
Type: स्ट्रिंग
डिफ़ॉल्ट: 'लीनियर'
animation.startup

इससे तय होता है कि शुरुआती ड्रॉ पर चार्ट ऐनिमेट होगा या नहीं. अगर true, तो चार्ट बेसलाइन से शुरू होगा और अपनी आखिरी स्थिति तक ऐनिमेशन करेगा.

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

चार्ट एरिया की तुलना में ऐक्सिस के टाइटल कहां डालें. इस्तेमाल की जा सकने वाली वैल्यू:

  • में - चार्ट एरिया के अंदर ऐक्सिस के टाइटल बनाएं.
  • आउट - चार्ट एरिया के बाहर ऐक्सिस के टाइटल बनाएं.
  • कोई नहीं - ऐक्सिस के टाइटल हटा दें.
Type: स्ट्रिंग
डिफ़ॉल्ट: 'आउट'
backgroundColor

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

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

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

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

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

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

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

Type: स्ट्रिंग
डिफ़ॉल्ट: 'सफ़ेद'
बबल

बबल की विज़ुअल प्रॉपर्टी को कॉन्फ़िगर करने के लिए सदस्यों वाला ऑब्जेक्ट.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
bubble.opacity

बबल की ओपैसिटी, जहां 0 पूरी तरह से पारदर्शी है और 1 पूरी तरह से ओपेक है.

टाइप: 0.0 और 1.0 के बीच की संख्या
डिफ़ॉल्ट: 0.8
bubble.stroke

बबल्स के स्ट्रोक का रंग.

Type: स्ट्रिंग
डिफ़ॉल्ट: '#FCC'
bubble.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

चार्ट एरिया के प्लेसमेंट और साइज़ को कॉन्फ़िगर करने के लिए, सदस्यों वाला एक ऑब्जेक्ट (जहां चार्ट खुद ड्रॉ किया जाता है). इसमें ऐक्सिस और लेजेंड शामिल नहीं हैं. दो फ़ॉर्मैट इस्तेमाल किए जा सकते हैं: कोई संख्या या संख्या के बाद %. सामान्य संख्या पिक्सल में वैल्यू होती है. पहले संख्या के बाद % का मतलब प्रतिशत होता है. उदाहरण: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
chartArea.backgroundColor
चार्ट क्षेत्र का बैकग्राउंड रंग. जब किसी स्ट्रिंग का इस्तेमाल किया जाता है, तो यह एक हेक्स स्ट्रिंग हो सकती है (उदाहरण के लिए, '#fdc') या अंग्रेज़ी रंग का नाम. किसी ऑब्जेक्ट का इस्तेमाल करते समय, ये प्रॉपर्टी दी जा सकती हैं:
  • stroke: रंग, जो हेक्स स्ट्रिंग या अंग्रेज़ी रंग के नाम के रूप में दिया जाता है.
  • strokeWidth: अगर दिया गया हो, तो दी गई चौड़ाई (और stroke के रंग के साथ) के चार्ट एरिया के चारों ओर एक बॉर्डर बनाता है.
टाइप: स्ट्रिंग या ऑब्जेक्ट
डिफ़ॉल्ट: 'सफ़ेद'
chartArea.left

बाएं बॉर्डर से चार्ट को कितनी दूर तक खींचना है.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
chartArea.top

ऊपरी बॉर्डर से चार्ट को कितनी दूर तक खींचना है.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
chartArea.width

चार्ट एरिया की चौड़ाई.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
chartArea.height

चार्ट क्षेत्र की ऊंचाई.

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

चार्ट के एलिमेंट के लिए इस्तेमाल किए जाने वाले रंग. स्ट्रिंग का कलेक्शन, जिसमें हर एलिमेंट एक एचटीएमएल कलर स्ट्रिंग है, जैसे: colors:['red','#004411'].

टाइप: स्ट्रिंग की कलेक्शन
डिफ़ॉल्ट: डिफ़ॉल्ट रंग
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']}. आपके पास कम से कम दो वैल्यू होनी चाहिए. ग्रेडिएंट में आपकी सभी वैल्यू शामिल होंगी. साथ ही, इसमें तय की गई इंटरमीडियरी वैल्यू भी शामिल होंगी. इनमें पहला रंग सबसे कम वैल्यू और आखिरी रंग की वैल्यू सबसे कम होगी.

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

ऐसा ऑब्जेक्ट जो ग्रेडिएंट कलर लेजेंड की स्टाइल तय करता है.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
colorAxis.legend.position

लेजेंड की स्थिति. इनमें से कोई एक चीज़ हो सकती है:

  • 'सबसे ऊपर' - चार्ट के ऊपर.
  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'in' - चार्ट के अंदर, सबसे ऊपर.
  • 'कोई भी नहीं' - कोई लेजेंड नहीं दिखाया गया.
Type: ऑब्जेक्ट
डिफ़ॉल्ट: 'सबसे ऊपर'
colorAxis.legend.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

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

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

चार्ट, उपयोगकर्ता-आधारित इवेंट दिखाता है या उपयोगकर्ता के इंटरैक्शन पर प्रतिक्रिया देता है. गलत होने पर, चार्ट 'चुनें' या इंटरैक्शन पर आधारित अन्य इवेंट नहीं दिखाएगा (लेकिन तैयार या गड़बड़ी वाले इवेंट दिखाएगा) और उपयोगकर्ता के इनपुट के आधार पर, होवर टेक्स्ट नहीं दिखाएगा या उसमें बदलाव नहीं करेगा.

टाइप: बूलियन
डिफ़ॉल्ट: सही
एक्सप्लोरर

explorer विकल्प की मदद से, उपयोगकर्ता Google चार्ट को पैन और ज़ूम कर सकते हैं. explorer: {}, एक्सप्लोरर के काम करने का डिफ़ॉल्ट तरीका उपलब्ध कराता है. इससे उपयोगकर्ता, हॉरिज़ॉन्टल और वर्टिकल तौर पर पैन कर सकते हैं. इसके लिए, उन्हें खींचें और छोड़ें. साथ ही, स्क्रोल करके ज़ूम इन और ज़ूम आउट करने की सुविधा भी मिलती है.

इस सुविधा को एक्सपेरिमेंट के तौर पर अभी इस्तेमाल किया जा रहा है. आने वाले समय में रिलीज़ किए जाने वाले ऐप्लिकेशन में, इस सुविधा में बदलाव किया जा सकता है.

ध्यान दें: एक्सप्लोरर सिर्फ़ ऐक्सिस (जैसे कि संख्याएं या तारीखें) के साथ काम करता है.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
explorer.actions

Google चार्ट एक्सप्लोरर तीन कार्रवाइयों का समर्थन करता है:

  • dragToPan: चार्ट के चारों ओर हॉरिज़ॉन्टल और वर्टिकल तौर पर पैन करने के लिए खींचें और छोड़ें. सिर्फ़ हॉरिज़ॉन्टल ऐक्सिस पर पैन करने के लिए, explorer: { axis: 'horizontal' } का इस्तेमाल करें. इसी तरह वर्टिकल ऐक्सिस के लिए.
  • dragToZoom: एक्सप्लोरर डिफ़ॉल्ट रूप से उपयोगकर्ता के स्क्रोल करने पर ज़ूम इन और ज़ूम आउट करता है. अगर explorer: { actions: ['dragToZoom', 'rightClickToReset'] } का इस्तेमाल किया गया है, तो किसी आयताकार हिस्से को खींचने पर वह उस हिस्से में ज़ूम हो जाएगा. हमारा सुझाव है कि जब भी dragToZoom का इस्तेमाल किया जाए, तो rightClickToReset का इस्तेमाल करें. ज़ूम को पसंद के मुताबिक बनाने के लिए, explorer.maxZoomIn, explorer.maxZoomOut, और explorer.zoomDelta देखें.
  • rightClickToReset: चार्ट पर राइट क्लिक करने से, यह वापस मूल पैन और ज़ूम लेवल पर पहुंच जाता है.
टाइप: स्ट्रिंग की कलेक्शन
डिफ़ॉल्ट: ['dragToPan', 'rightClickToReset']
explorer.axis

डिफ़ॉल्ट रूप से, explorer विकल्प का इस्तेमाल करने पर उपयोगकर्ता वर्टिकल और हॉरिज़ॉन्टल, दोनों तरीकों से पैन कर सकते हैं. अगर आपको उपयोगकर्ताओं को सिर्फ़ हॉरिज़ॉन्टल पैन करना है, तो explorer: { axis: 'horizontal' } का इस्तेमाल करें. इसी तरह, explorer: { axis: 'vertical' } सिर्फ़ वर्टिकल पैनिंग की सुविधा चालू करता है.

Type: स्ट्रिंग
डिफ़ॉल्ट: हॉरिज़ॉन्टल और वर्टिकल, दोनों पैनिंग
explorer.keepInBounds

डिफ़ॉल्ट रूप से, उपयोगकर्ता चारों तरफ़ पैन कर सकते हैं, भले ही डेटा कहीं भी हो. यह पक्का करने के लिए कि उपयोगकर्ता ओरिजनल चार्ट से बाहर पैन न हो, explorer: { keepInBounds: true } का इस्तेमाल करें.

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

एक्सप्लोरर, ज़्यादा से ज़्यादा कितना ज़ूम इन कर सकता है. डिफ़ॉल्ट रूप से, उपयोगकर्ता इतना ज़ूम कर पाएंगे कि उन्हें ओरिजनल व्यू का सिर्फ़ 25% हिस्सा दिखेगा. explorer: { maxZoomIn: .5 } को सेट करने पर, उपयोगकर्ता सिर्फ़ इतना ज़ूम इन कर पाएंगे कि ओरिजनल व्यू का आधा हिस्सा ही देखा जा सके.

टाइप: नंबर
डिफ़ॉल्ट: 0.25
explorer.maxZoomOut

एक्सप्लोरर, ज़्यादा से ज़्यादा कितने ज़ूम आउट कर सकता है. डिफ़ॉल्ट रूप से, उपयोगकर्ता इतना ज़ूम आउट कर सकते हैं कि चार्ट, उपलब्ध जगह का सिर्फ़ 1/4 हिस्सा भर सके. explorer: { maxZoomOut: 8 } को सेट करने पर, उपयोगकर्ता ज़ूम आउट को इतना बढ़ा सकते हैं कि चार्ट उपलब्ध जगह का सिर्फ़ 1/8 हिस्सा इस्तेमाल कर सके.

टाइप: नंबर
डिफ़ॉल्ट: 4
explorer.zoomDelta

जब उपयोगकर्ता ज़ूम इन या ज़ूम आउट करते हैं, तो explorer.zoomDelta तय करता है कि वे कितना ज़ूम इन करेंगे. नंबर जितना छोटा होगा, उतना ही आसान और धीमा ज़ूम होगा.

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

चार्ट में सभी टेक्स्ट का डिफ़ॉल्ट फ़ॉन्ट साइज़, पिक्सल में. खास चार्ट एलिमेंट के लिए प्रॉपर्टी का इस्तेमाल करके, इसे बदला जा सकता है.

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

चार्ट में सभी टेक्स्ट के लिए डिफ़ॉल्ट फ़ॉन्ट फ़ेस. खास चार्ट एलिमेंट के लिए प्रॉपर्टी का इस्तेमाल करके, इसे बदला जा सकता है.

Type: स्ट्रिंग
डिफ़ॉल्ट: 'राय'
forceIFrame

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

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

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
hAxis.baseline

हॉरिज़ॉन्टल ऐक्सिस के लिए बेसलाइन.

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

हॉरिज़ॉन्टल ऐक्सिस के लिए बेसलाइन का रंग. यह कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, जैसे: 'red' या '#00cc00'.

टाइप: नंबर
डिफ़ॉल्ट: 'काला'
hAxis.direction

वह दिशा जिसमें हॉरिज़ॉन्टल ऐक्सिस पर वैल्यू बढ़ती हैं. वैल्यू का क्रम बदलने के लिए, -1 तय करें.

टाइप: 1 या -1
डिफ़ॉल्ट: 1
hAxis.format

अंकों वाले ऐक्सिस लेबल के लिए फ़ॉर्मैट स्ट्रिंग. यह आईसीयू पैटर्न सेट का सबसेट है. उदाहरण के लिए, {format:'#,###%'}, 10, 7.5, और 0.5 वैल्यू के लिए "1,000%", "750%", और "50%" वैल्यू दिखाएगा. इनमें से कोई भी जानकारी दी जा सकती है:

  • {format: 'none'}: बिना किसी फ़ॉर्मैट के नंबर दिखाता है (जैसे, 80,00,000)
  • {format: 'decimal'}: हज़ार की संख्या को अलग करने वाले सेपरेटर वाली संख्याओं को दिखाता है (उदाहरण के लिए, 80,00,000)
  • {format: 'scientific'}: यह संख्याओं को वैज्ञानिक नोटेशन में दिखाता है (जैसे, 8e6)
  • {format: 'currency'}: स्थानीय मुद्रा में नंबर दिखाता है (जैसे, 80,00,000.00 डॉलर)
  • {format: 'percent'}: संख्याओं को प्रतिशत के रूप में दिखाता है (उदाहरण के लिए, 80,00,00,000%)
  • {format: 'short'}: छोटे किए गए नंबर दिखाता है (जैसे, 80 लाख)
  • {format: 'long'}: संख्याओं को पूरे शब्दों के तौर पर दिखाता है (जैसे, 80 लाख)

लेबल पर लागू की गई असल फ़ॉर्मैटिंग, उस स्थान-भाषा से ली गई है जिससे एपीआई को लोड किया गया है. ज़्यादा जानकारी के लिए, किसी खास स्थान-भाषा में चार्ट लोड करना देखें.

टिक वैल्यू और ग्रिडलाइन की गिनती करते समय, सभी ज़रूरी ग्रिडलाइन विकल्पों के कई वैकल्पिक कॉम्बिनेशन को ध्यान में रखा जाएगा. अगर फ़ॉर्मैट किए गए टिक लेबल डुप्लीकेट या ओवरलैप होते हैं, तो उन विकल्पों को अस्वीकार कर दिया जाएगा. इसलिए, अगर आपको सिर्फ़ पूर्णांक टिक वैल्यू दिखानी हैं, तो format:"#" बताया जा सकता है. हालांकि, ध्यान रखें कि अगर कोई विकल्प इस शर्त के हिसाब से सही नहीं है, तो ग्रिडलाइन या टिक नहीं दिखाए जाएंगे.

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

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

{color: '#333', minSpacing: 20}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
hAxis.gridlines.color

चार्ट एरिया के अंदर हॉरिज़ॉन्टल ग्रिडलाइन का रंग. एक मान्य एचटीएमएल कलर स्ट्रिंग डालें.

Type: स्ट्रिंग
डिफ़ॉल्ट: '#CCC'
hAxis.gridlines.count

चार्ट एरिया में हॉरिज़ॉन्टल ग्रिडलाइन की अनुमानित संख्या. अगर gridlines.count के लिए पॉज़िटिव नंबर दिया जाता है, तो ग्रिडलाइन के बीच minSpacing की गिनती करने के लिए इसका इस्तेमाल किया जाएगा. सिर्फ़ एक ग्रिडलाइन बनाने के लिए, 1 की वैल्यू तय की जा सकती है. इसके अलावा, कोई ग्रिडलाइन बनाने के लिए 0 वैल्यू भी तय की जा सकती है. दूसरे विकल्पों के आधार पर ग्रिडलाइन की संख्या अपने-आप कंप्यूट करने के लिए, -1 तय करें, जो कि डिफ़ॉल्ट है.

टाइप: नंबर
डिफ़ॉल्ट: -1
hAxis.gridlines.units

चार्ट पर कंप्यूट की गई ग्रिडलाइन के साथ इस्तेमाल किए जाने पर तारीख/तारीख/तारीख और समय/दिन के समय के डेटा टाइप के अलग-अलग पहलुओं के लिए, डिफ़ॉल्ट फ़ॉर्मैट को बदल देता है. साल, महीने, दिन, घंटे, मिनट, सेकंड, और मिलीसेकंड के लिए फ़ॉर्मैटिंग की अनुमति देता है.

सामान्य फ़ॉर्मैट है:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ज़्यादा जानकारी के लिए, तारीख और समय देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
hAxis.minorGridlines

hAxis.gridlines विकल्प की तरह ही, हॉरिज़ॉन्टल ऐक्सिस पर माइनर ग्रिडलाइन कॉन्फ़िगर करने के लिए सदस्यों वाला ऑब्जेक्ट.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
hAxis.minorGridlines.color

चार्ट एरिया के अंदर हॉरिज़ॉन्टल माइनर ग्रिडलाइन का रंग. एक मान्य एचटीएमएल कलर स्ट्रिंग डालें.

Type: स्ट्रिंग
डिफ़ॉल्ट: ग्रिडलाइन और बैकग्राउंड के रंगों का मिला-जुला रूप
hAxis.minorGridlines.count

minorGridlines.count विकल्प ज़्यादातर काम नहीं करता है. हालांकि, गिनती को 0 पर सेट करके, माइनर ग्रिडलाइन को बंद करने के अलावा, यह विकल्प भी काम नहीं करता है. अब माइनर ग्रिडलाइन की संख्या पूरी तरह से बड़ी ग्रिडलाइन (hAxis.gridlines.interval देखें) के बीच के समय और कम से कम ज़रूरी जगह (hAxis.minorGridlines.minSpacing देखें) पर निर्भर करती है.

टाइप: नंबर
डिफ़ॉल्ट:1
hAxis.minorGridlines.units

तारीख/तारीख और समय/दिन के समय के डेटा टाइप के अलग-अलग पहलुओं के लिए, डिफ़ॉल्ट फ़ॉर्मैट को बदल देता है. ऐसा तब होता है, जब चार्ट में बनाई गई माइनरग्रिडलाइन के साथ इसका इस्तेमाल किया जाता है. साल, महीने, दिन, घंटे, मिनट, सेकंड, और मिलीसेकंड के लिए फ़ॉर्मैटिंग की अनुमति देता है.

सामान्य फ़ॉर्मैट है:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ज़्यादा जानकारी के लिए, तारीख और समय देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
hAxis.logScale

hAxis प्रॉपर्टी, जो हॉरिज़ॉन्टल ऐक्सिस को लॉगारिद्मिक स्केल बनाती है (सभी वैल्यू का पॉज़िटिव होना ज़रूरी है). हां के लिए सही पर सेट करें.

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

hAxis प्रॉपर्टी, जो हॉरिज़ॉन्टल ऐक्सिस को लॉगारिद्मिक स्केल बनाती है. इनमें से कोई एक चीज़ हो सकती है:

  • शून्य - कोई लॉगारिद्मिक स्केलिंग नहीं की जाती है.
  • 'लॉग' - लॉगारिद्मिक स्केलिंग. नेगेटिव और शून्य वैल्यू को प्लॉट नहीं किया जाता. यह विकल्प, hAxis: { logscale: true } को सेट करने जैसा ही है.
  • 'mirrorLog' - लॉगारिद्मिक स्केलिंग, जिसमें नेगेटिव और शून्य मान प्लॉट किए जाते हैं. नेगेटिव नंबर की प्लॉट की गई वैल्यू, निरपेक्ष वैल्यू के लॉग का नेगेटिव होता है. 0 के करीब की वैल्यू को लीनियर स्केल पर दिखाया जाता है.
Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
hAxis.textPosition

चार्ट एरिया के हिसाब से हॉरिज़ॉन्टल ऐक्सिस टेक्स्ट की स्थिति. इस्तेमाल की जा सकने वाली वैल्यू: 'out', 'in', 'none'.

Type: स्ट्रिंग
डिफ़ॉल्ट: 'आउट'
hAxis.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>}
hAxis.ticks

अपने-आप जनरेट होने वाले X-ऐक्सिस के टिक को, तय की गई श्रेणी से बदलता है. कलेक्शन का हर एलिमेंट या तो एक मान्य टिक वैल्यू (जैसे कि संख्या, तारीख, तारीख या समय का समय) या कोई ऑब्जेक्ट होना चाहिए. अगर यह एक ऑब्जेक्ट है, तो इसमें सही की वैल्यू के लिए v प्रॉपर्टी होनी चाहिए. साथ ही, लेबल के तौर पर दिखाने के लिए, लिटरल स्ट्रिंग वाली एक वैकल्पिक f प्रॉपर्टी होनी चाहिए.

जब तक बदलावों को बदलने के लिए viewWindow.min या viewWindow.max तय नहीं किया जाता, तब तक कम से कम और ज़्यादा से ज़्यादा टिक शामिल करने के लिए, viewWindow अपने-आप बड़ा हो जाएगा.

उदाहरण:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
टाइप: एलिमेंट की कलेक्शन
डिफ़ॉल्ट: अपने-आप
hAxis.title

hAxis प्रॉपर्टी, जो हॉरिज़ॉन्टल ऐक्सिस के टाइटल के बारे में बताती है.

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

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

{ 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>}
hAxis.maxValue

हॉरिज़ॉन्टल ऐक्सिस की सबसे बड़ी वैल्यू को, बताई गई वैल्यू पर ले जाता है. ज़्यादातर चार्ट में, यह वैल्यू दाईं ओर होगी. अगर इसे डेटा की सबसे बड़ी वैल्यू x-वैल्यू से कम पर सेट किया गया है, तो इस पर ध्यान नहीं दिया जाता. hAxis.viewWindow.max इस प्रॉपर्टी को बदल देता है.

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

हॉरिज़ॉन्टल ऐक्सिस की कम से कम वैल्यू को, बताई गई वैल्यू पर ले जाता है. ज़्यादातर चार्ट में, यह वैल्यू बाईं ओर दिखेगी. अगर इसकी वैल्यू, डेटा की सबसे कम x-वैल्यू से ज़्यादा पर सेट है, तो इस पर ध्यान नहीं दिया जाता. hAxis.viewWindow.min इस प्रॉपर्टी को बदल देता है.

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

इससे पता चलता है कि चार्ट एरिया में वैल्यू रेंडर करने के लिए, हॉरिज़ॉन्टल ऐक्सिस को कैसे स्केल किया जाए. इन स्ट्रिंग वैल्यू का इस्तेमाल किया जा सकता है:

  • 'सुंदर' - हॉरिज़ॉन्टल वैल्यू को स्केल करें, ताकि सबसे ज़्यादा और सबसे कम डेटा वैल्यू को चार्ट एरिया के बाईं और दाईं ओर थोड़ा-सा रेंडर किया जा सके. viewWindow को संख्याओं के लिए सबसे नज़दीकी मुख्य ग्रिडलाइन तक या तारीख और समय के लिए सबसे नज़दीकी माइनर ग्रिडलाइन में बड़ा किया जाता है.
  • 'बड़ा किया गया' - हॉरिज़ॉन्टल वैल्यू को स्केल करें, ताकि डेटा की ज़्यादा से ज़्यादा और सबसे कम वैल्यू, चार्ट एरिया के बाईं और दाईं ओर छू सकें. इसकी वजह से, haxis.viewWindow.min और haxis.viewWindow.max को अनदेखा कर दिया जाएगा.
  • 'अश्लील' - चार्ट एरिया की बाईं और दाईं ओर के स्केल वैल्यू को बताने के लिए यह विकल्प काम नहीं करता. (अब काम नहीं करता, क्योंकि यह haxis.viewWindow.min और haxis.viewWindow.max के हिसाब से काम का नहीं है.) इन वैल्यू से बाहर के डेटा वैल्यू को काट दिया जाएगा. आपको एक hAxis.viewWindow ऑब्जेक्ट बताना होगा. यह ऑब्जेक्ट को दिखाने के लिए, ज़्यादा से ज़्यादा और कम से कम वैल्यू की जानकारी देना होगा.
Type: स्ट्रिंग
डिफ़ॉल्ट: 'सुंदर' के बराबर होता है, लेकिन इस्तेमाल किए जाने पर haxis.viewWindow.min और haxis.viewWindow.max को प्राथमिकता दी जाती है.
hAxis.viewWindow

हॉरिज़ॉन्टल ऐक्सिस पर काटने की रेंज तय करता है.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
hAxis.viewWindow.max

रेंडर करने के लिए, हॉरिज़ॉन्टल डेटा की ज़्यादा से ज़्यादा वैल्यू.

hAxis.viewWindowMode का साइज़ 'बड़ा' या 'बड़ा किया गया' होने पर अनदेखा किया जाता है.

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

रेंडर करने के लिए, हॉरिज़ॉन्टल डेटा की कम से कम वैल्यू.

hAxis.viewWindowMode का साइज़ 'बड़ा' या 'बड़ा किया गया' होने पर अनदेखा किया जाता है.

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

चार्ट की ऊंचाई, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
लेजेंड

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
legend.alignment

लेजेंड का अलाइनमेंट. इनमें से कोई एक चीज़ हो सकती है:

  • 'start' - लेजेंड के लिए असाइन किए गए एरिया की शुरुआत से अलाइन है.
  • 'सेंटर' - लेजेंड के लिए असाइन किए गए एरिया में सेंटर होता है.
  • 'end' - लेजेंड के लिए तय किए गए हिस्से के आखिर में अलाइन होता है.

शुरुआती, बीच में, और आखिरी हिस्सा, लेजेंड की स्टाइल -- वर्टिकल या हॉरिज़ॉन्टल -- के हिसाब से होते हैं. उदाहरण के लिए, 'राइट' लेजेंड में, 'start' और 'end' क्रम से सबसे ऊपर और सबसे नीचे होते हैं. 'टॉप' लेजेंड के लिए, 'start' और 'end' एरिया के बाईं और दाईं ओर होगा.

डिफ़ॉल्ट वैल्यू, लेजेंड की पोज़िशन पर निर्भर करती है. 'बॉटम' लेजेंड के लिए, डिफ़ॉल्ट वैल्यू 'center' होती है. अन्य लेजेंड की वैल्यू डिफ़ॉल्ट रूप से 'start' पर सेट होती है.

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

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

फ़िलहाल, यह विकल्प सिर्फ़ तब काम करता है, जब लेजेंड.पोज़िशन 'सबसे ऊपर' पर सेट हो.

टाइप: नंबर
डिफ़ॉल्ट: 1
legend.pageIndex

लेजेंड की चुनी गई शुरुआत में शून्य पर आधारित पेज इंडेक्स.

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

लेजेंड की स्थिति. इनमें से कोई एक चीज़ हो सकती है:

  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'बायां' - चार्ट के बाईं ओर, बशर्ते बायां ऐक्सिस उससे जुड़ी कोई सीरीज़ न हो. इसलिए, अगर आपको बाईं ओर लेजेंड चाहिए, तो targetAxisIndex: 1 विकल्प का इस्तेमाल करें.
  • 'in' - चार्ट के अंदर, सबसे ऊपर बाएं कोने में.
  • 'कोई भी नहीं' - कोई लेजेंड नहीं दिखाया गया.
  • 'दाईं ओर' - चार्ट की दाईं ओर. vAxes विकल्प के साथ काम नहीं करता है.
  • 'सबसे ऊपर' - चार्ट के ऊपर.
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>}
selectionMode

selectionMode के 'multiple' होने पर, उपयोगकर्ता एक से ज़्यादा डेटा पॉइंट चुन सकते हैं.

Type: स्ट्रिंग
डिफ़ॉल्ट: 'सिंगल'
शृंखला

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

  • color - इस सीरीज़ के लिए इस्तेमाल किया जाने वाला रंग. एक मान्य एचटीएमएल कलर स्ट्रिंग डालें.
  • visibleInLegend - एक बूलियन वैल्यू. यहां सही का मतलब है कि सीरीज़ में लेजेंड एंट्री होनी चाहिए. वहीं, गलत का मतलब है कि उसमें ऐसा नहीं होना चाहिए. डिफ़ॉल्ट तौर पर, यह 'सही' पर सेट होती है.
उदाहरण: 
series: {'Europe': {color: 'green'}}
टाइप: नेस्ट किए गए ऑब्जेक्ट के साथ ऑब्जेक्ट
डिफ़ॉल्ट: {}
sizeAxis

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

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

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

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

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

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

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

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

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

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

अगर सही है, तो बबल को साइज़ के हिसाब से क्रम में लगाता है, ताकि बड़े बबल के ऊपर छोटे बबल्स दिखें. अगर गलत है, तो डेटा टेबल में बबल्स को उनके क्रम के हिसाब से क्रम में लगाया जाता है.

टाइप: बूलियन
डिफ़ॉल्ट: सही
थीम

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

  • 'बड़ा किया गया' - चार्ट के क्षेत्र को बड़ा करता है और लेजेंड और चार्ट के अंदर के सभी लेबल को दिखाता है. इन विकल्पों को सेट करता है: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
title

चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.

Type: स्ट्रिंग
डिफ़ॉल्ट: कोई टाइटल नहीं
titlePosition

चार्ट एरिया की तुलना में, चार्ट का टाइटल कहां डालना है. इस्तेमाल की जा सकने वाली वैल्यू:

  • in - चार्ट एरिया के अंदर टाइटल बनाएं.
  • आउट - टाइटल को चार्ट एरिया के बाहर ड्रॉ करें.
  • कोई नहीं - टाइटल छोड़ें.
Type: स्ट्रिंग
डिफ़ॉल्ट: 'आउट'
titleTextStyle

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

{ 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>}
टूलटिप

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

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

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

ध्यान दें: टूलटिप कॉलम में डेटा की भूमिका के ज़रिए एचटीएमएल टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाने की सुविधा, बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करती.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
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: स्ट्रिंग
डिफ़ॉल्ट: 'फ़ोकस'
vAxis

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
vAxis.baseline

vAxis प्रॉपर्टी, जो वर्टिकल ऐक्सिस के लिए बेसलाइन तय करती है. अगर बेसलाइन सबसे ऊंची ग्रिड लाइन से बड़ी या सबसे नीचे वाली ग्रिड लाइन से छोटी है, तो इसे सबसे नज़दीकी ग्रिडलाइन पर राउंड किया जाएगा.

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

वर्टिकल ऐक्सिस के लिए बेसलाइन का रंग तय करता है. यह कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, जैसे: 'red' या '#00cc00'.

टाइप: नंबर
डिफ़ॉल्ट: 'काला'
vAxis.direction

वह दिशा जिसमें वर्टिकल ऐक्सिस पर वैल्यू बढ़ती हैं. डिफ़ॉल्ट रूप से, कम वैल्यू चार्ट पर सबसे नीचे दिखती हैं. वैल्यू का क्रम बदलने के लिए, -1 तय करें.

टाइप: 1 या -1
डिफ़ॉल्ट: 1
vAxis.format

अंकों वाले ऐक्सिस लेबल के लिए फ़ॉर्मैट स्ट्रिंग. यह आईसीयू पैटर्न सेट का सबसेट है. उदाहरण के लिए, {format:'#,###%'}, 10, 7.5, और 0.5 वैल्यू के लिए "1,000%", "750%", और "50%" वैल्यू दिखाएगा. इनमें से कोई भी जानकारी दी जा सकती है:

  • {format: 'none'}: बिना किसी फ़ॉर्मैट के नंबर दिखाता है (जैसे, 80,00,000)
  • {format: 'decimal'}: हज़ार की संख्या को अलग करने वाले सेपरेटर वाली संख्याओं को दिखाता है (उदाहरण के लिए, 80,00,000)
  • {format: 'scientific'}: यह संख्याओं को वैज्ञानिक नोटेशन में दिखाता है (जैसे, 8e6)
  • {format: 'currency'}: स्थानीय मुद्रा में नंबर दिखाता है (जैसे, 80,00,000.00 डॉलर)
  • {format: 'percent'}: संख्याओं को प्रतिशत के रूप में दिखाता है (उदाहरण के लिए, 80,00,00,000%)
  • {format: 'short'}: छोटे किए गए नंबर दिखाता है (जैसे, 80 लाख)
  • {format: 'long'}: संख्याओं को पूरे शब्दों के तौर पर दिखाता है (जैसे, 80 लाख)

लेबल पर लागू की गई असल फ़ॉर्मैटिंग, उस स्थान-भाषा से ली गई है जिससे एपीआई को लोड किया गया है. ज़्यादा जानकारी के लिए, किसी खास स्थान-भाषा में चार्ट लोड करना देखें.

टिक वैल्यू और ग्रिडलाइन की गिनती करते समय, सभी ज़रूरी ग्रिडलाइन विकल्पों के कई वैकल्पिक कॉम्बिनेशन को ध्यान में रखा जाएगा. अगर फ़ॉर्मैट किए गए टिक लेबल डुप्लीकेट या ओवरलैप होते हैं, तो उन विकल्पों को अस्वीकार कर दिया जाएगा. इसलिए, अगर आपको सिर्फ़ पूर्णांक टिक वैल्यू दिखानी हैं, तो format:"#" बताया जा सकता है. हालांकि, ध्यान रखें कि अगर कोई विकल्प इस शर्त के हिसाब से सही नहीं है, तो ग्रिडलाइन या टिक नहीं दिखाए जाएंगे.

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

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

{color: '#333', minSpacing: 20}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
vAxis.gridlines.color

चार्ट एरिया के अंदर वर्टिकल ग्रिडलाइन का रंग. एक मान्य एचटीएमएल कलर स्ट्रिंग डालें.

Type: स्ट्रिंग
डिफ़ॉल्ट: '#CCC'
vAxis.gridlines.count

चार्ट एरिया में हॉरिज़ॉन्टल ग्रिडलाइन की अनुमानित संख्या. अगर gridlines.count के लिए पॉज़िटिव नंबर दिया जाता है, तो ग्रिडलाइन के बीच minSpacing की गिनती करने के लिए इसका इस्तेमाल किया जाएगा. सिर्फ़ एक ग्रिडलाइन बनाने के लिए, 1 की वैल्यू तय की जा सकती है. इसके अलावा, कोई ग्रिडलाइन बनाने के लिए 0 वैल्यू भी तय की जा सकती है. दूसरे विकल्पों के आधार पर ग्रिडलाइन की संख्या अपने-आप कंप्यूट करने के लिए, -1 तय करें, जो कि डिफ़ॉल्ट है.

टाइप: नंबर
डिफ़ॉल्ट: -1
vAxis.gridlines.units

चार्ट पर कंप्यूट की गई ग्रिडलाइन के साथ इस्तेमाल किए जाने पर तारीख/तारीख/तारीख और समय/दिन के समय के डेटा टाइप के अलग-अलग पहलुओं के लिए, डिफ़ॉल्ट फ़ॉर्मैट को बदल देता है. साल, महीने, दिन, घंटे, मिनट, सेकंड, और मिलीसेकंड के लिए फ़ॉर्मैटिंग की अनुमति देता है.

सामान्य फ़ॉर्मैट है:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

ज़्यादा जानकारी के लिए, तारीख और समय देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
vAxis.minorGridlines

सदस्यों वाला एक ऑब्जेक्ट, जिसमें वर्टिकल ऐक्सिस पर माइनर ग्रिडलाइन कॉन्फ़िगर करने के लिए कहा जाता है. यह ठीक वैसा ही है जैसा vAxis.gridlines विकल्प में है.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
vAxis.minorGridlines.color

चार्ट एरिया के अंदर वर्टिकल माइनर ग्रिडलाइन का रंग. एक मान्य एचटीएमएल कलर स्ट्रिंग डालें.

Type: स्ट्रिंग
डिफ़ॉल्ट: ग्रिडलाइन और बैकग्राउंड के रंगों का मिला-जुला रूप
vAxis.minorGridlines.count

BalanceGridlines.count का विकल्प ज़्यादातर अब काम नहीं करता है. हालांकि, गिनती को 0 पर सेट करके, माइनर ग्रिडलाइन को बंद किया जा सकता है. माइनर ग्रिडलाइन की संख्या, बड़ी ग्रिडलाइन (vAxis.gridlines.interval देखें) और कम से कम ज़रूरी जगह के बीच के समय पर निर्भर करती है (vAxis.minorGridlines.minSpacing देखें).

टाइप: नंबर
डिफ़ॉल्ट: 1
vAxis.minorGridlines.units

तारीख/तारीख और समय/दिन के समय के डेटा टाइप के अलग-अलग पहलुओं के लिए, डिफ़ॉल्ट फ़ॉर्मैट को बदल देता है. ऐसा तब होता है, जब चार्ट में बनाई गई माइनरग्रिडलाइन के साथ इसका इस्तेमाल किया जाता है. साल, महीने, दिन, घंटे, मिनट, सेकंड, और मिलीसेकंड के लिए फ़ॉर्मैटिंग की अनुमति देता है.

सामान्य फ़ॉर्मैट है:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ज़्यादा जानकारी के लिए, तारीख और समय देखें.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
vAxis.logScale

अगर सही है, तो वर्टिकल ऐक्सिस को लॉगारिद्मिक स्केल बनाता है. ध्यान दें: सभी वैल्यू पॉज़िटिव होनी चाहिए.

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

vAxis प्रॉपर्टी, जो वर्टिकल ऐक्सिस को लॉगारिद्मिक स्केल बनाती है. इनमें से कोई एक चीज़ हो सकती है:

  • शून्य - कोई लॉगारिद्मिक स्केलिंग नहीं की जाती है.
  • 'लॉग' - लॉगारिद्मिक स्केलिंग. नेगेटिव और शून्य वैल्यू को प्लॉट नहीं किया जाता. यह विकल्प, vAxis: { logscale: true } को सेट करने जैसा ही है.
  • 'mirrorLog' - लॉगारिद्मिक स्केलिंग, जिसमें नेगेटिव और शून्य मान प्लॉट किए जाते हैं. नेगेटिव नंबर की प्लॉट की गई वैल्यू, निरपेक्ष वैल्यू के लॉग का नेगेटिव होता है. 0 के करीब की वैल्यू को लीनियर स्केल पर दिखाया जाता है.
Type: स्ट्रिंग
डिफ़ॉल्ट: शून्य
vAxis.textPosition

चार्ट एरिया के हिसाब से वर्टिकल ऐक्सिस टेक्स्ट की स्थिति. इस्तेमाल की जा सकने वाली वैल्यू: 'out', 'in', 'none'.

Type: स्ट्रिंग
डिफ़ॉल्ट: 'आउट'
vAxis.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>}
vAxis.ticks

अपने-आप जनरेट होने वाले Y-ऐक्सिस के टिक को, तय किए गए अरे से बदलता है. कलेक्शन का हर एलिमेंट या तो एक मान्य टिक वैल्यू (जैसे कि संख्या, तारीख, तारीख या समय का समय) या कोई ऑब्जेक्ट होना चाहिए. अगर यह कोई ऑब्जेक्ट है, तो इसमें टिक वैल्यू के लिए v प्रॉपर्टी होनी चाहिए. साथ ही, लेबल के तौर पर दिखाने के लिए, लिटरल स्ट्रिंग वाली वैकल्पिक f प्रॉपर्टी होनी चाहिए.

जब तक बदलावों को बदलने के लिए viewWindow.min या viewWindow.max तय नहीं किया जाता, तब तक कम से कम और ज़्यादा से ज़्यादा टिक शामिल करने के लिए, viewWindow अपने-आप बड़ा हो जाएगा.

उदाहरण:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
टाइप: एलिमेंट की कलेक्शन
डिफ़ॉल्ट: अपने-आप
vAxis.title

vAxis प्रॉपर्टी, जो वर्टिकल ऐक्सिस के टाइटल के बारे में बताती है.

Type: स्ट्रिंग
डिफ़ॉल्ट: कोई टाइटल नहीं
vAxis.titleTextStyle

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

{ 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>}
vAxis.maxValue

वर्टिकल ऐक्सिस की सबसे बड़ी वैल्यू को, तय की गई वैल्यू पर ले जाता है. यह ज़्यादातर चार्ट में, ऊपर की ओर होगा. अगर इसे डेटा की सबसे बड़ी y-वैल्यू से कम वैल्यू पर सेट किया गया है, तो इस पर ध्यान नहीं दिया जाता. vAxis.viewWindow.max इस प्रॉपर्टी को बदल देता है.

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

वर्टिकल ऐक्सिस की कम से कम वैल्यू को, तय की गई वैल्यू पर ले जाता है. ज़्यादातर चार्ट में, यह वैल्यू नीचे की ओर रहेगी. अगर इसकी वैल्यू, डेटा की सबसे कम y-वैल्यू से ज़्यादा पर सेट है, तो इस पर ध्यान नहीं दिया जाता. vAxis.viewWindow.min इस प्रॉपर्टी को बदल देता है.

टाइप: नंबर
डिफ़ॉल्ट: शून्य
vAxis.viewWindowMode

इससे पता चलता है कि चार्ट एरिया में वैल्यू रेंडर करने के लिए, वर्टिकल ऐक्सिस को कैसे स्केल किया जाए. इन स्ट्रिंग वैल्यू का इस्तेमाल किया जा सकता है:

  • 'सुंदर' - वर्टिकल वैल्यू को स्केल करें, ताकि सबसे ज़्यादा और सबसे कम डेटा वैल्यू को चार्ट एरिया के निचले और ऊपरी हिस्से में थोड़ा-बहुत दिखाया जा सके. viewWindow को संख्याओं के लिए सबसे नज़दीकी मुख्य ग्रिडलाइन तक या तारीख और समय के लिए सबसे नज़दीकी माइनर ग्रिडलाइन में बड़ा किया जाता है.
  • 'बड़ा किया गया' - वर्टिकल वैल्यू को स्केल करें, ताकि डेटा की ज़्यादा से ज़्यादा और सबसे कम वैल्यू, चार्ट एरिया के ऊपर और नीचे तक छू सकें. इसकी वजह से, vaxis.viewWindow.min और vaxis.viewWindow.max को अनदेखा कर दिया जाएगा.
  • 'अश्लील' - चार्ट एरिया के सबसे ऊपर और सबसे निचले स्केल की वैल्यू बताने के लिए यह विकल्प काम नहीं करता. (अब यह काम नहीं करता, क्योंकि यह vaxis.viewWindow.min और vaxis.viewWindow.max के साथ काम का नहीं है. इन वैल्यू से बाहर की डेटा वैल्यू को काट दिया जाएगा. आपको एक vAxis.viewWindow ऑब्जेक्ट बताना होगा. यह ऑब्जेक्ट को दिखाने के लिए, ज़्यादा से ज़्यादा और कम से कम वैल्यू की जानकारी देना होगा.
Type: स्ट्रिंग
डिफ़ॉल्ट: 'सुंदर' के बराबर होता है, लेकिन इस्तेमाल किए जाने पर vaxis.viewWindow.min और vaxis.viewWindow.max को प्राथमिकता दी जाती है.
vAxis.viewWindow

वर्टिकल ऐक्सिस को काटने की सीमा तय करता है.

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
vAxis.viewWindow.max

रेंडर करने के लिए, वर्टिकल डेटा की ज़्यादा से ज़्यादा वैल्यू.

vAxis.viewWindowMode का साइज़ 'बड़ा' या 'बड़ा किया गया' होने पर अनदेखा किया जाता है.

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

रेंडर किया जाने वाला कम से कम वर्टिकल डेटा मान.

vAxis.viewWindowMode का साइज़ 'बड़ा' या 'बड़ा किया गया' होने पर अनदेखा किया जाता है.

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

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

टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की चौड़ाई

तरीके

तरीका
draw(data, options)

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

सामान लौटाने का तरीका: कोई नहीं
getAction(actionID)

अनुरोध किए गए actionID के साथ टूलटिप ऐक्शन ऑब्जेक्ट दिखाता है.

रिटर्न टाइप: ऑब्जेक्ट
getBoundingBox(id)

चार्ट के एलिमेंट id की बाईं, ऊपर, चौड़ाई, और ऊंचाई वाला ऑब्जेक्ट दिखाता है. id के फ़ॉर्मैट को अभी तक दस्तावेज़ में नहीं रखा गया है (वे इवेंट हैंडलर की रिटर्न वैल्यू हैं), लेकिन यहां कुछ उदाहरण दिए गए हैं:

var cli = chart.getChartLayoutInterface();

चार्ट एरिया की ऊंचाई
cli.getBoundingBox('chartarea').height
बार या कॉलम चार्ट की पहली सीरीज़ में तीसरे बार की चौड़ाई
cli.getBoundingBox('bar#0#2').width
पाई चार्ट के पांचवें खूंटी (वेज) का बाउंड्री बॉक्स
cli.getBoundingBox('slice#4')
किसी वर्टिकल (जैसे, कॉलम) चार्ट के चार्ट डेटा का बाउंडिंग बॉक्स:
cli.getBoundingBox('vAxis#0#gridline')
किसी हॉरिज़ॉन्टल (जैसे, बार) चार्ट के चार्ट डेटा का बाउंडिंग बॉक्स:
cli.getBoundingBox('hAxis#0#gridline')

वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: ऑब्जेक्ट
getChartAreaBoundingBox()

चार्ट के कॉन्टेंट की बाईं, ऊपर, चौड़ाई, और ऊंचाई वाला ऑब्जेक्ट दिखाता है (जैसे, लेबल और लेजेंड को छोड़कर):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: ऑब्जेक्ट
getChartLayoutInterface()

वह ऑब्जेक्ट दिखाता है जिसमें चार्ट की ऑनस्क्रीन प्लेसमेंट और उसके एलिमेंट के बारे में जानकारी होती है.

लौटाए गए ऑब्जेक्ट पर इन तरीकों को कॉल किया जा सकता है:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

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

रिटर्न टाइप: ऑब्जेक्ट
getHAxisValue(xPosition, optional_axis_index)

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

उदाहरण: chart.getChartLayoutInterface().getHAxisValue(400).

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

रिटर्न टाइप: नंबर
getImageURI()

चार्ट को इमेज यूआरआई के तौर पर क्रम से दिखाता है.

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

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

रिटर्न टाइप: स्ट्रिंग
getSelection()

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

रिटर्न टाइप: चुने गए एलिमेंट की कलेक्शन
getVAxisValue(yPosition, optional_axis_index)

yPosition पर वर्टिकल डेटा वैल्यू दिखाता है, जो चार्ट कंटेनर के ऊपरी किनारे से नीचे की ओर एक पिक्सल ऑफ़सेट होता है. नकारात्मक हो सकता है.

उदाहरण: chart.getChartLayoutInterface().getVAxisValue(300).

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

रिटर्न टाइप: नंबर
getXLocation(dataValue, optional_axis_index)

चार्ट के कंटेनर के बाएं किनारे के संबंध में dataValue का पिक्सल x-कोऑर्डिनेट दिखाता है.

उदाहरण: chart.getChartLayoutInterface().getXLocation(400).

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

रिटर्न टाइप: नंबर
getYLocation(dataValue, optional_axis_index)

चार्ट के कंटेनर के ऊपरी किनारे के हिसाब से dataValue का पिक्सल y-कोऑर्डिनेट दिखाता है.

उदाहरण: chart.getChartLayoutInterface().getYLocation(300).

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

रिटर्न टाइप: नंबर
removeAction(actionID)

चार्ट से, अनुरोध की गई actionID वाली टूलटिप ऐक्शन को हटा देता है.

सामान लौटाने का तरीका: none
setAction(action)

उपयोगकर्ता के कार्रवाई टेक्स्ट पर क्लिक करने पर, होने वाली टूलटिप कार्रवाई सेट करता है.

setAction वाला तरीका, किसी ऑब्जेक्ट को अपने कार्रवाई पैरामीटर के तौर पर लेता है. इस ऑब्जेक्ट को तीन प्रॉपर्टी बतानी चाहिए: id— सेट की जा रही कार्रवाई का आईडी, text —वह टेक्स्ट जो कार्रवाई के लिए टूलटिप में दिखना चाहिए और action — फ़ंक्शन जो उपयोगकर्ता के कार्रवाई टेक्स्ट पर क्लिक करने पर चलना चाहिए.

चार्ट के draw() तरीके का इस्तेमाल करने से पहले, टूलटिप के लिए किसी भी या सभी कार्रवाइयों को सेट करना ज़रूरी है. ज़्यादा जानकारी.

सामान लौटाने का तरीका: none
setSelection()

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

सामान लौटाने का तरीका: कोई नहीं
clearChart()

चार्ट को हटा देता है और इसके लिए असाइन किए गए सभी संसाधनों को रिलीज़ करता है.

सामान लौटाने का तरीका: कोई नहीं

इवेंट

इन इवेंट को इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, बेसिक इंटरैक्टिविटी, इवेंट मैनेज करना, और इवेंट ट्रिगर करना देखें.

नाम
animationfinish

ट्रांज़िशन ऐनिमेशन पूरा होने पर ट्रिगर होता है.

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

जब कोई उपयोगकर्ता, चार्ट में क्लिक करता है, तब ट्रिगर होता है. इनका इस्तेमाल यह पहचानने के लिए किया जा सकता है कि टाइटल, डेटा एलिमेंट, लेजेंड एंट्री, ऐक्सिस, ग्रिडलाइन या लेबल को कब क्लिक किया जाता है.

प्रॉपर्टी: targetID
error

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

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

जब उपयोगकर्ता लेजेंड पेज पर नंबर डालने वाले तीर के निशान पर क्लिक करता है, तब ट्रिगर होता है. यह मौजूदा लेजेंड की शून्य-आधारित पेज इंडेक्स और पेजों की कुल संख्या को वापस पास करता है.

प्रॉपर्टी:currentPageIndex, totalPages
onmouseover

यह तब ट्रिगर होता है, जब कोई उपयोगकर्ता किसी विज़ुअल इकाई पर माउस रखता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है. बबल का संबंध डेटा टेबल में किसी पंक्ति से होता है (कॉलम इंडेक्स शून्य है).

प्रॉपर्टी: पंक्ति, कॉलम
onmouseout

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

प्रॉपर्टी: पंक्ति, कॉलम
ready

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

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

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

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

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.