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

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

खास जानकारी

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

डैशबोर्ड, google.visualization.Dashboard क्लास का इस्तेमाल करके तय किए जाते हैं. Dashboard इंस्टेंस को DataTable मिलता है, जिसमें डेटा को ड्रॉइंग के साथ-साथ डैशबोर्ड के हिस्से वाले सभी चार्ट में बांटने और मैनेज करने का डेटा होता है.

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

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

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

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

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

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

  1. अपने डैशबोर्ड के लिए, एचटीएमएल कंकाल बनाएं. आपके पेज पर ज़रूरत के मुताबिक एचटीएमएल एलिमेंट होने चाहिए, ताकि डैशबोर्ड के हर सदस्य को शामिल किया जा सके. इसमें डैशबोर्ड और इसके सभी कंट्रोल और चार्ट शामिल हैं. आम तौर पर, आपको हर सर्च के लिए <div> का इस्तेमाल करना होगा.
  2. अपनी लाइब्रेरी लोड करें. डैशबोर्ड के लिए पेज पर सिर्फ़ दो लाइब्रेरी शामिल करना या लोड करना ज़रूरी है: Google AJAX एपीआई और 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 एपीआई और 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. डैशबोर्ड इंस्टेंस बनाना

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

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

    यहां दिए गए उदाहरण की तरह, हर 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) जो डैशबोर्ड को पावर देता है.

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

डैशबोर्ड इंस्टेंस, ready इवेंट को तब सक्रिय करता है, जब draw() इसमें शामिल सभी कंट्रोल और चार्ट को ड्रॉइंग से हटा देता है. अगर मैनेज किया गया कोई भी कंट्रोल या चार्ट ड्रॉ नहीं हो पाता है, तो 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.विज़ुअलाइज़ेशन.डैशबोर्ड

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

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

डैशबोर्ड ड्रॉ करता है.

getSelection() ऑब्जेक्ट का कलेक्शन

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

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

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

इवेंट

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

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

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

ready इवेंट भी चालू होगा:

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

कंट्रोल रैपर

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

निर्माता

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

तरीके

ControlWrapper निम्न अतिरिक्त विधियाँ दिखाता है:

तरीका रिटर्न टाइप जानकारी
draw() कभी नहीं

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

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

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

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

इवेंट

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

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

चार्ट रैपर

विज़ुअलाइज़ेशन के एपीआई के रेफ़रंस सेक्शन में मौजूद, 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"} }; में बताया जाना चाहिए

कैटगरीफ़िल्टर

तय किए गए मानों के सेट के बीच में से एक या एक से ज़्यादा को चुनने के लिए पिकर.

स्थिति

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

विकल्प

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

चार्ट रेंज फ़िल्टर

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

स्थिति

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

विकल्प

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

ध्यान दें, यह सिर्फ़ डोमेन कॉलम के इंडेक्स को तय करने के लिए सही होता है. यह कॉलम, चार्ट में लगातार दिखने वाले चार्ट में शामिल होता है.

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

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

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

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

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

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

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

इवेंट

ControlWrapper इवेंट में शामिल करना:

नाम जानकारी प्रॉपर्टी
statechange इसके मुताबिक, हर ControlWrapper के लिए दस्तावेज़ के रूप में, सिर्फ़ एक बूलियन प्रॉपर्टी होती है, inProgress, जो यह बताती है कि राज्य में बदलाव किया जा रहा है या नहीं (थंब्स या रेंज में से किसी एक को खींचा जा रहा है). जारी है

DateRangeFilter

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

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

स्थिति

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

विकल्प

नाम टाइप डिफ़ॉल्ट जानकारी
फ़िल्टर कॉलम इंडेक्स संख्या कोई नहीं डेटा टेबल का वह कॉलम जिस पर फ़िल्टर काम करना चाहिए. यह विकल्प या तो filterColumnLabel देना ज़रूरी है. अगर दोनों मौजूद हैं, तो इस विकल्प को प्राथमिकता दी जाती है. number टाइप वाले कॉलम की तरफ़ पॉइंट करना चाहिए.
फ़िल्टर कॉलम लेबल स्ट्रिंग कोई नहीं उस कॉलम का लेबल जिस पर फ़िल्टर लागू होना चाहिए. यह विकल्प या तो filterColumnIndex देना ज़रूरी है. अगर दोनों मौजूद हैं, तो filterColumnIndex को प्राथमिकता दी जाती है. number टाइप वाले कॉलम पर कर्सर ले जाना चाहिए.
कम से कम मान तारीख अपने-आप श्रेणी के लिए निचली सीमा के लिए कम से कम अनुमति मान. अगर यह तय नहीं है, तो वैल्यू का अनुमान डेटा टेबल के उस कॉन्टेंट से लिया जाएगा जिसे कंट्रोल मैनेज करता है.
ज़्यादा से ज़्यादा मान तारीख अपने-आप श्रेणी के लिए अधिकतम अनुमत मान. अगर यह तय नहीं है, तो वैल्यू का अनुमान डेटा टेबल के उस कॉन्टेंट से लिया जाएगा जिसे कंट्रोल मैनेज करता है.
यूज़र इंटरफ़ेस (यूआई) अस्वीकार करें शून्य कंट्रोल के यूज़र इंटरफ़ेस (यूआई) के अलग-अलग पहलुओं को कॉन्फ़िगर करने के लिए, सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी बताने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है:
{label: 'Age', labelSeparator: ':'}
ui.format अस्वीकार करें कोई नहीं तारीख को स्ट्रिंग के तौर पर दिखाने का तरीका. तारीख के सभी मान्य फ़ॉर्मैट स्वीकार किए जाते हैं.
ui.step स्ट्रिंग दिन स्लाइडर के थंब को ड्रैग करते समय, कम से कम बदलाव "डे" तक हो सकता है. (फ़िलहाल, "month" और "year" का इस्तेमाल नहीं किया जा सकता.)
ui.ticks संख्या अपने-आप टिक की संख्या (रेंज बार में तय पोज़िशन) स्लाइडर को पकड़ा जा सकता है.
ui.unitIncrment स्ट्रिंग 'एक' श्रेणी सीमाओं की वृद्धि के लिए वृद्धि की राशि. इकाई को बढ़ाने के लिए, ऐरो बटन का इस्तेमाल किया जा सकता है.
ui.blockIncrment संख्या 10 सीमा की सीमाओं की वृद्धि के लिए वृद्धि की राशि. स्लाइडर को पसंद करने के लिए, pgUp और pgDown बटन का इस्तेमाल करके, ब्लॉक को बढ़ाना ज़रूरी है.
ui.showRangeValues बूलियन true चुनी गई सीमा के स्लाइडर दिखाने वाले लेबल के पास लेबल होने चाहिए या नहीं.
ui.orientation स्ट्रिंग 'हॉरिज़ॉन्टल' स्लाइडर का ओरिएंटेशन. 'horizontal' या 'vertical'.
ui.label स्ट्रिंग अपने-आप स्लाइडर के बगल में दिखने वाला लेबल. अगर कोई जानकारी नहीं दी गई है, तो उस कॉलम का लेबल इस्तेमाल किया जाएगा जिस पर कंट्रोल चलता है.
ui.labelsearator स्ट्रिंग कोई नहीं लेबल को स्लाइडर से अलग करने के लिए, लेबल में एक सेपरेटर स्ट्रिंग जोड़ी गई.
ui.labelStacking स्ट्रिंग 'हॉरिज़ॉन्टल' क्या लेबल ऊपर (वर्टिकल स्टैकिंग) दिखाना चाहिए या स्लाइडर के बगल में (हॉरिज़ॉन्टल स्टैकिंग) दिखना चाहिए. 'vertical' या 'horizontal' का इस्तेमाल करें.
ui.cssकक्षा स्ट्रिंग 'google-विज़ुअलाइज़ेशन-कंट्रोल-रेंज फ़िल्टर' पसंद के मुताबिक बनाई गई स्टाइलिंग के लिए, वह सीएसएस क्लास जिसे कंट्रोल असाइन करना है.

NumberRangeFilter

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

स्थिति

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

विकल्प

नाम टाइप डिफ़ॉल्ट जानकारी
फ़िल्टर कॉलम इंडेक्स संख्या कोई नहीं डेटा टेबल का वह कॉलम जिस पर फ़िल्टर काम करना चाहिए. यह विकल्प या तो filterColumnLabel देना ज़रूरी है. अगर दोनों मौजूद हैं, तो इस विकल्प को प्राथमिकता दी जाती है. number टाइप वाले कॉलम की तरफ़ पॉइंट करना चाहिए.
फ़िल्टर कॉलम लेबल स्ट्रिंग कोई नहीं उस कॉलम का लेबल जिस पर फ़िल्टर लागू होना चाहिए. यह विकल्प या तो filterColumnIndex देना ज़रूरी है. अगर दोनों मौजूद हैं, तो filterColumnIndex को प्राथमिकता दी जाती है. number टाइप वाले कॉलम पर कर्सर ले जाना चाहिए.
कम से कम मान संख्या अपने-आप श्रेणी के लिए निचली सीमा के लिए कम से कम अनुमति मान. अगर यह तय नहीं है, तो वैल्यू का अनुमान डेटा टेबल के उस कॉन्टेंट से लिया जाएगा जिसे कंट्रोल मैनेज करता है.
ज़्यादा से ज़्यादा मान संख्या अपने-आप श्रेणी के लिए अधिकतम अनुमत मान. अगर यह तय नहीं है, तो वैल्यू का अनुमान डेटा टेबल के उस कॉन्टेंट से लिया जाएगा जिसे कंट्रोल मैनेज करता है.
यूज़र इंटरफ़ेस (यूआई) अस्वीकार करें शून्य कंट्रोल के यूज़र इंटरफ़ेस (यूआई) के अलग-अलग पहलुओं को कॉन्फ़िगर करने के लिए, सदस्यों वाला ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी बताने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है:
{label: 'Age', labelSeparator: ':'}
ui.format अस्वीकार करें कोई नहीं स्ट्रिंग के तौर पर संख्या दिखाने का तरीका. किसी भी नंबर फ़ॉर्मैट का इस्तेमाल किया जा सकता है.
ui.step संख्या 1 या अगर बताया गया हो, तो ticks से कैलकुलेट किया गया स्लाइडर को नापसंद करते समय कम से कम बदलाव.
ui.ticks संख्या अपने-आप टिक की संख्या (रेंज बार में तय पोज़िशन) स्लाइडर को पकड़ा जा सकता है.
ui.unitIncrment संख्या 1 श्रेणी सीमाओं की वृद्धि के लिए वृद्धि की राशि. इकाई को बढ़ाने के लिए, ऐरो बटन का इस्तेमाल किया जा सकता है.
ui.blockIncrment संख्या 10 सीमा की सीमाओं की वृद्धि के लिए वृद्धि की राशि. स्लाइडर को पसंद करने के लिए, pgUp और pgDown बटन का इस्तेमाल करके, ब्लॉक को बढ़ाना ज़रूरी है.
ui.showRangeValues बूलियन true चुनी गई सीमा के स्लाइडर दिखाने वाले लेबल के पास लेबल होने चाहिए या नहीं.
ui.orientation स्ट्रिंग 'हॉरिज़ॉन्टल' स्लाइडर का ओरिएंटेशन. 'horizontal' या 'vertical'.
ui.label स्ट्रिंग अपने-आप स्लाइडर के बगल में दिखने वाला लेबल. अगर कोई जानकारी नहीं दी गई है, तो उस कॉलम का लेबल इस्तेमाल किया जाएगा जिस पर कंट्रोल चलता है.
ui.labelsearator स्ट्रिंग कोई नहीं लेबल को स्लाइडर से अलग करने के लिए, लेबल में एक सेपरेटर स्ट्रिंग जोड़ी गई.
ui.labelStacking स्ट्रिंग 'हॉरिज़ॉन्टल' क्या लेबल ऊपर (वर्टिकल स्टैकिंग) दिखाना चाहिए या स्लाइडर के बगल में (हॉरिज़ॉन्टल स्टैकिंग) दिखना चाहिए. 'vertical' या 'horizontal' का इस्तेमाल करें.
ui.cssकक्षा स्ट्रिंग 'google-विज़ुअलाइज़ेशन-कंट्रोल-रेंज फ़िल्टर' पसंद के मुताबिक बनाई गई स्टाइलिंग के लिए, वह सीएसएस क्लास जिसे कंट्रोल असाइन करना है.

स्ट्रिंग फ़िल्टर

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

स्थिति

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

विकल्प

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