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

खास जानकारी

एक बबल चार्ट, जिसे 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 तीसरा कॉलम (ज़रूरी नहीं है) चौथा कॉलम (ज़रूरी नहीं)
मकसद: बबल का आईडी (नाम) X निर्देशांक Y कोऑर्डिनेट कॉलम के टाइप के आधार पर, सीरीज़ के आईडी या किसी वैल्यू को ग्रेडिएंट स्केल पर रंग दिखाने वाली वैल्यू:
  • स्ट्रिंग
    ऐसी स्ट्रिंग जिससे एक ही सीरीज़ में बबल्स की पहचान होती है. एक ही सीरीज़ के सभी बबल्स की पहचान करने के लिए, एक जैसी वैल्यू का इस्तेमाल करें. एक ही सीरीज़ के बबल्स के लिए, एक ही रंग का इस्तेमाल किया जाएगा. सीरीज़ को series विकल्प का इस्तेमाल करके कॉन्फ़िगर किया जा सकता है.
  • संख्या
    वह वैल्यू जिसे colorAxis विकल्प का इस्तेमाल करके, ग्रेडिएंट स्केल पर असल रंग में मैप किया गया है.
साइज़; इस कॉलम में मौजूद वैल्यू को sizeAxis विकल्प का इस्तेमाल करके, असल पिक्सल वैल्यू के लिए मैप किया गया है.
डेटा टाइप: स्ट्रिंग संख्या संख्या स्ट्रिंग या नंबर संख्या

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

नाम
एनिमेशन.अवधि

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

टाइप: नंबर
डिफ़ॉल्ट: 0
एनिमेशन

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

  • 'लीनियर' - स्थिर गति.
  • 'in' - ईज़ी-इन - धीमी गति से और गति से शुरू करें.
  • 'out' - Ease - जल्दी से शुरू करो और धीमा करो.
  • 'inAndOut' - ईज़ इन और आउट - धीमी गति से शुरू करें, गति बढ़ाएं, फिर धीमा करें.
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'लीनियर'
एनिमेशन

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

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

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

  • में - चार्ट क्षेत्र के अंदर अक्ष के शीर्षक बनाएं.
  • आउट - चार्ट क्षेत्र के बाहर अक्ष शीर्षक बनाएं.
  • कोई नहीं - अक्ष के शीर्षकों को छोड़ दें.
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'आउट'
बैकग्राउंड का रंग

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

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

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

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

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

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

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

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

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

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
बबल.ओपैसिटी

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#ccc'
बबल.टेक्स्टस्टाइल

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

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

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

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

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

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

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

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

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

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

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

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
चार्टएरीयल ऊंचाई

चार्ट एरिया की ऊंचाई.

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

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

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

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

ग्रेडिएंट कलर लेजेंड की शैली बताने वाला ऑब्जेक्ट.

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

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

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

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

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

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
इंटरैक्शन की सुविधा चालू करें

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

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

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

यह सुविधा प्रयोग के तौर पर उपलब्ध है. साथ ही, इसे आने वाली रिलीज़ में भी बदला जा सकता है.

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

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
explorer.action

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

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

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

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

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

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

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

टाइप: नंबर
डिफ़ॉल्ट: 0.25
एक्सप्लोरर.मैक्सज़ूम

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

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

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

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

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: '{8/}'
फ़ोर्सआईफ़्रेम

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

टाइप: बूलियन
डिफ़ॉल्ट: गलत
एचएक्सआई

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

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

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

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

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

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

वह दिशा जिसमें क्षैतिज अक्ष के साथ मान बढ़ते हैं. वैल्यू का क्रम उलटने के लिए, -1 बताएं.

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

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

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

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

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

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

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#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*/]},
  }
}

तारीख और समय में, ज़्यादा जानकारी देखी जा सकती है.

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

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: ग्रिडलाइन और बैकग्राउंड के रंगों का ब्लेंड
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*/]},
  }
}

तारीख और समय में, ज़्यादा जानकारी देखी जा सकती है.

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

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

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

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'आउट'
hAxis.textStyle

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

{ 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>}
एचएक्सिस

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

व्यू विंडो को अपने-आप बड़ा और छोटा करने के लिए, बड़ा करके दिखाया जाता है. ऐसा तब तक किया जाता है, जब तक आप viewWindow.min या viewWindow.max को ओवरराइड नहीं करते.

उदाहरण:

  • 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] }
टाइप: एलिमेंट की कैटगरी
डिफ़ॉल्ट: अपने-आप
hAxs.title

hAxis प्रॉपर्टी, जो हॉरिज़ॉन्टल ऐक्सिस का शीर्षक बताती है.

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

ऐसा ऑब्जेक्ट जो हॉरिज़ॉन्टल ऐक्सिस के शीर्षक के स्टाइल की जानकारी देता है. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है: 

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

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

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

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

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

चार्ट क्षेत्र में मानों को रेंडर करने के लिए क्षैतिज अक्ष को स्केल करने का तरीका बताता है. स्ट्रिंग की इन वैल्यू का इस्तेमाल किया जा सकता है:

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

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

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
hAxis.viewwindow.max

रेंडर करने के लिए ज़्यादा से ज़्यादा क्षैतिज डेटा मान.

hAxis.viewWindowMode को ' सुंदर' या 'ज़्यादा से ज़्यादा किया गया' होने पर अनदेखा किया जाता है.

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

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

hAxis.viewWindowMode को ' सुंदर' या 'ज़्यादा से ज़्यादा किया गया' होने पर अनदेखा किया जाता है.

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

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

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

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
लेजेंड.संरेखण

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

  • 'शुरू करें' - लेजेंड के लिए असाइन किए गए इलाके की शुरुआत के हिसाब से अलाइन किया गया.
  • 'center' - लीजेंड के लिए आवंटित क्षेत्र में केंद्रित.
  • 'end' - लीजेंड के लिए आबंटित क्षेत्र के अंत में संरेखित.

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

डिफ़ॉल्ट वैल्यू, लेजेंड की जगह पर निर्भर करती है. 'निचले' लेजेंड के लिए, डिफ़ॉल्ट रूप से 'center' होता है और दूसरा लेजेंड 'start' होता है.

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

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

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

टाइप: नंबर
डिफ़ॉल्ट: 1
लेजेंड.पेज इंडेक्स

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

टाइप: नंबर
डिफ़ॉल्ट: 0
लेजेंड.स्थिति

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

  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'left' - चार्ट के बाईं ओर मौजूद है, बशर्ते कि बाईं ओर के ऐक्सिस से कोई सीरीज़ न जुड़ी हो. इसलिए, अगर आपको बाईं ओर लेजेंड जोड़ना है, तो targetAxisIndex: 1 विकल्प का इस्तेमाल करें.
  • 'in' - चार्ट के अंदर, सबसे ऊपर बाएं कोने में.
  • 'कोई नहीं' - कोई लेजेंड नहीं दिखाया गया है.
  • 'right' - चार्ट के दाईं ओर. vAxes विकल्प के साथ काम नहीं करता.
  • 'ऊपर' - चार्ट के ऊपर.
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'दाएं'
लेजेंड.टेक्स्टस्टाइल

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

{ 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>}
चुने गए मोड

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'एक'
शृंखला

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

शीर्षक टेक्स्ट की शैली बताने वाला ऑब्जेक्ट. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है:

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

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

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

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

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

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

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

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

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

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

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
वाक्सिस बेसलाइन

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

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

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

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

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

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

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

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

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

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

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

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: '#CCC'
वैक्सिस.gridlines.count

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

टाइप: नंबर
डिफ़ॉल्ट: -1
वैक्सिस.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*/]}
  }
}

तारीख और समय में, ज़्यादा जानकारी देखी जा सकती है.

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
वैक्सिस.minorGridlines

vAxis.gridlines विकल्प के समान, वर्टिकल अक्ष पर छोटी ग्रिडलाइन को कॉन्फ़िगर करने के लिए सदस्यों के साथ एक ऑब्जेक्ट.

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
vAxis.minorGridlines.रंग

चार्ट एरिया में वर्टिकल छोटी ग्रिडलाइन का रंग. एचटीएमएल रंग की मान्य स्ट्रिंग बताएं.

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

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

टाइप: नंबर
डिफ़ॉल्ट: 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*/]},
  }
}

तारीख और समय में, ज़्यादा जानकारी देखी जा सकती है.

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

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

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

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'आउट'
vAxis.textStyle

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

{ 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>}
वैक्सिस

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

व्यू विंडो को अपने-आप बड़ा और छोटा करने के लिए, बड़ा करके दिखाया जाता है. ऐसा तब तक किया जाता है, जब तक आप viewWindow.min या viewWindow.max को ओवरराइड नहीं करते.

उदाहरण:

  • 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 प्रॉपर्टी, जो वर्टिकल ऐक्सिस के लिए शीर्षक तय करती है.

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

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

{ 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>}
वैक्सी.मैक्स वैल्यू

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

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

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

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

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

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

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

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
CANNOT TRANSLATE

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

vAxis.viewWindowMode को ' सुंदर' या 'ज़्यादा से ज़्यादा किया गया' होने पर अनदेखा किया जाता है.

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

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

vAxis.viewWindowMode को ' सुंदर' या 'ज़्यादा से ज़्यादा किया गया' होने पर अनदेखा किया जाता है.

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

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

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

तरीके

तरीका
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

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

प्रॉपर्टी: currentPageइंडेक्स, totalPage
onmouseover

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

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

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

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

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

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

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

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

डेटा नीति

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