कंट्रोल और डैशबोर्ड

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

खास जानकारी

डैशबोर्ड, एक ही तरह का डेटा शेयर करने वाले कई चार्ट को एक साथ व्यवस्थित करने और मैनेज करने का आसान तरीका है. इस पेज में बताए गए एपीआई इस्तेमाल करके, तारों को एक साथ जोड़ने के झंझट से छुटकारा पाया जा सकता है. साथ ही, डैशबोर्ड में शामिल सभी चार्ट को अपनी ज़रूरत के मुताबिक बनाया जा सकता है.

डैशबोर्ड को google.visualization.Dashboard क्लास का इस्तेमाल करके तय किया जाता है. Dashboard इंस्टेंस को DataTable मिलता है. इसमें वह डेटा होता है जो डैशबोर्ड के सभी चार्ट में डेटा को विज़ुअलाइज़ करता है और उसे ध्यान में रखता है. साथ ही, इस डेटा को सभी चार्ट में डिस्ट्रिब्यूट भी करता है.

कंट्रोल, यूज़र इंटरफ़ेस के विजेट होते हैं. जैसे, कैटगरी पिकर, रेंज स्लाइडर, ऑटोकंप्लीट

कंट्रोल, google.visualization.ControlWrapper क्लास का इस्तेमाल करके तय किए जाते हैं. किसी डैशबोर्ड में ControlWrapper इंस्टेंस जोड़े जा सकते हैं. यहां वे प्लंबिंग सिस्टम में पाइप और वाल्व की तरह काम करते हैं. वे उपयोगकर्ता का इनपुट इकट्ठा करते हैं और जानकारी का इस्तेमाल करके यह तय करते हैं कि डैशबोर्ड का कौनसा डेटा मैनेज किया जा रहा है. यह डेटा उन चार्ट में उपलब्ध कराया जाना चाहिए जो इस डैशबोर्ड का हिस्सा हैं.

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

ध्यान दें: डैशबोर्ड इंटरैक्टिव है. कंट्रोल का इस्तेमाल करें और रीयल टाइम में चार्ट में हुए बदलाव देखें.

कंट्रोल और डैशबोर्ड का इस्तेमाल करना

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

  1. अपने डैशबोर्ड के लिए एचटीएमएल स्केलेटन बनाएं. आपके पेज में किसी डैशबोर्ड के सभी सदस्य को होल्ड करने के लिए ज़रूरत के मुताबिक एचटीएमएल एलिमेंट होने चाहिए. इसमें डैशबोर्ड के साथ-साथ, इसके सभी कंट्रोल और चार्ट शामिल हैं. आम तौर पर, हर मॉडल के लिए <div> का इस्तेमाल करना होता है.
  2. अपनी लाइब्रेरी लोड करें. डैशबोर्ड के लिए, पेज पर सिर्फ़ दो लाइब्रेरी शामिल या लोड करनी होती हैं: Google AJAX API और Google विज़ुअलाइज़ेशन controls पैकेज.
  3. अपना डेटा तैयार करें. विज़ुअलाइज़ करने के लिए, आपको डेटा तैयार करना होगा. इसका मतलब है कि डेटा को कोड में खुद ही तय किया जाएगा या डेटा के लिए किसी रिमोट साइट से क्वेरी की जाएगी.
  4. डैशबोर्ड इंस्टेंस बनाना. अपने डैशबोर्ड को इसके कंस्ट्रक्टर को कॉल करके इंस्टैंशिएट करें और उस <div> एलिमेंट का रेफ़रंस पास करें जो इसे होल्ड करेगा.
  5. ज़रूरत के मुताबिक कंट्रोल और चार्ट इंस्टेंस बनाएं. हर चार्ट की जानकारी देने और डैशबोर्ड को मैनेज करने वाले कंट्रोल के लिए, google.visualization.ChartWrapper और google.visualization.ControlWrapper इंस्टेंस बनाएं.
  6. डिपेंडेंसी सेट अप करना. अपने डैशबोर्ड पर bind() को कॉल करें. इसके बाद, कंट्रोल और चार्ट के इंस्टेंस में पास करें, ताकि डैशबोर्ड को पता चल सके कि क्या मैनेज करना है. जब कोई कंट्रोल और चार्ट एक साथ बाइंड होते हैं, तब डैशबोर्ड, डेटा पर कंट्रोल की ओर से लागू की गई पाबंदियों को मैच करने के लिए, चार्ट को अपडेट करता है.
  7. अपना डैशबोर्ड बनाएं. पेज पर पूरे डैशबोर्ड को ड्रॉ करने के लिए, अपने डैशबोर्ड पर draw() को कॉल करें और अपना डेटा पास करें.
  8. ड्रॉ के बाद, अपने-आप होने वाली प्रोसेस में बदलाव. इसके अलावा, शुरुआती ड्रॉ के बाद, आप प्रोग्राम के हिसाब से उन कंट्रोल को चला सकते हैं जो डैशबोर्ड का हिस्सा हैं और डैशबोर्ड से मिलने वाले चार्ट को अपडेट किया जा सकता है.

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

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

इस कोड से बनाया गया डैशबोर्ड यहां दिया गया है.

1. अपने डैशबोर्ड के लिए एक एचटीएमएल स्केलेटन बनाएं

आपके पेज में डैशबोर्ड और उसके सभी कंट्रोल और चार्ट, दोनों को होल्ड करने के लिए ज़्यादा से ज़्यादा एचटीएमएल एलिमेंट (आम तौर पर <div>s) होने चाहिए. डैशबोर्ड, कंट्रोल, और चार्ट के इंस्टेंस को इंस्टैंशिएट करते समय, आपको उनके एलिमेंट का एक रेफ़रंस पास करना होगा. इसलिए, हर एचटीएमएल एलिमेंट के लिए एक आईडी असाइन करें. 

    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>

आपके पास हर एचटीएमएल एलिमेंट को अपने हिसाब से रखने का विकल्प होता है.

2. अपनी लाइब्रेरी लोड करें

डैशबोर्ड के लिए, पेज पर सिर्फ़ दो लाइब्रेरी शामिल या लोड करनी होती हैं: Google AJAX API और Google विज़ुअलाइज़ेशन controls पैकेज. एपीआई (खास तौर पर, google.visualization.ChartWrapper) अन्य ज़रूरी पैकेज की पहचान अपने-आप करता है (उदाहरण के लिए, अगर gauge गेज चार्ट का इस्तेमाल किया जा रहा है) और आपकी अनुमति के बिना उन्हें तुरंत लोड करता है.

कंट्रोल लाइब्रेरी को फ़ेच करने के लिए, आपको google.charts.load() का इस्तेमाल करना होगा.

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the controls package.
  // Packages for all the other charts you need will be loaded
  // automatically by the system.
  google.charts.load('current', {'packages':['corechart', 'controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...
  }
</script>

3. अपना डेटा तैयार करना

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

डैशबोर्ड, DataTable में मौजूद डेटा को चार्ट की तरह ही स्वीकार करते हैं.

4. डैशबोर्ड इंस्टेंस बनाना

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

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

डैशबोर्ड, JavaScript क्लास के तौर पर दिखाए जाते हैं. डैशबोर्ड को इंस्टैंशिएट करने के बाद, कुछ वैकल्पिक चरण पूरे किए जा सकते हैं. जैसे, इवेंट लिसनर जोड़ना (उदाहरण के लिए, डैशबोर्ड के 'तैयार' होने पर, सूचना पाना). डैशबोर्ड, इवेंट को चार्ट की तरह ही मैनेज करते हैं. इसलिए, ज़्यादा जानकारी के लिए, चार्ट सेक्शन में विज़ुअलाइज़ेशन इवेंट को मैनेज करना या गड़बड़ियों को अच्छी तरह से दिखाना लेख पढ़ें.

5. कंट्रोल और चार्ट इंस्टेंस बनाना

डैशबोर्ड का हिस्सा बनने वाले हर कंट्रोल और चार्ट के लिए, ज़रूरत के मुताबिक कई इंस्टेंस तय करें. चार्ट और कंट्रोल तय करने के लिए, google.visualization.ChartWrapper और google.visualization.ControlWrapper का इस्तेमाल करें. 

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten'
    }
  });

  // Create a pie chart, passing some options
  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'pieSliceText': 'label'
    }
  });

ChartWrapper और ControlWrapper इंस्टेंस बनाते समय, dataTable या dataSourceUrl पैरामीटर में से किसी एक की जानकारी न दें. डैशबोर्ड में हर खाते में सही डेटा दिया गया है. हालांकि, ज़रूरी पैरामीटर ज़रूर बताएं: चार्ट के लिए chartType और containerId, कंट्रोल के लिए controlType और containerId.

कंट्रोल और चार्ट कॉन्फ़िगर करने के बारे में कुछ सलाह:

  • आपको सभी कंट्रोल को एक filterColumnIndex (या filterColumnLabel) देना होगा, ताकि यह बताया जा सके कि कंट्रोल आपके google.visualization.DataTable के किस कॉलम पर काम करता है (ऊपर दिए गए उदाहरण में, डोनट के खाने लेबल वाले कॉलम पर कंट्रोल काम करता है),

  • पहली बार ड्रॉ किए जाने पर, कंट्रोल वाली सेटिंग के लिए state कॉन्फ़िगरेशन विकल्प का इस्तेमाल करें. उदाहरण के लिए, रेंज स्लाइडर कंट्रोल के अंगूठे की शुरुआती पोज़िशन तय करने के लिए, इस सेटिंग का इस्तेमाल करें. 

      var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten',
      'minValue': 1,
      'maxValue': 10
    },
    // Explicitly positions the thumbs at position 3 and 8,
    // out of the possible range of 1 to 10.
    'state': {'lowValue': 3, 'highValue': 8}
  });

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

    यहां दिए गए उदाहरण की तरह, हर ChartWrapper इंस्टेंस को कॉन्फ़िगर करते समय view विकल्प का इस्तेमाल करके बताएं कि चार्ट के लिए कौनसे कॉलम काम के हैं. 

      var data = google.visualization.arrayToDataTable([
    ['Name', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael' , 'Male', 12, 5],
    ['Elisa', 'Female', 20, 7],
    ['Robert', 'Male', 7, 3],
    ['John', 'Male', 54, 2],
    ['Jessica', 'Female', 22, 6],
    ['Aaron', 'Male', 3, 1],
    ['Margareth', 'Female', 42, 8]
  ]);

  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'title': 'Donuts eaten per person'
    },
    // The pie chart will use the columns 'Name' and 'Donuts eaten'
    // out of all the available ones.
    'view': {'columns': [0, 3]}
  });

  // The rest of dashboard configuration follows
  // ...

6. डिपेंडेंसी स्थापित करें

डैशबोर्ड के साथ-साथ इसके सभी कंट्रोल और चार्ट को इंस्टैंशिएट करने के बाद, bind() तरीके का इस्तेमाल करके डैशबोर्ड को कंट्रोल और चार्ट के बीच मौजूद डिपेंडेंसी के बारे में बताएं.

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

  // 'pieChart' will update whenever you interact with 'donutRangeSlider'
  // to match the selected range.
  dashboard.bind(donutRangeSlider, pieChart);

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

  // Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently
  // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes.
  dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot);

  // One-to-many binding where 'ageSelector' drives two charts.
  dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]);

  // bind() chaining where each control drives its own chart.
  dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);

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

  dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);

7. अपना डैशबोर्ड बनाएं

पूरे डैशबोर्ड को रेंडर करने के लिए, डैशबोर्ड इंस्टेंस पर draw() तरीके को कॉल करें. draw() वाले तरीके में सिर्फ़ एक पैरामीटर का इस्तेमाल होता है: डैशबोर्ड को चलाने के लिए, DataTable (या DataView) का इस्तेमाल किया जाता है.

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

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

ध्यान दें: डैशबोर्ड के कंपोज़िशन को बदलने या उसे फिर से ड्रॉ करने से पहले, आपको ready इवेंट सुनना चाहिए.

8. ड्रॉ के बाद प्रोग्राम के हिसाब से होने वाले बदलाव

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

अगर आपको डैशबोर्ड के स्टेटस को प्रोग्राम के हिसाब से बदलना है, तो इसके तहत आने वाले ControlWrapper और ChartWrapper इंस्टेंस पर सीधे काम करके, ऐसा किया जा सकता है. आपको किसी खास ControlWrapper (या ChartWrapper) इंस्टेंस पर सीधे तौर पर कोई भी बदलाव करना है. उदाहरण के लिए, कंट्रोल का कोई विकल्प या स्थिति बदलने के लिए, क्रम से setOption() और setState() का इस्तेमाल करें. इसके बाद, draw() तरीके को कॉल करें. इसके बाद, डैशबोर्ड अपडेट किए जाने के बाद, अनुरोध किए गए बदलावों को पूरा करने लगेगा.

नीचे दिए गए उदाहरण में, ऐसा ही एक उदाहरण दिया गया है.
पूरा वेब पेज
<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', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

        changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select range [2, 5]
              </button><br />
              <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
                Make the pie chart 3D
              </button>
            </div>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

एपीआई का संदर्भ

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

डैशबोर्ड

यह एक जैसा डेटा शेयर करने वाले, साथ मिलकर काम करने के कंट्रोल और चार्ट का कलेक्शन दिखाता है.

निर्माता

Dashboard(containerRef)
containerRef
पेज पर मौजूद किसी मान्य कंटेनर एलिमेंट का रेफ़रंस, जिसमें डैशबोर्ड के कॉन्टेंट को होल्ड किया जा सकता है.

तरीके

डैशबोर्ड में ये तरीके दिखते हैं:

तरीका रिटर्न टाइप ब्यौरा
bind(controls, charts) google.visualization.Dashboard

एक या उससे ज़्यादा कंट्रोल को डैशबोर्ड में शामिल एक या उससे ज़्यादा लोगों (या तो चार्ट या अन्य कंट्रोल) से बाइंड करता है. ऐसा करने से, जब भी कोई उपयोगकर्ता कोई ऐसा प्रोग्रामैटिक या उपयोगकर्ता इंटरैक्शन इकट्ठा करता है जिससे डैशबोर्ड से मैनेज किए जाने वाले डेटा पर असर पड़ता है, तो उसके सभी कंट्रोल फिर से बनाए जा सकते हैं. यह एक से ज़्यादा bind() कॉल को एक साथ चेन करने के लिए, डैशबोर्ड इंस्टेंस अपने-आप दिखाता है.

  • controls - कोई एक या google.visualization.ControlWrapper इंस्टेंस की कलेक्शन, जो बाइंड करने के लिए कंट्रोल की जानकारी देती है.
  • चार्ट - चार्ट की जानकारी देने वाला कोई एक या google.visualization.ChartWrapper इंस्टेंस की कलेक्शन. इस तरह चार्ट कंट्रोल से चलाए जा सकते हैं.
draw(dataTable) कोई नहीं

डैशबोर्ड बनाता है.

  • dataTable - इनमें से कोई भी एक: DataTable ऑब्जेक्ट; DataView ऑब्जेक्ट; DataTable का JSON प्रज़ेंटेशन; या google.digitalization.arrayToDataTable() के सिंटैक्स के हिसाब से बनाया गया कलेक्शन.
getSelection() ऑब्जेक्ट का कलेक्शन

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

ध्यान दें: चुने गए इवेंट के लिसनर को अब भी हर उस चार्ट के साथ अटैच करना होगा जिसमें आपको शामिल होना है.

ज़्यादा जानकारी

इवेंट

डैशबोर्ड ऑब्जेक्ट में ये इवेंट होते हैं. ध्यान दें कि किसी भी इवेंट को फेंकने से पहले, आपको Dashboard.draw() को कॉल करना होगा.

नाम ब्यौरा प्रॉपर्टी
error डैशबोर्ड को रेंडर करते समय कोई गड़बड़ी होने पर सक्रिय होता है. ऐसा हो सकता है कि डैशबोर्ड के हिस्से के तौर पर, एक या एक से ज़्यादा कंट्रोल और चार्ट रेंडर न हो पाए. आईडी, मैसेज
ready

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

ready इवेंट भी ट्रिगर होगा:

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

ControlWrapper

ControlWrapper ऑब्जेक्ट, कॉन्फ़िगर किए गए कंट्रोल इंस्टेंस के JSON के चारों ओर एक रैपर होता है. यह क्लास, डैशबोर्ड का कंट्रोल तय करने, उसे बनाने, और प्रोग्राम के हिसाब से उसकी स्थिति बदलने के लिए, सुविधाजनक तरीके उपलब्ध कराती है.

निर्माता

ControlWrapper(opt_spec)
opt_spec
[ज़रूरी नहीं] - कंट्रोल की जानकारी देने वाला JSON ऑब्जेक्ट या उस ऑब्जेक्ट का सीरियल वाला स्ट्रिंग वर्शन. JSON ऑब्जेक्ट की काम करने वाली प्रॉपर्टी नीचे दी गई टेबल में दिखाई गई हैं. अगर इसके लिए सेट नहीं किया गया है, तो आपको ControlWrapper से, दिखाए गए set... तरीकों का इस्तेमाल करके, सभी ज़रूरी प्रॉपर्टी को सेट करना होगा.
प्रॉपर्टी टाइप ज़रूरी है डिफ़ॉल्ट ब्यौरा
controlType String ज़रूरी है कुछ नहीं कंट्रोल की क्लास का नाम. Google कंट्रोल के लिए, google.visualization पैकेज के नाम को हटाया जा सकता है. उदाहरण: CategoryFilter, NumberRangeFilter.
containerId String ज़रूरी है कुछ नहीं आपके पेज पर उस DOM एलिमेंट का आईडी जो कंट्रोल को होस्ट करेगा.
विकल्प ऑब्जेक्ट ज़रूरी नहीं है कुछ नहीं कंट्रोल के विकल्पों के बारे में जानकारी देने वाला ऑब्जेक्ट. JavaScript की लिटरल नोटेशन सुविधा का इस्तेमाल किया जा सकता है या ऑब्जेक्ट को हैंडल दिया जा सकता है. उदाहरण: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state ऑब्जेक्ट ज़रूरी नहीं है कुछ नहीं कंट्रोल की स्थिति के बारे में बताने वाला ऑब्जेक्ट. राज्य, उन सभी वैरिएबल को इकट्ठा करता है जिन पर कंट्रोल का इस्तेमाल करने वाला उपयोगकर्ता असर डाल सकता है. उदाहरण के लिए, किसी रेंज स्लाइडर की स्थिति को उसके हिसाब से बताया जा सकता है. इसे स्लाइडर के कम और ज़्यादा अंगूठे से लिया जाता है. JavaScript के लिटरल नोटेशन का इस्तेमाल किया जा सकता है या ऑब्जेक्ट को हैंडल दिया जा सकता है.उदाहरण: "state": {"lowValue": 20, "highValue": 50}

तरीके

ControlWrapper, इन अतिरिक्त तरीकों को दिखाता है:

तरीका रिटर्न टाइप ब्यौरा
draw() कोई नहीं

कंट्रोल को दिखाता है. आम तौर पर, कंट्रोल को होल्ड करने वाला डैशबोर्ड, इसे बनाने का काम करता है. आपको draw() को कॉल करना चाहिए, ताकि कंट्रोल में प्रोग्राम के हिसाब से बदलाव किए जा सकें. ऐसा करने के लिए, आपको इसकी सेटिंग में कोई भी बदलाव करने के बाद, जैसे कि विकल्प या स्थिति में बदलाव करना चाहिए.

toJSON() String यह फ़ंक्शन कंट्रोल के JSON फ़ॉर्मैट का स्ट्रिंग वर्शन दिखाता है.
clone() ControlWrapper कंट्रोल रैपर की डीप कॉपी दिखाता है.
getControlType() String कंट्रोल की क्लास का नाम. अगर यह Google का कंट्रोल है, तो google.visualization के साथ इस नाम को स्वीकार नहीं किया जाएगा. उदाहरण के लिए, अगर यह कैटगरीफ़िल्टर कंट्रोल होता, तो यह "google.Visualization.CategoryFilter" के बजाय "CategoryFilter" दिखाएगा.
getControlName() String यह फ़ंक्शन setControlName() से असाइन किए गए कंट्रोल का नाम दिखाता है.
getControl() कंट्रोल ऑब्जेक्ट का रेफ़रंस इस ControlWrapper के ज़रिए बनाए गए कंट्रोल का रेफ़रंस देता है. ऐसा तब तक शून्य दिखेगा, जब तक आप ControlWrapper ऑब्जेक्ट पर (या इसे दबाकर रखे गए डैशबोर्ड पर) draw() को कॉल नहीं कर देते. साथ ही, यह किसी तैयार इवेंट को नहीं दिखाता. लौटाया गया ऑब्जेक्ट सिर्फ़ एक तरीका दिखाता है: resetControl(), जो कंट्रोल की स्थिति को उस पर रीसेट कर देता है जिससे उसे शुरू किया गया था (जैसे कि किसी एचटीएमएल फ़ॉर्म एलिमेंट को रीसेट करना).
getContainerId() String कंट्रोल के DOM कंटेनर एलिमेंट का आईडी.
getOption(key, opt_default_val) किसी भी तरह का कॉन्टेंट

तय किए गए कंट्रोल के विकल्प की वैल्यू दिखाता है

  • key - वापस पाने के विकल्प का नाम. यह एक संभावित नाम हो सकता है, जैसे कि 'vAxis.title'.
  • opt_default_value [वैकल्पिक] - अगर तय की गई वैल्यू तय नहीं है या शून्य है, तो यह वैल्यू दिखाई जाएगी.
getOptions() ऑब्जेक्ट इस कंट्रोल के लिए विकल्प ऑब्जेक्ट दिखाता है.
getState() ऑब्जेक्ट यह फ़ंक्शन कंट्रोल की स्थिति दिखाता है.
setControlType(type) कोई नहीं कंट्रोल टाइप सेट करता है. इंस्टैंशिएट करने के लिए, कंट्रोल की क्लास का नाम पास करें. अगर यह Google का कंट्रोल है, तो इसके लिए google.visualization से शर्तें न पूरी करें. उदाहरण के लिए, संख्या वाले कॉलम पर रेंज स्लाइडर के लिए, "NumberRangeFilter" पास करें.
setControlName(name) कोई नहीं कंट्रोल के लिए आर्बिट्रेरी नाम सेट करता है. इसे कंट्रोल पर कहीं भी नहीं दिखाया जाता, लेकिन यह सिर्फ़ आपकी जानकारी के लिए है.
setContainerId(id) कोई नहीं कंट्रोल के लिए, शामिल DOM एलिमेंट का आईडी सेट करता है.
setOption(key, value) कोई नहीं कंट्रोल के एक विकल्प की वैल्यू सेट करता है. इसमें key, विकल्प का नाम और value वैल्यू है. किसी विकल्प को अनसेट करने के लिए, वैल्यू के लिए शून्य को पास करें. ध्यान दें कि key एक शर्तें पूरी करने वाला नाम हो सकता है, जैसे कि 'vAxis.title'.
setOptions(options_obj) कोई नहीं कंट्रोल के लिए, पूरा विकल्प ऑब्जेक्ट सेट करता है.
setState(state_obj) कोई नहीं कंट्रोल की स्थिति सेट करता है. राज्य, उन सभी वैरिएबल को इकट्ठा करता है जिन पर उपयोगकर्ता का कंट्रोल, असर डाल सकता है. उदाहरण के लिए, रेंज स्लाइडर की स्थिति को स्लाइडर के कम और ज़्यादा अंगूठे से ली गई पोज़िशन के हिसाब से बताया जा सकता है.

इवेंट

ControlWrapper ऑब्जेक्ट इन इवेंट को फेंकता है. ध्यान दें कि किसी भी इवेंट को फेंकने से पहले आपको ControlWrapper.draw() को कॉल करना होगा (या कंट्रोल को दबाकर रखने वाले डैशबोर्ड की ओर खींचना होगा).

नाम ब्यौरा प्रॉपर्टी
error कंट्रोल को रेंडर करते समय कोई गड़बड़ी होने पर ट्रिगर होता है. आईडी, मैसेज
ready कंट्रोल, उपयोगकर्ता के इंटरैक्शन और बाहरी तरीके से किए जाने वाले कॉल के लिए तैयार है. अगर आपको ड्रॉ करने के बाद कंट्रोल और कॉल के तरीकों के साथ इंटरैक्ट करना है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट ट्रिगर होने के बाद ही उन्हें कॉल करना चाहिए. इसके अलावा, इवेंट के सक्रिय होने के बाद ही कंट्रोल और कॉल कंट्रोल करने के तरीकों को दबाकर रखने वाले डैशबोर्ड पर, ready इवेंट को सुना जा सकता है. कोई नहीं
statechange तब सक्रिय होता है, जब उपयोगकर्ता कंट्रोल से इंटरैक्ट करता है और कंट्रोल की स्थिति पर असर डालता है. उदाहरण के लिए, किसी रेंज स्लाइडर कंट्रोल के अंगूठे को हिलाने पर भी statechange इवेंट ट्रिगर हो जाएगा. इवेंट ट्रिगर होने के बाद, कंट्रोल की अपडेट की गई स्थिति वापस पाने के लिए, ControlWrapper.getState() पर कॉल करें. कोई नहीं

ChartWrapper

विज़ुअलाइज़ेशन के एपीआई के रेफ़रंस सेक्शन में, google.visualization.ChartWrapper दस्तावेज़ देखें.

डैशबोर्ड के हिस्से के तौर पर ChartWrapper का इस्तेमाल करने पर, ये नोट लागू होते हैं:

  • dataTable, query, dataSourceUrl, और refreshInterval एट्रिब्यूट को अलग से सेट न करें. जिस डैशबोर्ड में चार्ट होता है, उसे उसकी ज़रूरत का डेटा फ़ीड किया जाता है.
  • इसके view एट्रिब्यूट को यह बताने के लिए सेट करें कि डैशबोर्ड को दिए गए dataTable में मौजूद कॉलम में से कौनसे कॉलम, चार्ट के लिए काम के हैं, जैसा कि कंट्रोल और चार्ट इंस्टेंस बनाएं में दिखाया गया है.

फ़िल्टर ग्राफ़िकल एलिमेंट होते हैं. इनका इस्तेमाल करके, लोग इंटरैक्टिव तरीके से यह चुन सकते हैं कि आपके चार्ट पर कौनसा डेटा दिखाना है. इस सेक्शन में Google चार्ट के फ़िल्टर के बारे में बताया गया है: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter, और StringFilter.

इनमें से किसी भी तरीके का इस्तेमाल, ControlWrapper.setControlType() के पैरामीटर के तौर पर किया जा सकता है.

ध्यान दें: विकल्पों के बारे में जानकारी देते समय, डॉट नोटेशन का इस्तेमाल नेस्ट किए गए ऑब्जेक्ट एट्रिब्यूट के बारे में जानकारी देने के लिए किया जाता है. उदाहरण के लिए, विकल्प ऑब्जेक्ट में 'ui.label' नाम के विकल्प का एलान var options = {"ui": {"label": "someLabelValue"} }; के तौर पर करना चाहिए

CategoryFilter

तय की गई वैल्यू के सेट में से एक या उससे ज़्यादा वैल्यू चुनने का पिकर.

स्थिति

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

विकल्प

नाम टाइप डिफ़ॉल्ट ब्यौरा
filterColumnIndex नंबर कुछ नहीं डेटा टेबल का वह कॉलम, जिस पर फ़िल्टर काम करना चाहिए. इस विकल्प या filterColumnLabel को देना ज़रूरी है. अगर दोनों ही मौजूद हों, तो इस विकल्प को प्राथमिकता दी जाती है.
filterColumnLabel स्ट्रिंग कुछ नहीं उस कॉलम का लेबल, जिस पर फ़िल्टर काम करना चाहिए. इस विकल्प या filterColumnIndex को देना ज़रूरी है. अगर दोनों मौजूद होते हैं, तो filterColumnIndex को प्राथमिकता दी जाती है.
मान Array अपने-आप चुनने के लिए वैल्यू की सूची. अगर ऑब्जेक्ट के कलेक्शन का इस्तेमाल किया जाता है, तो उन्हें उपयोगकर्ता को दिखाने के लिए सही toString() होना चाहिए. अगर शून्य या तय नहीं है, तो वैल्यू की सूची, DataTable कॉलम में मौजूद वैल्यू से अपने-आप तैयार हो जाएगी जिस पर यह कंट्रोल काम करता है.
useFormattedValue boolean false Dataटेबल कॉलम से चुनी जा सकने वाली वैल्यू की सूची को अपने-आप भरते समय, यह फ़िल्टर इन पर काम करता है. भले ही, सेल की असली वैल्यू का इस्तेमाल करना हो या उनकी फ़ॉर्मैट की गई वैल्यू का.
ui ऑब्जेक्ट शून्य कंट्रोल के यूज़र इंटरफ़ेस (यूआई) की अलग-अलग चीज़ों को कॉन्फ़िगर करने के लिए, सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: 
{label: 'Metric', labelSeparator: ':'}
ui.caption स्ट्रिंग 'एक मान चुनें...' कोई आइटम नहीं चुने जाने पर, वैल्यू पिकर विजेट में दिखाया जाने वाला कैप्शन.
ui.sortValues boolean सही चुनी जाने वाली वैल्यू, क्रम से लगाई जानी चाहिए या नहीं.
ui.selectedValuesLayout स्ट्रिंग 'एक ओर' एक से ज़्यादा वैल्यू चुनने की अनुमति होने पर, चुनी गई वैल्यू कैसे दिखाएं. आपको ये वैल्यू दिख सकती हैं:
  • 'aside': चुनी गई वैल्यू, वैल्यू पिकर विजेट के बगल में एक टेक्स्ट लाइन में दिखेंगी.
  • 'below': चुनी गई वैल्यू, विजेट के नीचे एक टेक्स्ट लाइन में दिखेंगी.
  • 'belowWrapping': below की तरह है, लेकिन पिकर में फ़िट न हो सकने वाली एंट्री एक नई लाइन में रैप हो जाएंगी,
  • 'belowStacked': चुनी गई वैल्यू, विजेट के नीचे मौजूद कॉलम में दिखेंगी.
ui.allowNone boolean सही उपयोगकर्ता को कोई वैल्यू चुनने की अनुमति है या नहीं. अगर false है, तो उपयोगकर्ता को उपलब्ध वैल्यू में से कम से कम एक वैल्यू चुननी होगी. कंट्रोल शुरू करने के दौरान, अगर false पर सेट किया गया हो और कोई selectedValues स्थिति न दी गई हो, तो उपलब्ध विकल्पों में से पहली वैल्यू अपने-आप चुन ली जाती है.
ui.allowMultiple boolean सही क्या सिर्फ़ एक वैल्यू चुनने के बजाय, एक से ज़्यादा वैल्यू चुनी जा सकती हैं.
ui.allowTyping boolean सही क्या उपयोगकर्ता को संभावित विकल्पों की सूची को छोटा करने के लिए (ऑटोकंप्लीट सुविधा के ज़रिए) टेक्स्ट फ़ील्ड में टाइप करने की अनुमति है या नहीं.
ui.label स्ट्रिंग अपने-आप कैटगरी पिकर के बगल में दिखाया जाने वाला लेबल. अगर इस बारे में जानकारी नहीं दी गई है, तो कंट्रोल से चलाए जाने वाले कॉलम के लेबल का इस्तेमाल किया जाएगा.
ui.labelSeparator स्ट्रिंग कुछ नहीं लेबल को कैटगरी पिकर से विज़ुअल तौर पर अलग करने के लिए, एक सेपरेटर स्ट्रिंग को लेबल में जोड़ा जाता है.
ui.labelStacking स्ट्रिंग 'हॉरिज़ॉन्टल' क्या लेबल, कैटगरी पिकर के ऊपर (वर्टिकल स्टैकिंग) या बगल में (हॉरिज़ॉन्टल स्टैकिंग) दिखना चाहिए. 'vertical' या 'horizontal' का इस्तेमाल करें.
ui.cssClass स्ट्रिंग 'google-visualization-controls-categoryfilter' पसंद के मुताबिक स्टाइल बनाने के लिए, कंट्रोल को असाइन की जाने वाली सीएसएस क्लास.

ChartRangeFilter

चार्ट पर दो अंगूठों को सुपरइंपोज़ करके दिखाने वाला स्लाइडर, जिससे चार्ट के निरंतर ऐक्सिस से वैल्यू की रेंज चुनी जा सकती है.

स्थिति

नाम टाइप डिफ़ॉल्ट ब्यौरा
range.start संख्या, तारीख, तारीख या दिन का समय रेंज की शुरुआती वैल्यू चुनी गई रेंज का शुरुआती हिस्सा, जिसमें तारीख भी शामिल है.
range.end संख्या, तारीख, तारीख या दिन का समय रेंज की आखिरी वैल्यू चुनी गई रेंज खत्म होने की तारीख (शामिल).

विकल्प

नाम टाइप डिफ़ॉल्ट ब्यौरा
filterColumnIndex नंबर कुछ नहीं डेटा टेबल में उस कॉलम का इंडेक्स जिस पर फ़िल्टर काम करता है. इस विकल्प या filterColumnLabel को देना ज़रूरी है. अगर दोनों विकल्प मौजूद हैं, तो इस विकल्प को प्राथमिकता दी जाती है.

ध्यान दें कि सिर्फ़ उस डोमेन कॉलम का इंडेक्स तय करना सही है जो कंट्रोल में बनाए गए चार्ट की लगातार ऐक्सिस में मौजूद होता है.

filterColumnLabel स्ट्रिंग कुछ नहीं उस डेटा टेबल के कॉलम का लेबल जिस पर फ़िल्टर काम करता है. इस विकल्प या filterColumnIndex को देना ज़रूरी है. अगर दोनों मौजूद हैं, तो filterColumnIndex को प्राथमिकता दी जाती है.

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

ui ऑब्जेक्ट शून्य कंट्रोल के यूज़र इंटरफ़ेस (यूआई) की अलग-अलग चीज़ों को कॉन्फ़िगर करने के लिए, सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: 
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType स्ट्रिंग 'कॉम्बोचार्ट' कंट्रोल में बनाए गए चार्ट का टाइप.
यह इनमें से एक हो सकता है: 'AreaChart', 'LineChart', 'ComboChart' या 'ScatterChart.
ui.chartOptions ऑब्जेक्ट 
{
 'enableInteractivity': false,
 'chartArea': {'height': '100%'},
 'legend': {'position': 'none'},
 'hAxis': {'textPosition': 'in'},
 'vAxis': {
  'textPosition': 'none',
  'gridlines': {'color': 'none'}
 }
}
कंट्रोल में बनाए गए चार्ट के कॉन्फ़िगरेशन के विकल्प. इससे, डैशबोर्ड में किसी भी चार्ट के कॉन्फ़िगरेशन को एक ही लेवल पर ले जाया जाता है. साथ ही, यह उसी फ़ॉर्मैट का पालन करता है जिसे ChartWrapper.setOptions() ने स्वीकार किया है.

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

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

कृपया ध्यान दें कि बनाए गए चार्ट का हॉरिज़ॉन्टल ऐक्सिस लगातार होना चाहिए. इसलिए, ध्यान से उसी के मुताबिक ui.chartView डालें.

ui.minRangeSize नंबर डेटा मान के अंतर को 1 पिक्सेल के रूप में समझा जाता है डेटा वैल्यू यूनिट में तय की गई, चुनी जा सकने वाली कम से कम रेंज का साइज़ (range.end - range.start). अंकों वाले ऐक्सिस के लिए, यह एक संख्या होती है (ज़रूरी नहीं है कि कोई पूर्णांक हो). किसी तारीख, तारीख और समय के ऐक्सिस से, यह एक पूर्णांक होता है. इससे मिलीसेकंड में अंतर पता चलता है.
ui.snapToData boolean false अगर सही हो, तो रेंज थंब को सबसे पास के डेटा पॉइंट पर स्नैप कर दिया जाता है. इस मामले में, यह ज़रूरी है कि getState() से मिलने वाली रेंज के एंड पॉइंट, डेटा टेबल में मौजूद वैल्यू हों.

इवेंट

ControlWrapper इवेंट में नए हिस्से जोड़े गए:

नाम ब्यौरा प्रॉपर्टी
statechange जैसा कि हर ControlWrapper के लिए दस्तावेज़ में बताया गया है, इसमें सिर्फ़ एक अतिरिक्त बूलियन प्रॉपर्टी, inProgress होती है, जो बताती है कि राज्य में अभी बदलाव किया जा रहा है या नहीं (अंगूठे में से किसी एक या रेंज को ड्रैग किया जा रहा है). inProgress

DateRangeFilter

तारीख की सीमाओं को चुनने के लिए, दो वैल्यू वाला स्लाइडर.

नीचे दी गई टेबल में कौनसी लाइनें दिखें, यह तय करने के लिए स्लाइडर को आगे-पीछे करें.

स्थिति

नाम टाइप डिफ़ॉल्ट ब्यौरा
lowValue नंबर कुछ नहीं चुनी गई रेंज की निचली सीमा, जिसमें शामिल है.
highValue नंबर कुछ नहीं चुनी गई रेंज की ऊपरी सीमा शामिल है.
lowThumbAtMinimum boolean कुछ नहीं स्लाइडर के निचले अंगूठे को तय की गई कम से कम सीमा में लॉक किया गया है या नहीं. अगर यह नीति सेट है, तो lowValue को बदल देता है.
highThumbAtMaximum boolean कुछ नहीं स्लाइडर का ऊपरी हिस्सा, तय की गई सीमा में लॉक है या नहीं. अगर यह नीति सेट है, तो highValue को बदल देता है.

विकल्प

नाम टाइप डिफ़ॉल्ट ब्यौरा
filterColumnIndex नंबर कुछ नहीं डेटा टेबल का वह कॉलम, जिस पर फ़िल्टर काम करना चाहिए. इस विकल्प या filterColumnLabel को देना ज़रूरी है. अगर दोनों ही मौजूद हों, तो इस विकल्प को प्राथमिकता दी जाती है. number टाइप वाले कॉलम पर ले जाना चाहिए.
filterColumnLabel स्ट्रिंग कुछ नहीं उस कॉलम का लेबल, जिस पर फ़िल्टर काम करना चाहिए. इस विकल्प या filterColumnIndex को देना ज़रूरी है. अगर दोनों मौजूद होते हैं, तो filterColumnIndex को प्राथमिकता दी जाती है. number टाइप वाले कॉलम पर ले जाना चाहिए.
minValue तारीख अपने-आप चुनी गई रेंज के लिए कम से कम वैल्यू. अगर यह वैल्यू तय नहीं है, तो कंट्रोल से मैनेज किए जाने वाले DataTable के कॉन्टेंट से वैल्यू का अनुमान लगाया जाएगा.
maxValue तारीख अपने-आप चुनी गई रेंज के लिए, तय की गई ज़्यादा से ज़्यादा वैल्यू. अगर यह वैल्यू तय नहीं है, तो कंट्रोल से मैनेज किए जाने वाले DataTable के कॉन्टेंट से वैल्यू का अनुमान लगाया जाएगा.
ui ऑब्जेक्ट शून्य कंट्रोल के यूज़र इंटरफ़ेस (यूआई) की अलग-अलग चीज़ों को कॉन्फ़िगर करने के लिए, सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: 
{label: 'Age', labelSeparator: ':'}
ui.format ऑब्जेक्ट कुछ नहीं तारीख को स्ट्रिंग के तौर पर दिखाने का तरीका. तारीख के सभी मान्य फ़ॉर्मैट स्वीकार किए जाते हैं.
ui.step स्ट्रिंग दिन स्लाइडर थंब्स को खींचते समय कम से कम संभावित बदलाव: "दिन" तक किसी भी समय इकाई को बदला जा सकता है. ("महीना" और "साल" अभी तक काम नहीं करता है.)
ui.ticks नंबर अपने-आप टिक की संख्या (रेंज बार में तय जगह), जिसे स्लाइडर अंगूठे जगह में ले सकते हैं.
ui.unitIncrement स्ट्रिंग '1' रेंज की सीमाओं में इकाई में होने वाली बढ़ोतरी के लिए, बढ़ाई जाने वाली रकम. यूनिट में बढ़ोतरी का मतलब, स्लाइडर के अंगूठे को एक जगह से दूसरी जगह ले जाने के लिए, ऐरो बटन का इस्तेमाल करने के बराबर है.
ui.blockIncrement नंबर 10 रेंज की सीमाओं में ब्लॉक में होने वाली बढ़ोतरी के लिए बढ़ाई जाने वाली रकम. ब्लॉक को बढ़ाना, स्लाइडर थंब्स को एक जगह से दूसरी जगह ले जाने के लिए, pgUp और pgDown कुंजियों का इस्तेमाल करने के बराबर है.
ui.showRangeValues boolean सही क्या चुनी गई रेंज की सीमाओं को दिखाने वाले स्लाइडर के बगल में लेबल होने चाहिए.
ui.orientation स्ट्रिंग 'हॉरिज़ॉन्टल' स्लाइडर का ओरिएंटेशन. 'horizontal' या 'vertical'.
ui.label स्ट्रिंग अपने-आप स्लाइडर के बगल में दिखने वाला लेबल. अगर इस नीति की जानकारी नहीं दी गई है, तो उस कॉलम के लेबल का इस्तेमाल किया जाएगा जिस पर कंट्रोल काम करता है.
ui.labelSeparator स्ट्रिंग कुछ नहीं लेबल को स्लाइडर से विज़ुअल तौर पर अलग करने के लिए, एक सेपरेटर स्ट्रिंग को लेबल में जोड़ दिया जाता है.
ui.labelStacking स्ट्रिंग 'हॉरिज़ॉन्टल' क्या लेबल, स्लाइडर के ऊपर (वर्टिकल स्टैकिंग) या बगल में (हॉरिज़ॉन्टल स्टैकिंग) दिखना चाहिए. 'vertical' या 'horizontal' का इस्तेमाल करें.
ui.cssClass स्ट्रिंग 'google-visualization-controls-rangefilter' पसंद के मुताबिक स्टाइल बनाने के लिए, कंट्रोल को असाइन की जाने वाली सीएसएस क्लास.

NumberRangeFilter

संख्या वाली वैल्यू की रेंज चुनने के लिए, दो वैल्यू वाला स्लाइडर.

स्थिति

नाम टाइप डिफ़ॉल्ट ब्यौरा
lowValue नंबर कुछ नहीं चुनी गई रेंज की निचली सीमा, जिसमें शामिल है.
highValue नंबर कुछ नहीं चुनी गई रेंज की ऊपरी सीमा शामिल है.
lowThumbAtMinimum boolean कुछ नहीं स्लाइडर के निचले अंगूठे को तय की गई कम से कम सीमा में लॉक किया गया है या नहीं. अगर यह नीति सेट है, तो lowValue को बदल देता है.
highThumbAtMaximum boolean कुछ नहीं स्लाइडर का ऊपरी हिस्सा, तय की गई सीमा में लॉक है या नहीं. अगर यह नीति सेट है, तो highValue को बदल देता है.

विकल्प

नाम टाइप डिफ़ॉल्ट ब्यौरा
filterColumnIndex नंबर कुछ नहीं डेटा टेबल का वह कॉलम, जिस पर फ़िल्टर काम करना चाहिए. इस विकल्प या filterColumnLabel को देना ज़रूरी है. अगर दोनों ही मौजूद हों, तो इस विकल्प को प्राथमिकता दी जाती है. number टाइप वाले कॉलम पर ले जाना चाहिए.
filterColumnLabel स्ट्रिंग कुछ नहीं उस कॉलम का लेबल, जिस पर फ़िल्टर काम करना चाहिए. इस विकल्प या filterColumnIndex को देना ज़रूरी है. अगर दोनों मौजूद होते हैं, तो filterColumnIndex को प्राथमिकता दी जाती है. number टाइप वाले कॉलम पर ले जाना चाहिए.
minValue नंबर अपने-आप चुनी गई रेंज के लिए कम से कम वैल्यू. अगर यह वैल्यू तय नहीं है, तो कंट्रोल से मैनेज किए जाने वाले DataTable के कॉन्टेंट से वैल्यू का अनुमान लगाया जाएगा.
maxValue नंबर अपने-आप चुनी गई रेंज के लिए, तय की गई ज़्यादा से ज़्यादा वैल्यू. अगर यह वैल्यू तय नहीं है, तो कंट्रोल से मैनेज किए जाने वाले DataTable के कॉन्टेंट से वैल्यू का अनुमान लगाया जाएगा.
ui ऑब्जेक्ट शून्य कंट्रोल के यूज़र इंटरफ़ेस (यूआई) की अलग-अलग चीज़ों को कॉन्फ़िगर करने के लिए, सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: 
{label: 'Age', labelSeparator: ':'}
ui.format ऑब्जेक्ट कुछ नहीं संख्या को स्ट्रिंग के रूप में दिखाने का तरीका. सभी मान्य नंबर फ़ॉर्मैट स्वीकार किए जाते हैं.
ui.step नंबर 1 या अगर परिभाषित है, तो ticks से कैलकुलेट किया गया स्लाइडर अंगूठे को खींचते समय कम से कम संभावित बदलाव.
ui.ticks नंबर अपने-आप टिक की संख्या (रेंज बार में तय जगह), जिसे स्लाइडर अंगूठे जगह में ले सकते हैं.
ui.unitIncrement नंबर 1 रेंज की सीमाओं में इकाई में होने वाली बढ़ोतरी के लिए, बढ़ाई जाने वाली रकम. यूनिट में बढ़ोतरी का मतलब, स्लाइडर के अंगूठे को एक जगह से दूसरी जगह ले जाने के लिए, ऐरो बटन का इस्तेमाल करने के बराबर है.
ui.blockIncrement नंबर 10 रेंज की सीमाओं में ब्लॉक में होने वाली बढ़ोतरी के लिए बढ़ाई जाने वाली रकम. ब्लॉक को बढ़ाना, स्लाइडर थंब्स को एक जगह से दूसरी जगह ले जाने के लिए, pgUp और pgDown कुंजियों का इस्तेमाल करने के बराबर है.
ui.showRangeValues boolean सही क्या चुनी गई रेंज की सीमाओं को दिखाने वाले स्लाइडर के बगल में लेबल होने चाहिए.
ui.orientation स्ट्रिंग 'हॉरिज़ॉन्टल' स्लाइडर का ओरिएंटेशन. 'horizontal' या 'vertical'.
ui.label स्ट्रिंग अपने-आप स्लाइडर के बगल में दिखने वाला लेबल. अगर इस नीति की जानकारी नहीं दी गई है, तो उस कॉलम के लेबल का इस्तेमाल किया जाएगा जिस पर कंट्रोल काम करता है.
ui.labelSeparator स्ट्रिंग कुछ नहीं लेबल को स्लाइडर से विज़ुअल तौर पर अलग करने के लिए, एक सेपरेटर स्ट्रिंग को लेबल में जोड़ दिया जाता है.
ui.labelStacking स्ट्रिंग 'हॉरिज़ॉन्टल' क्या लेबल, स्लाइडर के ऊपर (वर्टिकल स्टैकिंग) या बगल में (हॉरिज़ॉन्टल स्टैकिंग) दिखना चाहिए. 'vertical' या 'horizontal' का इस्तेमाल करें.
ui.cssClass स्ट्रिंग 'google-visualization-controls-rangefilter' पसंद के मुताबिक स्टाइल बनाने के लिए, कंट्रोल को असाइन की जाने वाली सीएसएस क्लास.

StringFilter

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

स्थिति

नाम टाइप डिफ़ॉल्ट ब्यौरा
value स्ट्रिंग या ऑब्जेक्ट कुछ नहीं कंट्रोल इनपुट फ़ील्ड में फ़िलहाल डाला गया टेक्स्ट.

विकल्प

नाम टाइप डिफ़ॉल्ट ब्यौरा
filterColumnIndex नंबर कुछ नहीं डेटा टेबल का वह कॉलम, जिस पर फ़िल्टर काम करना चाहिए. इस विकल्प या filterColumnLabel को देना ज़रूरी है. अगर दोनों ही मौजूद हों, तो इस विकल्प को प्राथमिकता दी जाती है.
filterColumnLabel स्ट्रिंग कुछ नहीं उस कॉलम का लेबल, जिस पर फ़िल्टर काम करना चाहिए. इस विकल्प या filterColumnIndex को देना ज़रूरी है. अगर दोनों मौजूद होते हैं, तो filterColumnIndex को प्राथमिकता दी जाती है.
matchType स्ट्रिंग 'प्रीफ़िक्स' कंट्रोल, सिर्फ़ एग्ज़ैक्ट वैल्यू ('exact') से मैच होना चाहिए या नहीं, वैल्यू की शुरुआत से शुरू होने वाले प्रीफ़िक्स ('prefix') या कोई सबस्ट्रिंग ('any').
caseSensitive boolean false मैच केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) होना चाहिए या नहीं.
useFormattedValue boolean false कंट्रोल को सेल फ़ॉर्मैट की गई वैल्यू से मैच करना चाहिए या सही वैल्यू को फिर से मैच करना चाहिए.
ui ऑब्जेक्ट शून्य कंट्रोल के यूज़र इंटरफ़ेस (यूआई) की अलग-अलग चीज़ों को कॉन्फ़िगर करने के लिए, सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: 
{label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger boolean सही क्या कंट्रोल का मिलान, किसी बटन को दबाने पर होना चाहिए या सिर्फ़ इनपुट फ़ील्ड के 'बदलने' (फ़ोकस का कम होना या Enter बटन दबाने पर) होना चाहिए.
ui.label स्ट्रिंग अपने-आप इनपुट फ़ील्ड के बगल में दिखने वाला लेबल. अगर इस बारे में जानकारी नहीं दी गई है, तो कंट्रोल से चलाए जाने वाले कॉलम के लेबल का इस्तेमाल किया जाएगा.
ui.labelSeparator स्ट्रिंग कुछ नहीं लेबल को इनपुट फ़ील्ड से विज़ुअल तौर पर अलग करने के लिए, एक सेपरेटर स्ट्रिंग को लेबल में जोड़ा जाता है.
ui.labelStacking स्ट्रिंग 'हॉरिज़ॉन्टल' लेबल, इनपुट फ़ील्ड के ऊपर (वर्टिकल स्टैकिंग) या बगल में (हॉरिज़ॉन्टल स्टैकिंग) दिखना चाहिए या नहीं. 'vertical' या 'horizontal' का इस्तेमाल करें.
ui.cssClass स्ट्रिंग 'google-visualization-controls-stringfilter' पसंद के मुताबिक स्टाइल बनाने के लिए, कंट्रोल को असाइन की जाने वाली सीएसएस क्लास.