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

खास जानकारी

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

उदाहरण

कॉलम में रंग भरना

आइए, चार कीमती धातुओं के घनत्व का चार्ट देखें:

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

कलर चुनने के तीन अलग-अलग तरीके हैं और हमारी डेटा टेबल में ये सभी रंग दिखाए जाते हैं: आरजीबी वैल्यू, अंग्रेज़ी में कलर के नाम, और सीएसएस (कंपैरिज़न शॉपिंग सर्विस) जैसे तरीके से किए गए एलान:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

कॉलम के स्टाइल

स्टाइल रोल, सीएसएस जैसी सूचनाओं की मदद से, कॉलम के दिखने के कई पहलुओं को कंट्रोल कर सकता है:

• color
• opacity
• fill-color
• fill-opacity
• stroke-color
• stroke-opacity
• stroke-width

हमारा सुझाव है कि आप चार्ट में अलग-अलग स्टाइल को बहुत आसानी से मिक्स न करें. कोई स्टाइल चुनें और उसका पालन करें. हालांकि, सभी स्टाइल एट्रिब्यूट दिखाने के लिए, यहां एक सैंपल दिया गया है:

पहले दो कॉलम में से हर एक के लिए खास color (पहला अंग्रेज़ी नाम वाला और दूसरे में आरजीबी वैल्यू वाला) इस्तेमाल होता है. कोई opacity नहीं चुना गया है, इसलिए 1.0 (पूरी तरह से ओपेक) की डिफ़ॉल्ट वैल्यू का इस्तेमाल किया गया है. इसलिए, दूसरा कॉलम, ग्रिडलाइन को छिपा देता है. तीसरे कॉलम में, ग्रिडलाइन को दिखाने के लिए, 0.2 के opacity का इस्तेमाल किया गया है. चौथे स्टाइल में, तीन स्टाइल एट्रिब्यूट का इस्तेमाल किया जाता है: बॉर्डर बनाने के लिए stroke-color और stroke-width और अंदर के रेक्टैंगल का रंग बताने के लिए fill-color. सबसे दाईं ओर के कॉलम में, stroke-opacity और fill-opacity का भी इस्तेमाल किया जाता है. इससे बॉर्डर और फ़िल के लिए अपारदर्शिता चुनी जा सकती है:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

कॉलम को लेबल करना

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

मान लें कि हम हर कॉलम के बारे में, सही केमिकल सिंबल के साथ एनोटेट करना चाहते हैं. हम एनोटेशन की भूमिका से ऐसा कर सकते हैं:

हम अपनी डेटा टेबल में, अपने कॉलम लेबल रखने के लिए, { role: 'annotation' } के साथ एक नया कॉलम बनाते हैं:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

उपयोगकर्ता डेटा वैल्यू देखने के लिए, कॉलम पर कर्सर घुमाकर उन्हें कॉलम में शामिल कर सकते हैं:

यह थोड़ा मुश्किल है, क्योंकि हम हर कॉलम के बारे में जानकारी देने के लिए एक DataView बनाते हैं.

  <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([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

अगर हमें वैल्यू को अलग तरीके से फ़ॉर्मैट करना है, तो हम फ़ॉर्मैटर तय कर सकते हैं और उसे इस तरह के फ़ंक्शन में रैप कर सकते हैं:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

फिर हम उसे calc: getValueAt.bind(undefined, 1) से कॉल कर सकते हैं.

अगर लेबल इतना बड़ा है कि कॉलम में पूरी तरह फ़िट नहीं हो सकता, तो यह बाहर दिखाई देता है:

स्टैक किए गए कॉलम चार्ट

स्टैक किया गया कॉलम चार्ट एक ऐसा कॉलम चार्ट है जिसमें मिलती-जुलती वैल्यू को एक-दूसरे के ऊपर रखा जाता है. अगर कोई नेगेटिव वैल्यू है, तो उसे चार्ट की बेसलाइन के नीचे उलटा क्रम में रखा जाता है. आम तौर पर, इसका इस्तेमाल तब किया जाता है, जब कोई कैटगरी अपने-आप कॉम्पोनेंट में बंट जाती है. उदाहरण के लिए, कुछ काल्पनिक किताबों की बिक्री को, शैली के हिसाब से भाग देकर और अलग-अलग समय पर उनकी तुलना करके देखें:

isStacked विकल्प को true पर सेट करके, स्टैक्ड कॉलम चार्ट बनाया जा सकता है:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

स्टैक किए गए कॉलम चार्ट में भी 100% स्टैकिंग की सुविधा काम करती है. इसमें हर डोमेन-वैल्यू पर एलिमेंट के स्टैक को इस तरह बदला जाता है कि वे 100% तक पहुंच जाएं. इसके लिए विकल्प isStacked: 'percent' हैं, जो हर वैल्यू को 100% के प्रतिशत के रूप में फ़ॉर्मैट करता है. साथ ही, isStacked: 'relative', जो हर वैल्यू को 1 के भिन्न के रूप में फ़ॉर्मैट करता है. आपके पास एक isStacked: 'absolute' विकल्प भी है, जो फ़ंक्शन के तौर पर isStacked: true की तरह काम करता है.

ध्यान दें कि दाईं ओर मौजूद 100% स्टैक किए गए चार्ट में, टिक की वैल्यू 0-1 वाले स्केल पर आधारित होती हैं, जो एक के फ़्रैक्शन के तौर पर होती है, लेकिन ऐक्सिस की वैल्यू, प्रतिशत के तौर पर दिखाई जाती हैं. ऐसा इसलिए होता है, क्योंकि प्रतिशत ऐक्सिस टिक, 0-1 स्केल की वैल्यू से मिलती-जुलती वैल्यू पर "#.##%" फ़ॉर्मैट लागू करने का नतीजा होता है. isStacked: 'percent' का इस्तेमाल करते समय, 0-1 स्केल के मिलते-जुलते स्केल का इस्तेमाल करके, किसी भी टिक/ऐक्सिस की वैल्यू बताना न भूलें.

स्टैक की गई सूची100% स्टैक किया गया

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

मटीरियल कॉलम चार्ट बनाना

साल 2014 में, Google ने ऐसे दिशा-निर्देशों का एलान किया जो Google के अलग-अलग प्लैटफ़ॉर्म पर चलने वाले सभी ऐप्लिकेशन और सभी ऐप्लिकेशन (जैसे कि Android ऐप्लिकेशन) पर सामान्य लुक और स्टाइल को बनाए रखने में मदद करते हैं. हम इस कोशिश को मटीरियल डिज़ाइन कहते हैं. हम अपने सभी मुख्य चार्ट के "मटीरियल" वर्शन उपलब्ध कराएंगे; अगर आपको वे कैसा दिखते हैं, तो उन्हें इस्तेमाल करने के लिए आपका स्वागत है.

मटीरियल कॉलम चार्ट बनाना, उसे बनाने जैसा ही है जिसे अब हम "क्लासिक" कॉलम चार्ट कहते हैं. Google विज़ुअलाइज़ेशन एपीआई को लोड किया जाता है (हालांकि, 'corechart' पैकेज के बजाय 'bar' पैकेज के साथ), डेटाटेबल तय की जाती है. इसके बाद, एक ऑब्जेक्ट बनाया जाता है (लेकिन google.visualization.ColumnChart की जगह google.charts.Bar क्लास का).

बार चार्ट और कॉलम चार्ट एक जैसे होते हैं, लेकिन ओरिएंटेशन के लिए, हम मटीरियल बार चार्ट दोनों को कहते हैं. इससे कोई फ़र्क़ नहीं पड़ता कि बार, वर्टिकल (क्लासिक तौर पर, कॉलम चार्ट) या हॉरिज़ॉन्टल (बार चार्ट) हैं. मटीरियल में, सिर्फ़ bars विकल्प में अंतर है. 'horizontal' पर सेट करने पर, ओरिएंटेशन, क्लासिक बार चार्ट जैसा दिखेगा. ऐसा न होने पर, बार वर्टिकल होंगे.

ध्यान दें: मटीरियल चार्ट, Internet Explorer के पुराने वर्शन में काम नहीं करेंगे. (IE8 और इससे पहले के वर्शन में SVG फ़ाइल काम नहीं करती, जो मटीरियल चार्ट की सुविधा के लिए ज़रूरी है.)

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

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

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

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

chart.draw(data, options);

...इससे:

chart.draw(data, google.charts.Bar.convertOptions(options));

google.charts.Bar.convertOptions() का इस्तेमाल करने पर, आपको hAxis/vAxis.format प्रीसेट विकल्प जैसी कुछ सुविधाओं का फ़ायदा मिलता है.

<script type="text/javascript" src="https://www.gstatic.cn/charts/loader.js"></script> <div id="chart_div"></div> <br/> <div id="btn-group"> <button class="button button-blue" id="none">No Format</button> <button class="button button-blue" id="scientific">Scientific Notation</button> <button class="button button-blue" id="decimal">Decimal</button> <button class="button button-blue" id="short">Short</button> </div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'vertical', vAxis: {format: 'decimal'}, height: 400, colors: ['#1b9e77', '#d95f02', '#7570b3'] }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); var btns = document.getElementById('btn-group'); btns.onclick = function (e) { if (e.target.tagName === 'BUTTON') { options.vAxis.format = e.target.id === 'none' ? '' : e.target.id; chart.draw(data, google.charts.Bar.convertOptions(options)); } } }

ड्यूअल-Y चार्ट

कभी-कभी हो सकता है कि आप दो अलग-अलग Y-ऐक्सिस के साथ किसी कॉलम चार्ट में दो सीरीज़ दिखाना चाहें: एक सीरीज़ के लिए बायां ऐक्सिस और दूसरी के लिए राइट ऐक्सिस:

<script type="text/javascript" src="https://www.gstatic.cn/charts/loader.js"></script> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart', 'bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var materialOptions = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: {label: 'parsecs'}, // Left y-axis. brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis. } } }; var classicOptions = { width: 900, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'parsecs'}, 1: {title: 'apparent magnitude'} } }; function drawMaterialChart() { var materialChart = new google.charts.Bar(chartDiv); materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };

ध्यान दें कि हमारे दो y-ऐक्सिस को न सिर्फ़ अलग-अलग लेबल किया गया है ("पार्सेक्स" बनाम "साफ़ मैग्निट्यूड"), बल्कि हर एक के अपने-अपने स्केल और ग्रिडलाइन हैं. इस व्यवहार को पसंद के मुताबिक बनाने के लिए, vAxis.gridlines विकल्पों का इस्तेमाल करें.

नीचे दिए गए कोड में, axes और series विकल्प एक साथ चार्ट के ड्यूअल-Y व्यू के बारे में बताते हैं. series विकल्प से यह तय होता है कि हर ('distance' और 'brightness') के लिए किस ऐक्सिस का इस्तेमाल किया जाए. डेटा टेबल में मौजूद कॉलम के नामों से इनका कोई संबंध नहीं होता है. इसके बाद, axes विकल्प इस चार्ट को ड्यूअल-Y चार्ट में बनाता है. इसमें 'distance' ऐक्सिस को बाईं ओर ("पार्सेक्स" लेबल किया गया है) और 'brightness' ऐक्सिस (जिसे "साफ़ माप" लेबल किया गया है) पर रखा जाता है.

<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', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

टॉप-X चार्ट

ध्यान दें: टॉप-X ऐक्सिस सिर्फ़ मटीरियल चार्ट के लिए उपलब्ध होते हैं यानी कि पैकेज bar वाले चार्ट के लिए.

अगर आपको अपने चार्ट में सबसे नीचे के बजाय, X-ऐक्सिस लेबल और टाइटल को सबसे ऊपर रखना है, तो ऐसा axes.x विकल्प की मदद से मटीरियल चार्ट में किया जा सकता है:

<script type="text/javascript" src="https://www.gstatic.cn/charts/loader.js"></script> <div id="top_x_div" style="width: 800px; height: 600px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { width: 800, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, axes: { x: { 0: { side: 'top', label: 'White to move'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); };

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

लोड हो रहा है

google.charts.load पैकेज का नाम "corechart" है. विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.ColumnChart है.

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

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

मटीरियल कॉलम चार्ट के लिए, google.charts.load पैकेज का नाम "bar" है. (कोई टाइपिंग नहीं: मटीरियल बार चार्ट दोनों ओरिएंटेशन को हैंडल करता है.) विज़ुअलाइज़ेशन की क्लास का नाम google.charts.Bar है. (कोई टाइपिंग नहीं: मटीरियल बार चार्ट दोनों ओरिएंटेशन को हैंडल करता है.)

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

  var chart = new google.charts.Bar(container);

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

टेबल की हर पंक्ति आस-पास मौजूद बार का ग्रुप दिखाती है.

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

कॉलम:

	कॉलम 0	कॉलम 1	...	कॉलम N
मकसद:	X-ऐक्सिस ग्रुप लेबल (अलग-अलग) X-ऐक्सिस की वैल्यू (लगातार)	इस ग्रुप में बार 1 की वैल्यू	...	इस ग्रुप में बार N वैल्यू
डेटा टाइप:	स्ट्रिंग (अलग-अलग) नंबर, तारीख, तारीख और दिन का समय (लगातार)	नंबर	...	नंबर
भूमिका:	डोमेन	डेटा	...	डेटा
कॉलम की वैकल्पिक भूमिकाएं:	एनोटेशन annotationText	एनोटेशन annotationText निश्चितता इंटरवल दायरा स्टाइल टूलटिप	...	एनोटेशन annotationText निश्चितता इंटरवल दायरा स्टाइल टूलटिप

 

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

नाम
animation.duration	ऐनिमेशन की अवधि, मिलीसेकंड में. ज़्यादा जानकारी के लिए, ऐनिमेशन दस्तावेज़ देखें. टाइप: नंबर डिफ़ॉल्ट: 0
animation.easing	ऐनिमेशन पर ईज़िंग फ़ंक्शन लागू किया गया. ये विकल्प उपलब्ध हैं: 'लीनियर' - कॉन्स्टेंट स्पीड. 'in' - आसानी से शुरू करें - धीरे शुरू करें और स्पीड बढ़ाएं. 'आउट' - आसानी से शुरू करें - तेज़ी से शुरू करें और स्पीड कम करें. 'inAndOut' - आसान अंदर और बाहर - धीरे शुरू करें, स्पीड बढ़ाएं, फिर धीमा करें. Type: स्ट्रिंग डिफ़ॉल्ट: 'लीनियर'
animation.startup	इससे तय होता है कि शुरुआती ड्रॉ पर चार्ट ऐनिमेट होगा या नहीं. अगर true, तो चार्ट बेसलाइन से शुरू होगा और अपनी आखिरी स्थिति तक ऐनिमेशन करेगा. टाइप: बूलियन डिफ़ॉल्ट गलत
annotations.alwaysOutside	अगर बार और कॉलम चार्ट में, true पर सेट किया गया है, तो वह सभी एनोटेशन बार/कॉलम से बाहर ड्रॉ करता है. टाइप: बूलियन डिफ़ॉल्ट: गलत
annotations.boxStyle	एनोटेशन के साथ काम करने वाले चार्ट के लिए, annotations.boxStyle ऑब्जेक्ट यह कंट्रोल करता है कि एनोटेशन के आस-पास बॉक्स कैसे दिखें: var options = {   annotations: {     boxStyle: {       // Color of the box outline.       stroke: '#888',       // Thickness of the box outline.       strokeWidth: 1,       // x-radius of the corner curvature.       rx: 10,       // y-radius of the corner curvature.       ry: 10,       // Attributes for linear gradient fill.       gradient: {         // Start color for gradient.         color1: '#fbf6a7',         // Finish color for gradient.         color2: '#33b679',         // Where on the boundary to start and         // end the color1/color2 gradient,         // relative to the upper left corner         // of the boundary.         x1: '0%', y1: '0%',         x2: '100%', y2: '100%',         // If true, the boundary for x1,         // y1, x2, and y2 is the box. If         // false, it's the entire chart.         useObjectBoundingBoxUnits: true       }     }   } };     फ़िलहाल, यह विकल्प एरिया, बार, कॉलम, कॉम्बो, लाइन, और स्कैटर चार्ट के लिए इस्तेमाल किया जा सकता है. एनोटेशन चार्ट पर इसका इस्तेमाल नहीं किया जा सकता. Type: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
annotations.datum	एनोटेशन के साथ काम करने वाले चार्ट के लिए, annotations.datum ऑब्जेक्ट अलग-अलग डेटा एलिमेंट के लिए दिए गए एनोटेशन के लिए, Google चार्ट के चुने गए विकल्प को बदलता है. जैसे, बार चार्ट पर हर बार के साथ दिखाई गई वैल्यू. annotations.datum.stem.color की मदद से रंग, स्टेम की लंबाई annotations.datum.stem.length, और स्टाइल को annotations.datum.style की मदद से कंट्रोल किया जा सकता है. Type: ऑब्जेक्ट डिफ़ॉल्ट: रंग "काला" है, लंबाई 12 है; स्टाइल "पॉइंट" है.
annotations.domain	एनोटेशन के साथ काम करने वाले चार्ट के लिए, annotations.domain ऑब्जेक्ट की मदद से किसी डोमेन (चार्ट का मुख्य ऐक्सिस, जैसे कि किसी सामान्य लाइन चार्ट पर X ऐक्सिस) के लिए दिए गए एनोटेशन के लिए, Google चार्ट के चुने गए विकल्प को बदला जा सकता है. annotations.domain.stem.color की मदद से रंग, स्टेम की लंबाई annotations.domain.stem.length, और स्टाइल को annotations.domain.style की मदद से कंट्रोल किया जा सकता है. Type: ऑब्जेक्ट डिफ़ॉल्ट: रंग "काला" है, लंबाई 5 है; स्टाइल "पॉइंट" है.
annotations.highContrast	एनोटेशन के साथ काम करने वाले चार्ट में, annotations.highContrast बूलियन का इस्तेमाल करके Google चार्ट में एनोटेशन के लिए चुने गए रंग को बदला जा सकता है. डिफ़ॉल्ट रूप से, annotations.highContrast सही है और इस वजह से चार्ट, एनोटेशन के लिए अच्छे कंट्रास्ट वाला रंग चुनता है: गहरे बैकग्राउंड पर हल्के रंग और हल्के पर गहरे रंग. अगर annotations.highContrast को गलत पर सेट किया जाता है और एनोटेशन का रंग अपने हिसाब से नहीं दिया जाता है, तो Google चार्ट, एनोटेशन के लिए सीरीज़ के डिफ़ॉल्ट रंग का इस्तेमाल करेगा: टाइप: बूलियन डिफ़ॉल्ट: सही
annotations.stem	एनोटेशन के साथ काम करने वाले चार्ट में, annotations.stem ऑब्जेक्ट की मदद से, स्टेम स्टाइल के लिए Google चार्ट में दी गई पसंद को बदला जा सकता है. annotations.stem.color की मदद से, रंग को कंट्रोल किया जा सकता है और annotations.stem.length की मदद से स्टेम की लंबाई को कंट्रोल किया जा सकता है. ध्यान दें कि स्टेम की लंबाई वाले विकल्प से, 'line' स्टाइल वाले एनोटेशन पर कोई असर नहीं पड़ता: 'line' डाटुम एनोटेशन के लिए स्टेम की लंबाई हमेशा टेक्स्ट की तरह ही होती है. वहीं, 'line' डोमेन एनोटेशन के लिए स्टेम की लंबाई पूरे चार्ट में दिखती है. Type: ऑब्जेक्ट डिफ़ॉल्ट: रंग "काला" है; डोमेन एनोटेशन के लिए लंबाई 5 और डाटुम एनोटेशन के लिए 12 है.
annotations.style	एनोटेशन के साथ काम करने वाले चार्ट के लिए, annotations.style विकल्प की मदद से Google चार्ट में, जानकारी के टाइप के चुने गए विकल्प को बदला जा सकता है. यह 'line' या 'point' हो सकता है. Type: स्ट्रिंग डिफ़ॉल्ट: 'पॉइंट'
annotations.textStyle	एनोटेशन के साथ काम करने वाले चार्ट के लिए, annotations.textStyle ऑब्जेक्ट यह कंट्रोल करता है कि एनोटेशन का टेक्स्ट कैसा दिखे: var options = {   annotations: {     textStyle: {       fontName: 'Times-Roman',       fontSize: 18,       bold: true,       italic: true,       // The color of the text.       color: '#871b47',       // The color of the text outline.       auraColor: '#d799ae',       // The transparency of the text.       opacity: 0.8     }   } };     फ़िलहाल, यह विकल्प एरिया, बार, कॉलम, कॉम्बो, लाइन, और स्कैटर चार्ट के लिए इस्तेमाल किया जा सकता है. एनोटेशन चार्ट पर यह काम नहीं करता. Type: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
axisTitlesPosition	चार्ट एरिया की तुलना में ऐक्सिस के टाइटल कहां डालें. इस्तेमाल की जा सकने वाली वैल्यू: में - चार्ट एरिया के अंदर ऐक्सिस के टाइटल बनाएं. आउट - चार्ट एरिया के बाहर ऐक्सिस के टाइटल बनाएं. कोई नहीं - ऐक्सिस के टाइटल हटा दें. Type: स्ट्रिंग डिफ़ॉल्ट: 'आउट'
backgroundColor	चार्ट के मुख्य हिस्से के लिए बैकग्राउंड का रंग. यह एक सामान्य एचटीएमएल कलर स्ट्रिंग हो सकती है, जैसे: 'red' या '#00cc00'. इसके अलावा, यह इन प्रॉपर्टी वाला कोई ऑब्जेक्ट भी हो सकता है. टाइप: स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट: 'सफ़ेद'
backgroundColor.stroke	एचटीएमएल कलर स्ट्रिंग के तौर पर, चार्ट के बॉर्डर का रंग. Type: स्ट्रिंग डिफ़ॉल्ट: '#666'
backgroundColor.strokeWidth	बॉर्डर की चौड़ाई, पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: 0
backgroundColor.fill	एचटीएमएल कलर स्ट्रिंग के तौर पर, चार्ट में भरने वाला रंग. Type: स्ट्रिंग डिफ़ॉल्ट: 'सफ़ेद'
bar.groupWidth	बार के ग्रुप की चौड़ाई, जिसे इन फ़ॉर्मैट में से किसी एक में तय किया गया है: पिक्सल (उदाहरण के लिए, 50). हर ग्रुप के लिए उपलब्ध चौड़ाई का प्रतिशत (उदाहरण के लिए, '20%'), जहां '100%' का मतलब है कि ग्रुप के बीच कोई खाली जगह नहीं है. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: गोल्डन रेशियो, करीब '61.8%' होता है.
बार	मटीरियल बार चार्ट में बार, वर्टिकल या हॉरिज़ॉन्टल हैं या नहीं. इस विकल्प का क्लासिक बार चार्ट या क्लासिक कॉलम चार्ट पर कोई असर नहीं पड़ता. टाइप: 'हॉरिज़ॉन्टल' या 'वर्टिकल' डिफ़ॉल्ट: 'वर्टिकल'
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	चार्ट क्षेत्र की ऊंचाई. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
chart.subtitle	मटीरियल चार्ट के लिए, यह विकल्प सबटाइटल के बारे में बताता है. सिर्फ़ मटीरियल चार्ट में सबटाइटल काम करते हैं. Type: स्ट्रिंग डिफ़ॉल्ट: शून्य
chart.title	मटीरियल चार्ट के लिए, यह विकल्प टाइटल के बारे में बताता है. Type: स्ट्रिंग डिफ़ॉल्ट: शून्य
कलर	चार्ट के एलिमेंट के लिए इस्तेमाल किए जाने वाले रंग. स्ट्रिंग का कलेक्शन, जिसमें हर एलिमेंट एक एचटीएमएल कलर स्ट्रिंग है, जैसे: colors:['red','#004411']. टाइप: स्ट्रिंग की कलेक्शन डिफ़ॉल्ट: डिफ़ॉल्ट रंग
dataOpacity	डेटा पॉइंट की पारदर्शिता, जिसमें 1.0 पूरी तरह से पारदर्शी और 0.0 पारदर्शी है. स्कैटर, हिस्टोग्राम, बार, और कॉलम चार्ट में, दिखने वाले डेटा की जानकारी होती है: स्कैटर चार्ट में बिंदु और दूसरे में रेक्टैंगल. जिन चार्ट में डेटा चुनने की सुविधा होती है उनसे लाइन और एरिया चार्ट जैसे बिंदु बनते हैं. इस बिंदु से उन सर्कल के बारे में पता चलता है जो कर्सर पर कर्सर घुमाने या चुनने पर दिखते हैं. कॉम्बो चार्ट, दोनों तरह के व्यवहार दिखाता है. इस विकल्प का दूसरे चार्ट पर कोई असर नहीं पड़ता. (ट्रेंडलाइन की ओपैसिटी बदलने के लिए, ट्रेंडलाइन की ओपैसिटी देखें.) टाइप: नंबर डिफ़ॉल्ट: 1.0
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
focusTarget	माउस होवर पर फ़ोकस पाने वाली इकाई का टाइप. इससे यह भी तय होता है कि माउस क्लिक से कौनसी इकाई चुनी जाती है और इवेंट से जुड़ा डेटा टेबल का कौनसा एलिमेंट. इनमें से कोई एक स्थिति हो सकती है: 'datum' - किसी एक डेटा पॉइंट पर फ़ोकस करें. डेटा टेबल में किसी सेल से जुड़ा होता है. 'कैटगरी' - मुख्य ऐक्सिस पर मौजूद सभी डेटा पॉइंट के ग्रुप पर फ़ोकस करें. डेटा टेबल में एक लाइन से जुड़ा होता है. फ़ोकस टारगेट 'कैटगरी' में टूलटिप में सभी कैटगरी की वैल्यू दिखती हैं. इससे, अलग-अलग सीरीज़ की वैल्यू की तुलना करने में मदद मिल सकती है. Type: स्ट्रिंग डिफ़ॉल्ट: 'datum'
fontSize	चार्ट में सभी टेक्स्ट का डिफ़ॉल्ट फ़ॉन्ट साइज़, पिक्सल में. खास चार्ट एलिमेंट के लिए प्रॉपर्टी का इस्तेमाल करके, इसे बदला जा सकता है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
fontName	चार्ट में सभी टेक्स्ट के लिए डिफ़ॉल्ट फ़ॉन्ट फ़ेस. खास चार्ट एलिमेंट के लिए प्रॉपर्टी का इस्तेमाल करके, इसे बदला जा सकता है. Type: स्ट्रिंग डिफ़ॉल्ट: 'राय'
forceIFrame	चार्ट को किसी इनलाइन फ़्रेम के अंदर ड्रॉ करता है. ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है. सभी IE8 चार्ट, i-फ़्रेम में बनाए जाते हैं. टाइप: बूलियन डिफ़ॉल्ट: गलत
hAxis	हॉरिज़ॉन्टल ऐक्सिस के अलग-अलग एलिमेंट को कॉन्फ़िगर करने के लिए, सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Type: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
hAxis.baseline	हॉरिज़ॉन्टल ऐक्सिस के लिए बेसलाइन. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
hAxis.baselineColor	हॉरिज़ॉन्टल ऐक्सिस के लिए बेसलाइन का रंग. यह कोई भी एचटीएमएल कलर स्ट्रिंग हो सकती है, जैसे: 'red' या '#00cc00'. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. टाइप: नंबर डिफ़ॉल्ट: 'काला'
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:'MMM d, y'}, पहली जुलाई 2011 की तारीख के लिए "1 जुलाई, 2011" वैल्यू दिखाएगा. लेबल पर लागू की गई असल फ़ॉर्मैटिंग, उस स्थान-भाषा से ली गई है जिससे एपीआई को लोड किया गया है. ज़्यादा जानकारी के लिए, किसी खास स्थान-भाषा में चार्ट लोड करना देखें. टिक वैल्यू और ग्रिडलाइन की गिनती करते समय, सभी ज़रूरी ग्रिडलाइन विकल्पों के कई वैकल्पिक कॉम्बिनेशन को ध्यान में रखा जाएगा. अगर फ़ॉर्मैट किए गए टिक लेबल डुप्लीकेट या ओवरलैप होते हैं, तो उन विकल्पों को अस्वीकार कर दिया जाएगा. इसलिए, अगर आपको सिर्फ़ पूर्णांक टिक वैल्यू दिखानी हैं, तो format:"#" बताया जा सकता है. हालांकि, ध्यान रखें कि अगर कोई विकल्प इस शर्त के हिसाब से सही नहीं है, तो ग्रिडलाइन या टिक नहीं दिखाए जाएंगे. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. Type: स्ट्रिंग डिफ़ॉल्ट: अपने-आप
hAxis.gridlines	हॉरिज़ॉन्टल ऐक्सिस पर ग्रिडलाइन कॉन्फ़िगर करने के लिए, प्रॉपर्टी वाला ऑब्जेक्ट. ध्यान दें कि हॉरिज़ॉन्टल ऐक्सिस ग्रिडलाइन वर्टिकल तौर पर बनाई जाती हैं. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: {color: '#333', minSpacing: 20} यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. Type: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
hAxis.gridlines.color	चार्ट एरिया के अंदर हॉरिज़ॉन्टल ग्रिडलाइन का रंग. एक मान्य एचटीएमएल कलर स्ट्रिंग डालें. Type: स्ट्रिंग डिफ़ॉल्ट: '#CCC'
hAxis.gridlines.count	चार्ट एरिया में हॉरिज़ॉन्टल ग्रिडलाइन की अनुमानित संख्या. अगर gridlines.count के लिए पॉज़िटिव नंबर दिया जाता है, तो ग्रिडलाइन के बीच minSpacing की गिनती करने के लिए इसका इस्तेमाल किया जाएगा. सिर्फ़ एक ग्रिडलाइन बनाने के लिए, 1 की वैल्यू तय की जा सकती है. इसके अलावा, कोई ग्रिडलाइन बनाने के लिए 0 वैल्यू भी तय की जा सकती है. दूसरे विकल्पों के आधार पर ग्रिडलाइन की संख्या अपने-आप कंप्यूट करने के लिए, -1 तय करें, जो कि डिफ़ॉल्ट है. टाइप: नंबर डिफ़ॉल्ट: -1
hAxis.gridlines.interval	पास-पास मौजूद ग्रिडलाइन के बीच अलग-अलग साइज़ का कलेक्शन. यह डेटा वैल्यू के तौर पर होता है, न कि पिक्सल के तौर पर. फ़िलहाल, यह विकल्प सिर्फ़ नंबर वाले ऐक्सिस के लिए है. हालांकि, यह विकल्प gridlines.units.<unit>.interval विकल्पों से मिलता-जुलता है, जिन्हें सिर्फ़ तारीखों और समय के लिए इस्तेमाल किया जाता है. लीनियर स्केल के लिए, डिफ़ॉल्ट वैल्यू [1, 2, 2.5, 5] होती है. इसका मतलब है कि ग्रिडलाइन की वैल्यू हर यूनिट (1), सम यूनिट (2) या 2.5 या 5 के मल्टीपल पर आ सकती हैं. इन वैल्यू का 10 गुना ज़्यादा होने पर भी वैल्यू को माना जाता है (उदाहरण के लिए, [10, 20, 25, 50] और [.1, .2, .25, .5]). लॉग स्केल के लिए, डिफ़ॉल्ट वैल्यू [1, 2, 5] है. टाइप: 1 से 10 के बीच की संख्या. इसमें 10 शामिल नहीं है. डिफ़ॉल्ट: कंप्यूट किया गया
hAxis.gridlines.minSpacing	hAxis प्रमुख ग्रिडलाइन के बीच, पिक्सल में कम से कम स्क्रीन स्पेस. बड़ी ग्रिडलाइन के लिए डिफ़ॉल्ट वैल्यू लीनियर स्केल के लिए 40 और लॉग स्केल के लिए 20 होती है. minSpacing की जगह count की जानकारी देने पर, minSspace की गिनती इस संख्या से की जाती है. इसके उलट, count की जगह minSpacing की जानकारी देने पर संख्या का हिसाब, minSpacing से लगाया जाता है. अगर दोनों का इस्तेमाल किया जाता है, तो minSpacing बदल जाता है. टाइप: नंबर डिफ़ॉल्ट: कंप्यूट किया गया
hAxis.gridlines.multiple	सभी ग्रिडलाइन और टिक की वैल्यू, इस विकल्प की वैल्यू के मल्टीपल में होनी चाहिए. ध्यान दें कि इंटरवल के उलट, एक से ज़्यादा 10 गुना घात को नहीं माना जाता है. gridlines.multiple = 1 तय करके, टिक को पूर्णांक बनाया जा सकता है या gridlines.multiple = 1000 तय करके, टिक को 1,000 के मल्टीपल में बदला जा सकता है. टाइप: नंबर डिफ़ॉल्ट: 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 विकल्प की तरह ही, हॉरिज़ॉन्टल ऐक्सिस पर माइनर ग्रिडलाइन कॉन्फ़िगर करने के लिए सदस्यों वाला ऑब्जेक्ट. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. Type: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
hAxis.minorGridlines.color	चार्ट एरिया के अंदर हॉरिज़ॉन्टल माइनर ग्रिडलाइन का रंग. एक मान्य एचटीएमएल कलर स्ट्रिंग डालें. Type: स्ट्रिंग डिफ़ॉल्ट: ग्रिडलाइन और बैकग्राउंड के रंगों का मिला-जुला रूप
hAxis.minorGridlines.count	minorGridlines.count विकल्प ज़्यादातर काम नहीं करता है. हालांकि, गिनती को 0 पर सेट करके, माइनर ग्रिडलाइन को बंद करने के अलावा, यह विकल्प भी काम नहीं करता है. अब माइनर ग्रिडलाइन की संख्या पूरी तरह से बड़ी ग्रिडलाइन (hAxis.gridlines.interval देखें) के बीच के समय और कम से कम ज़रूरी जगह (hAxis.minorGridlines.minSpacing देखें) पर निर्भर करती है. टाइप: नंबर डिफ़ॉल्ट:1
hAxis.minorGridlines.interval	छोटा ग्रिडलाइन विकल्प, मुख्य ग्रिडलाइन इंटरवल विकल्प की तरह है.हालांकि, चुना गया इंटरवल हमेशा, मुख्य ग्रिडलाइन इंटरवल का बराबर की तरह से बराबर होना चाहिए. लीनियर स्केल का डिफ़ॉल्ट इंटरवल [1, 1.5, 2, 2.5, 5] है, और लॉग स्केल के लिए डिफ़ॉल्ट इंटरवल [1, 2, 5] है. टाइप: नंबर डिफ़ॉल्ट:1
hAxis.minorGridlines.minSpacing	पिक्सल में, आस-पास मौजूद माइनर ग्रिडलाइन के बीच, माइनर और बड़ी ग्रिडलाइन के बीच, कम से कम ज़रूरी जगह. डिफ़ॉल्ट वैल्यू, लीनियर स्केल के लिए बड़ी ग्रिडलाइन की कम से कम दूरी 1/2 है और लॉग स्केल के लिए मिनिमम स्पेसिंग की 1/5 है. टाइप: नंबर डिफ़ॉल्ट:कंप्यूट किया गया
hAxis.minorGridlines.multiple	मुख्य gridlines.multiple के बराबर. टाइप: नंबर डिफ़ॉल्ट: 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 प्रॉपर्टी, जो हॉरिज़ॉन्टल ऐक्सिस को लॉगारिद्मिक स्केल बनाती है (सभी वैल्यू का पॉज़िटिव होना ज़रूरी है). हां के लिए सही पर सेट करें. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. टाइप: बूलियन डिफ़ॉल्ट: गलत
hAxis.scaleType	hAxis प्रॉपर्टी, जो हॉरिज़ॉन्टल ऐक्सिस को लॉगारिद्मिक स्केल बनाती है. इनमें से कोई एक चीज़ हो सकती है: शून्य - कोई लॉगारिद्मिक स्केलिंग नहीं की जाती है. 'लॉग' - लॉगारिद्मिक स्केलिंग. नेगेटिव और शून्य वैल्यू को प्लॉट नहीं किया जाता. यह विकल्प, hAxis: { logscale: true } को सेट करने जैसा ही है. 'mirrorLog' - लॉगारिद्मिक स्केलिंग, जिसमें नेगेटिव और शून्य मान प्लॉट किए जाते हैं. नेगेटिव नंबर की प्लॉट की गई वैल्यू, निरपेक्ष वैल्यू के लॉग का नेगेटिव होता है. 0 के करीब की वैल्यू को लीनियर स्केल पर दिखाया जाता है. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. 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] } यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. टाइप: एलिमेंट की कलेक्शन डिफ़ॉल्ट: अपने-आप
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.allowContainerBoundaryTextCutoff	गलत होने पर, चार्ट कंटेनर की मदद से उन्हें काटने के बजाय, बाहरी लेबल छिपा दिए जाएंगे. अगर सही है, तो लेबल को काटने की अनुमति दी जाएगी. यह विकल्प सिर्फ़ discrete ऐक्सिस के लिए काम करता है. टाइप: बूलियन डिफ़ॉल्ट: गलत
hAxis.slantedText	अगर सही है, तो हॉरिज़ॉन्टल ऐक्सिस टेक्स्ट को किसी ऐंगल पर बनाएं, ताकि ऐक्सिस पर ज़्यादा टेक्स्ट फ़िट हो सके. अगर गलत है, तो हॉरिज़ॉन्टल ऐक्सिस टेक्स्ट को ऊपर की ओर खींचें. डिफ़ॉल्ट तौर पर, टेक्स्ट को तिरछा करना होता है. ऐसा तब होता है, जब टेक्स्ट को ऊपर की ओर खींचने पर वह टेक्स्ट में फ़िट न हो. ध्यान दें कि यह विकल्प सिर्फ़ तब उपलब्ध होता है, जब hAxis.textPosition को 'out' (जो डिफ़ॉल्ट तौर पर सेट है) पर सेट होता है. तारीखों और समय के लिए डिफ़ॉल्ट तौर पर false है. टाइप: बूलियन डिफ़ॉल्ट: अपने-आप
hAxis.slantedTextAngle	हॉरिज़ॉन्टल ऐक्सिस टेक्स्ट का कोण, अगर इसे तिरछा बनाया गया है. अगर hAxis.slantedText, false पर सेट है या ऑटो मोड में है, तो इस पर ध्यान नहीं दिया जाता. साथ ही, चार्ट में टेक्स्ट को हॉरिज़ॉन्टल तौर पर दिखाने का फ़ैसला लिया जाता है. अगर ऐंगल पॉज़िटिव है, तो रोटेशन घड़ी की उलटी दिशा में होता है और अगर ऋणात्मक होता है, तो यह घड़ी की सुई की दिशा में होता है. टाइप: नंबर, -90 से 90 डिफ़ॉल्ट: 30
hAxis.maxAlternation	हॉरिज़ॉन्टल ऐक्सिस टेक्स्ट के लेवल की ज़्यादा से ज़्यादा संख्या. अगर ऐक्सिस के टेक्स्ट लेबल में बहुत ज़्यादा भीड़ हो जाती है, तो सर्वर आस-पास के लेबल को ऊपर या नीचे की ओर ले जा सकता है, ताकि लेबल एक-दूसरे के करीब फ़िट हो सकें. इस वैल्यू से इस्तेमाल किए जाने वाले लेवल की ज़्यादा से ज़्यादा संख्या के बारे में पता चलता है. अगर लेबल ओवरलैप किए बिना फ़िट हो सकते हैं, तो सर्वर कम लेवल का इस्तेमाल कर सकता है. तारीखों और समय के लिए, डिफ़ॉल्ट वैल्यू 1 होती है. टाइप: नंबर डिफ़ॉल्ट: 2
hAxis.maxTextLines	टेक्स्ट लेबल के लिए तय लाइनों की ज़्यादा से ज़्यादा संख्या. अगर लेबल बहुत लंबी हैं, तो लेबल में कई लाइनें हो सकती हैं. साथ ही, लाइनों की संख्या डिफ़ॉल्ट रूप से उपलब्ध जगह की ऊंचाई के हिसाब से तय होती है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
hAxis.minTextSpacing	दो पास के टेक्स्ट लेबल के बीच, पिक्सल में मंज़ूर किया गया कम से कम हॉरिज़ॉन्टल स्पेस. अगर लेबल बहुत ज़्यादा स्पेस में हों या वे ज़्यादा लंबे हों, तो स्पेस इस थ्रेशोल्ड से कम हो सकता है.ऐसे में, लेबल-अनक्लटरिंग का कोई एक तरीका लागू किया जाएगा (उदाहरण के लिए, लेबल को छोटा करना या उनमें से कुछ को छोड़ना). टाइप: नंबर डिफ़ॉल्ट: hAxis.textStyle.fontSize की वैल्यू
hAxis.showTextEvery	कितने हॉरिज़ॉन्टल ऐक्सिस लेबल दिखाने हैं, यहां 1 का मतलब है हर लेबल को दिखाना, 2 का मतलब है हर दूसरे लेबल को दिखाना वगैरह. डिफ़ॉल्ट तौर पर, बिना ओवरलैप किए ज़्यादा से ज़्यादा लेबल दिखाने की कोशिश की जाती है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
hAxis.maxValue	हॉरिज़ॉन्टल ऐक्सिस की सबसे बड़ी वैल्यू को, बताई गई वैल्यू पर ले जाता है. ज़्यादातर चार्ट में, यह वैल्यू दाईं ओर होगी. अगर इसे डेटा की सबसे बड़ी वैल्यू x-वैल्यू से कम पर सेट किया गया है, तो इस पर ध्यान नहीं दिया जाता. hAxis.viewWindow.max इस प्रॉपर्टी को बदल देता है. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
hAxis.minValue	हॉरिज़ॉन्टल ऐक्सिस की कम से कम वैल्यू को, बताई गई वैल्यू पर ले जाता है. ज़्यादातर चार्ट में, यह वैल्यू बाईं ओर दिखेगी. अगर इसकी वैल्यू, डेटा की सबसे कम x-वैल्यू से ज़्यादा पर सेट है, तो इस पर ध्यान नहीं दिया जाता. hAxis.viewWindow.min इस प्रॉपर्टी को बदल देता है. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
hAxis.viewWindowMode	इससे पता चलता है कि चार्ट एरिया में वैल्यू रेंडर करने के लिए, हॉरिज़ॉन्टल ऐक्सिस को कैसे स्केल किया जाए. इन स्ट्रिंग वैल्यू का इस्तेमाल किया जा सकता है: 'सुंदर' - हॉरिज़ॉन्टल वैल्यू को स्केल करें, ताकि सबसे ज़्यादा और सबसे कम डेटा वैल्यू को चार्ट एरिया के बाईं और दाईं ओर थोड़ा-सा रेंडर किया जा सके. viewWindow को संख्याओं के लिए सबसे नज़दीकी मुख्य ग्रिडलाइन तक या तारीख और समय के लिए सबसे नज़दीकी माइनर ग्रिडलाइन में बड़ा किया जाता है. 'बड़ा किया गया' - हॉरिज़ॉन्टल वैल्यू को स्केल करें, ताकि डेटा की ज़्यादा से ज़्यादा और सबसे कम वैल्यू, चार्ट एरिया के बाईं और दाईं ओर छू सकें. इसकी वजह से, haxis.viewWindow.min और haxis.viewWindow.max को अनदेखा कर दिया जाएगा. 'अश्लील' - चार्ट एरिया की बाईं और दाईं ओर के स्केल वैल्यू को बताने के लिए यह विकल्प काम नहीं करता. (अब काम नहीं करता, क्योंकि यह haxis.viewWindow.min और haxis.viewWindow.max के हिसाब से काम का नहीं है.) इन वैल्यू से बाहर के डेटा वैल्यू को काट दिया जाएगा. आपको एक hAxis.viewWindow ऑब्जेक्ट बताना होगा. यह ऑब्जेक्ट को दिखाने के लिए, ज़्यादा से ज़्यादा और कम से कम वैल्यू की जानकारी देना होगा. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. Type: स्ट्रिंग डिफ़ॉल्ट: 'सुंदर' के बराबर होता है, लेकिन इस्तेमाल किए जाने पर haxis.viewWindow.min और haxis.viewWindow.max को प्राथमिकता दी जाती है.
hAxis.viewWindow	हॉरिज़ॉन्टल ऐक्सिस पर काटने की रेंज तय करता है. Type: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
hAxis.viewWindow.max	continuous ऐक्सिस के लिए: रेंडर करने के लिए, हॉरिज़ॉन्टल डेटा की ज़्यादा से ज़्यादा वैल्यू. discrete ऐक्सिस के लिए: शून्य पर आधारित पंक्ति का इंडेक्स, जहां क्रॉपिंग विंडो खत्म होती है. इस इंडेक्स और इससे ऊपर के डेटा पॉइंट को काट दिया जाएगा. vAxis.viewWindowMode.min के साथ में, यह आधी-अधूरी रेंज [min, max) के बारे में बताता है, जो दिखाए जाने वाले एलिमेंट इंडेक्स को दिखाता है. दूसरे शब्दों में कहें, तो min <= index < max जैसे हर इंडेक्स को दिखाया जाएगा. hAxis.viewWindowMode का साइज़ 'बड़ा' या 'बड़ा किया गया' होने पर अनदेखा किया जाता है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
hAxis.viewWindow.min	continuous ऐक्सिस के लिए: रेंडर करने के लिए, हॉरिज़ॉन्टल डेटा की कम से कम वैल्यू. discrete ऐक्सिस के लिए: शून्य पर आधारित पंक्ति का इंडेक्स, जहां से क्रॉप विंडो शुरू होती है. इससे कम इंडेक्स वाले डेटा पॉइंट काट दिए जाएंगे. vAxis.viewWindowMode.max के साथ में, यह आधी-अधूरी रेंज [min, max) के बारे में बताता है, जो दिखाए जाने वाले एलिमेंट इंडेक्स को दिखाता है. दूसरे शब्दों में, min <= index < max जैसे हर इंडेक्स को दिखाया जाएगा. hAxis.viewWindowMode का साइज़ 'बड़ा' या 'बड़ा किया गया' होने पर अनदेखा किया जाता है. टाइप: नंबर डिफ़ॉल्ट: अपने-आप
ऊंचाई	चार्ट की ऊंचाई, पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
isStacked	अगर नीति को 'सही है' पर सेट किया जाता है, तो सभी सीरीज़ के एलिमेंट को हर डोमेन वैल्यू पर स्टैक किया जाता है. ध्यान दें: कॉलम, Area, और SteppedArea चार्ट में, Google Charts, सीरीज़ के एलिमेंट के स्टैकिंग के साथ लेजेंड आइटम को बेहतर तरीके से दिखाने के लिए लेजेंड आइटम के क्रम को उलट देता है (उदाहरण के लिए, सीरीज़ 0 सबसे नीचे वाला लेजेंड आइटम होगा). यह बार चार्ट पर लागू नहीं होता. isStacked विकल्प में 100% स्टैकिंग की सुविधा भी मिलती है, जहां हर डोमेन वैल्यू पर एलिमेंट के स्टैक को फिर से स्केल किया जाता है, ताकि उन्हें 100% तक जोड़ा जा सके. isStacked के लिए विकल्प हैं: false — एलिमेंट स्टैक नहीं होंगे. यह डिफ़ॉल्ट विकल्प है. true — हर डोमेन वैल्यू पर सभी सीरीज़ के एलिमेंट को स्टैक करता है. 'percent' — सभी सीरीज़ के एलिमेंट को हर डोमेन वैल्यू पर स्टैक करता है और उन्हें इस तरह से फिर से स्केल करता है कि वे 100% तक जुड़ जाते हैं और हर एलिमेंट की वैल्यू 100% के प्रतिशत के तौर पर कैलकुलेट की जाती है. 'relative' — सभी सीरीज़ के एलिमेंट को हर डोमेन वैल्यू पर स्टैक करता है और उन्हें इस तरह से फिर से स्केल करता है कि वे 1 तक जुड़ जाते हैं और हर एलिमेंट की वैल्यू को 1 के भिन्न के रूप में गिना जाता है. 'absolute' — isStacked: true की तरह काम करता है. 100% स्टैकिंग के मामले में, हर एलिमेंट की तय की गई वैल्यू, टूलटिप में उसकी असल वैल्यू के बाद दिखेगी. टारगेट ऐक्सिस, डिफ़ॉल्ट रूप से 'relative' के लिए 0-1 स्केल के आधार पर वैल्यू को 1 के फ़्रैक्शन के तौर पर और 'percent' के लिए 0 से 100% के तौर पर चुनेगा (ध्यान दें: 'percent' विकल्प का इस्तेमाल करने पर, ऐक्सिस/टिक की वैल्यू प्रतिशत के तौर पर दिखती हैं. हालांकि, असली वैल्यू 0-1 स्केल की वैल्यू होती हैं. ऐसा इसलिए होता है, क्योंकि प्रतिशत ऐक्सिस के टिक, 0-1 की स्केल वैल्यू से मिलती-जुलती वैल्यू पर "#.##%" फ़ॉर्मैट लागू करने का नतीजा होते हैं. isStacked: 'percent' का इस्तेमाल करते समय, पक्का करें कि आपने 0-1 स्केल वैल्यू का इस्तेमाल करके टिक/ग्रिडलाइन की जानकारी दी हो. hAxis/vAxis के सही विकल्पों का इस्तेमाल करके, ग्रिडलाइन/टिक की वैल्यू और फ़ॉर्मैटिंग को पसंद के मुताबिक बनाया जा सकता है. 100% स्टैकिंग सिर्फ़ number टाइप की डेटा वैल्यू के साथ काम करती है और इसकी बेसलाइन शून्य होनी चाहिए. टाइप: बूलियन/स्ट्रिंग डिफ़ॉल्ट: गलत
लेजेंड	लेजेंड के अलग-अलग पहलुओं को कॉन्फ़िगर करने के लिए सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
legend.pageIndex	लेजेंड की चुनी गई शुरुआत में शून्य पर आधारित पेज इंडेक्स. टाइप: नंबर डिफ़ॉल्ट: 0
legend.position	लेजेंड की स्थिति. इनमें से कोई एक चीज़ हो सकती है: 'सबसे नीचे' - चार्ट के नीचे. 'बायां' - चार्ट के बाईं ओर, बशर्ते बायां ऐक्सिस उससे जुड़ी कोई सीरीज़ न हो. इसलिए, अगर आपको बाईं ओर लेजेंड चाहिए, तो targetAxisIndex: 1 विकल्प का इस्तेमाल करें. 'in' - चार्ट के अंदर, सबसे ऊपर बाएं कोने में. 'कोई भी नहीं' - कोई लेजेंड नहीं दिखाया गया. 'दाईं ओर' - चार्ट की दाईं ओर. vAxes विकल्प के साथ काम नहीं करता है. 'सबसे ऊपर' - चार्ट के ऊपर. Type: स्ट्रिंग डिफ़ॉल्ट: 'दायां'
legend.alignment	लेजेंड का अलाइनमेंट. इनमें से कोई एक चीज़ हो सकती है: 'start' - लेजेंड के लिए असाइन किए गए एरिया की शुरुआत से अलाइन है. 'सेंटर' - लेजेंड के लिए असाइन किए गए एरिया में सेंटर होता है. 'end' - लेजेंड के लिए तय किए गए हिस्से के आखिर में अलाइन होता है. शुरुआती, बीच में, और आखिरी हिस्सा, लेजेंड की स्टाइल -- वर्टिकल या हॉरिज़ॉन्टल -- के हिसाब से होते हैं. उदाहरण के लिए, 'राइट' लेजेंड में, 'start' और 'end' क्रम से सबसे ऊपर और सबसे नीचे होते हैं. 'टॉप' लेजेंड के लिए, 'start' और 'end' एरिया के बाईं और दाईं ओर होगा. डिफ़ॉल्ट वैल्यू, लेजेंड की पोज़िशन पर निर्भर करती है. 'बॉटम' लेजेंड के लिए, डिफ़ॉल्ट वैल्यू 'center' होती है. अन्य लेजेंड की वैल्यू डिफ़ॉल्ट रूप से 'start' पर सेट होती है. 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>}
स्क्रीन की दिशा	चार्ट का ओरिएंटेशन. 'vertical' पर सेट होने पर, चार्ट के ऐक्सिस को घुमाता है. इससे (उदाहरण के लिए) कॉलम चार्ट, बार चार्ट बन जाता है. साथ ही, एरिया चार्ट ऊपर के बजाय, दाईं ओर बढ़ता है: Type: स्ट्रिंग डिफ़ॉल्ट: 'हॉरिज़ॉन्टल'
reverseCategories	अगर नीति को 'सही है' पर सेट किया जाता है, तो सीरीज़ को दाईं से बाईं ओर दिखाया जाएगा. डिफ़ॉल्ट रूप से दाएँ-से-दाएं खींचना होता है. यह विकल्प सिर्फ़ discrete major ऐक्सिस के लिए काम करता है. टाइप: बूलियन डिफ़ॉल्ट: गलत
शृंखला	ऑब्जेक्ट का कलेक्शन, जिसमें हर चार्ट में उससे जुड़ी सीरीज़ के फ़ॉर्मैट की जानकारी दी गई है. किसी सीरीज़ में डिफ़ॉल्ट वैल्यू का इस्तेमाल करने के लिए, खाली ऑब्जेक्ट {} डालें. अगर कोई सीरीज़ या वैल्यू तय नहीं की गई है, तो ग्लोबल वैल्यू का इस्तेमाल किया जाएगा. हर ऑब्जेक्ट इन प्रॉपर्टी के साथ काम करता है: annotations - इस सीरीज़ के एनोटेशन पर लागू किया जाने वाला ऑब्जेक्ट है. इसका इस्तेमाल कंट्रोल करने के लिए किया जा सकता है. उदाहरण के लिए, सीरीज़ के लिए textStyle: series: { 0: { annotations: { textStyle: {fontSize: 12, color: 'red' } } } } किस तरह का कॉन्टेंट पसंद के मुताबिक बनाया जा सकता है, इसकी पूरी सूची देखने के लिए, annotations के अलग-अलग विकल्प देखें. color - इस सीरीज़ के लिए इस्तेमाल किया जाने वाला रंग. एक मान्य एचटीएमएल कलर स्ट्रिंग डालें. targetAxisIndex - इस सीरीज़ को किस ऐक्सिस पर असाइन करना है, जहां डिफ़ॉल्ट ऐक्सिस 0 है और 1 दूसरा ऐक्सिस है. डिफ़ॉल्ट वैल्यू 0 है. इसे 1 पर सेट करके, ऐसा चार्ट तय किया जा सकता है जिसमें अलग-अलग ऐक्सिस पर अलग-अलग सीरीज़ रेंडर की जाती हों. कम से कम एक सीरीज़ को डिफ़ॉल्ट ऐक्सिस के लिए तय किया गया हो. अलग-अलग ऐक्सिस के लिए, अलग-अलग स्केल तय किया जा सकता है. visibleInLegend - एक बूलियन वैल्यू. यहां सही का मतलब है कि सीरीज़ में लेजेंड एंट्री होनी चाहिए. वहीं, गलत का मतलब है कि उसमें ऐसा नहीं होना चाहिए. डिफ़ॉल्ट तौर पर, यह 'सही' पर सेट होती है. आपके पास ऑब्जेक्ट की कैटगरी तय करने का विकल्प होता है. इनमें से हर कलेक्शन, दिए गए क्रम में सीरीज़ पर लागू होता है. इसके अलावा, हर चाइल्ड के पास संख्या वाली कुंजी हो, जिससे यह पता चल सके कि वह किस सीरीज़ पर लागू होती है. उदाहरण के लिए, नीचे दिए गए दो एलान एक जैसे हैं. इनमें पहली सीरीज़ को ब्लैक के तौर पर मार्क करके यह बताया जाता है कि वह लेजेंड में नहीं है और चौथे सीरीज़ को लेजेंड में लाल और 'मौजूद नहीं' के तौर पर दिखाया गया है: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } टाइप: ऑब्जेक्ट की कैटगरी या नेस्ट किए गए ऑब्जेक्ट वाले ऑब्जेक्ट डिफ़ॉल्ट: {}
थीम	थीम, पहले से तय की गई विकल्प की वैल्यू का एक सेट होती है. ये वैल्यू, चार्ट के किसी खास व्यवहार या विज़ुअल इफ़ेक्ट को पाने के लिए एक साथ काम करती हैं. फ़िलहाल, सिर्फ़ एक थीम उपलब्ध है: 'बड़ा किया गया' - चार्ट के क्षेत्र को बड़ा करता है और लेजेंड और चार्ट के अंदर के सभी लेबल को दिखाता है. इन विकल्पों को सेट करता है: 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.ignoreBounds	अगर इसे true पर सेट किया जाता है, तो टूलटिप की ड्रॉइंग को चार्ट की सीमाओं से बाहर हर तरफ़ फ़्लो करने की अनुमति मिलती है. ध्यान दें: यह सिर्फ़ एचटीएमएल टूलटिप पर लागू होता है. अगर इसे SVG टूलटिप की मदद से चालू किया जाता है, तो चार्ट की सीमाओं के बाहर के किसी भी ओवरफ़्लो को काट दिया जाएगा. ज़्यादा जानकारी के लिए, टूलटिप के कॉन्टेंट को पसंद के मुताबिक बनाना देखें. टाइप: बूलियन डिफ़ॉल्ट: गलत
tooltip.isHtml	अगर इसे 'सही है' पर सेट किया जाता है, तो SVG के रेंडर किए गए टूलटिप के बजाय, एचटीएमएल के रेंडर किए गए टूलटिप का इस्तेमाल करें. ज़्यादा जानकारी के लिए, टूलटिप के कॉन्टेंट को पसंद के मुताबिक बनाना देखें. ध्यान दें: टूलटिप कॉलम में डेटा की भूमिका के ज़रिए एचटीएमएल टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाने की सुविधा, बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करती. टाइप: बूलियन डिफ़ॉल्ट: गलत
tooltip.showColorCode	अगर सही है, तो टूलटिप में सीरीज़ की जानकारी के बगल में रंगीन स्क्वेयर दिखाएं. अगर focusTarget को 'कैटगरी' पर सेट किया जाता है, तो डिफ़ॉल्ट तौर पर वैल्यू 'सही' होती है. अगर ऐसा नहीं होता है, तो डिफ़ॉल्ट तौर पर 'गलत' पर सेट होता है. टाइप: बूलियन डिफ़ॉल्ट: अपने-आप
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: स्ट्रिंग डिफ़ॉल्ट: 'फ़ोकस'
ट्रेंडलाइन	उन चार्ट पर ट्रेंडलाइन दिखाता है जिन पर यह सुविधा काम करती है. डिफ़ॉल्ट रूप से, लीनियर ट्रेंडलाइन का इस्तेमाल किया जाता है. हालांकि, trendlines.n.type विकल्प की मदद से इसे अपनी पसंद के मुताबिक बनाया जा सकता है. हर सीरीज़ के हिसाब से ट्रेंडलाइन तय की जाती हैं. इसलिए, ज़्यादातर मामलों में आपके विकल्प ऐसे दिखेंगे: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Type: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
trendlines.n.color	ट्रेंडलाइन का रंग, जिसे अंग्रेज़ी रंग के नाम या हेक्स स्ट्रिंग से दिखाया जाता है. Type: स्ट्रिंग डिफ़ॉल्ट: सीरीज़ का डिफ़ॉल्ट रंग
trendlines.n.degree	type: 'polynomial' की ट्रेंडलाइन के लिए, पॉलिनोमियल की डिग्री होती है. (क्वाड्रेटिक के लिए 2, क्यूबिक के लिए 3 वगैरह). ('Google चार्ट' की आने वाली रिलीज़ में डिफ़ॉल्ट डिग्री को 3 से 2 में बदला जा सकता है.) टाइप: नंबर डिफ़ॉल्ट: 3
trendlines.n.labelInLegend	अगर यह सेट की जाती है, तो ट्रेंडलाइन लेजेंड में इस स्ट्रिंग के तौर पर दिखेगी. Type: स्ट्रिंग डिफ़ॉल्ट: शून्य
trendlines.n.lineWidth	ट्रेंडलाइन की लाइन की चौड़ाई, पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: 2
trendlines.n.opacity	ट्रेंडलाइन की पारदर्शिता, 0.0 (पारदर्शी) से 1.0 (ओपेक) तक. टाइप: नंबर डिफ़ॉल्ट: 1.0
trendlines.n.pointSize	ट्रेंडलाइन को चार्ट पर कई डॉट पर स्टैंप करके बनाया जाता है; इस विकल्प की ज़रूरत बहुत कम पड़ती है. इससे आपको बिंदुओं के साइज़ को पसंद के मुताबिक बनाने में मदद मिलती है. आम तौर पर, ट्रेंडलाइन में lineWidth विकल्प को प्राथमिकता दी जाती है. हालांकि, अगर ग्लोबल pointSize विकल्प का इस्तेमाल किया जा रहा है और आपको ट्रेंडलाइन के लिए अलग पॉइंट साइज़ चाहिए, तो आपको इस विकल्प की ज़रूरत होगी. टाइप: नंबर डिफ़ॉल्ट: 1
trendlines.n.pointsVisible	ट्रेंडलाइन को चार्ट पर बिंदुओं के एक गुच्छे के रूप में बनाया जाता है. ट्रेंडलाइन के pointsVisible विकल्प से यह तय होता है कि किसी खास ट्रेंडलाइन के पॉइंट दिख रहे हैं या नहीं. टाइप: बूलियन डिफ़ॉल्ट: सही
trendlines.n.showR2	लेजेंड या ट्रेंडलाइन टूलटिप में, गुणांक का पता लगाने को दिखाने की ज़रूरत है या नहीं. टाइप: बूलियन डिफ़ॉल्ट: गलत
trendlines.n.type	क्या ट्रेंडलाइन 'linear' (डिफ़ॉल्ट), 'exponential' या 'polynomial' है. Type: स्ट्रिंग डिफ़ॉल्ट: लीनियर
trendlines.n.visibleInLegend	क्या ट्रेंडलाइन इक्वेशन, लेजेंड में दिखती है. (यह ट्रेंडलाइन टूलटिप में दिखेगा.) टाइप: बूलियन डिफ़ॉल्ट: गलत
vAxes	अगर चार्ट में एक से ज़्यादा वर्टिकल ऐक्सिस हैं, तो अलग-अलग वर्टिकल ऐक्सिस के लिए प्रॉपर्टी की जानकारी देता है. हर चाइल्ड ऑब्जेक्ट एक vAxis ऑब्जेक्ट होता है. इसमें vAxis के साथ काम करने वाली सभी प्रॉपर्टी शामिल हो सकती हैं. ये प्रॉपर्टी वैल्यू, एक ही प्रॉपर्टी की ग्लोबल सेटिंग को बदल देती हैं. एक से ज़्यादा वर्टिकल ऐक्सिस वाला चार्ट बनाने के लिए, सबसे पहले series.targetAxisIndex का इस्तेमाल करके एक नया ऐक्सिस तय करें. इसके बाद, vAxes का इस्तेमाल करके ऐक्सिस को कॉन्फ़िगर करें. इस उदाहरण में, सीरीज़ 2 को दाएं ऐक्सिस पर असाइन किया गया है और इसके लिए, पसंद के मुताबिक टाइटल और टेक्स्ट स्टाइल तय किया गया है: { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } } यह प्रॉपर्टी कोई ऑब्जेक्ट या अरे हो सकती है: ऑब्जेक्ट, ऑब्जेक्ट का कलेक्शन होता है. हर ऐक्सिस पर संख्या वाला लेबल होता है, जो ऐक्सिस के बारे में बताता है. यह ऊपर दिखाया गया फ़ॉर्मैट है. कलेक्शन, ऑब्जेक्ट का कलेक्शन है, हर ऐक्सिस पर एक. उदाहरण के लिए, नीचे दिया गया अरे स्टाइल नोटेशन, ऊपर दिखाए गए vAxis ऑब्जेक्ट से मिलता-जुलता है: vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] टाइप: ऑब्जेक्ट या चाइल्ड ऑब्जेक्ट वाले ऑब्जेक्ट की कैटगरी डिफ़ॉल्ट: शून्य
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.interval	पास-पास मौजूद ग्रिडलाइन के बीच अलग-अलग साइज़ का कलेक्शन. यह डेटा वैल्यू के तौर पर होता है, न कि पिक्सल के तौर पर. फ़िलहाल, यह विकल्प सिर्फ़ नंबर वाले ऐक्सिस के लिए है. हालांकि, यह विकल्प gridlines.units.<unit>.interval विकल्पों से मिलता-जुलता है, जिन्हें सिर्फ़ तारीखों और समय के लिए इस्तेमाल किया जाता है. लीनियर स्केल के लिए, डिफ़ॉल्ट वैल्यू [1, 2, 2.5, 5] होती है. इसका मतलब है कि ग्रिडलाइन की वैल्यू हर यूनिट (1), सम यूनिट (2) या 2.5 या 5 के मल्टीपल पर आ सकती हैं. इन वैल्यू का 10 गुना ज़्यादा होने पर भी वैल्यू को माना जाता है (उदाहरण के लिए, [10, 20, 25, 50] और [.1, .2, .25, .5]). लॉग स्केल के लिए, डिफ़ॉल्ट वैल्यू [1, 2, 5] है. टाइप: 1 से 10 के बीच की संख्या. इसमें 10 शामिल नहीं है. डिफ़ॉल्ट: कंप्यूट किया गया
vAxis.gridlines.minSpacing	hAxis प्रमुख ग्रिडलाइन के बीच, पिक्सल में कम से कम स्क्रीन स्पेस. बड़ी ग्रिडलाइन के लिए डिफ़ॉल्ट वैल्यू लीनियर स्केल के लिए 40 और लॉग स्केल के लिए 20 होती है. minSpacing की जगह count की जानकारी देने पर, minSspace की गिनती इस संख्या से की जाती है. इसके उलट, count की जगह minSpacing की जानकारी देने पर संख्या का हिसाब, minSpacing से लगाया जाता है. अगर दोनों का इस्तेमाल किया जाता है, तो minSpacing बदल जाता है. टाइप: नंबर डिफ़ॉल्ट: कंप्यूट किया गया
vAxis.gridlines.multiple	सभी ग्रिडलाइन और टिक की वैल्यू, इस विकल्प की वैल्यू के मल्टीपल में होनी चाहिए. ध्यान दें कि इंटरवल के उलट, एक से ज़्यादा 10 गुना घात को नहीं माना जाता है. gridlines.multiple = 1 तय करके, टिक को पूर्णांक बनाया जा सकता है या gridlines.multiple = 1000 तय करके, टिक को 1,000 के मल्टीपल में बदला जा सकता है. टाइप: नंबर डिफ़ॉल्ट: 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.interval	छोटा ग्रिडलाइन विकल्प, मुख्य ग्रिडलाइन इंटरवल विकल्प की तरह है.हालांकि, चुना गया इंटरवल हमेशा, मुख्य ग्रिडलाइन इंटरवल का बराबर की तरह से बराबर होना चाहिए. लीनियर स्केल का डिफ़ॉल्ट इंटरवल [1, 1.5, 2, 2.5, 5] है, और लॉग स्केल के लिए डिफ़ॉल्ट इंटरवल [1, 2, 5] है. टाइप: नंबर डिफ़ॉल्ट:1
vAxis.minorGridlines.minSpacing	पिक्सल में, आस-पास मौजूद माइनर ग्रिडलाइन के बीच, माइनर और बड़ी ग्रिडलाइन के बीच, कम से कम ज़रूरी जगह. डिफ़ॉल्ट वैल्यू, लीनियर स्केल के लिए बड़ी ग्रिडलाइन की कम से कम दूरी 1/2 है और लॉग स्केल के लिए मिनिमम स्पेसिंग की 1/5 है. टाइप: नंबर डिफ़ॉल्ट:कंप्यूट किया गया
vAxis.minorGridlines.multiple	मुख्य gridlines.multiple के बराबर. टाइप: नंबर डिफ़ॉल्ट: 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 के करीब की वैल्यू को लीनियर स्केल पर दिखाया जाता है. यह विकल्प सिर्फ़ continuous ऐक्सिस के लिए काम करता है. 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() पर कॉल करें. प्रॉपर्टी: कोई प्रॉपर्टी नहीं

डेटा नीति

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