এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

নিয়ন্ত্রণ এবং ড্যাশবোর্ড

এই পৃষ্ঠায়, আপনি দেখতে পাবেন কিভাবে ড্যাশবোর্ডে একাধিক চার্ট একত্রিত করা যায় এবং ব্যবহারকারীদের তারা কোন ডেটা দেখায় তা নিয়ন্ত্রণ করতে দেয়।

ওভারভিউ

ড্যাশবোর্ডগুলি একসাথে সংগঠিত করার এবং একই অন্তর্নিহিত ডেটা ভাগ করে এমন একাধিক চার্ট পরিচালনা করার একটি সহজ উপায়। এই পৃষ্ঠায় বর্ণিত API ব্যবহার করে, আপনি একসাথে তারের বোঝা থেকে নিজেকে মুক্ত করতে পারেন এবং ড্যাশবোর্ডের অংশ সমস্ত চার্ট সমন্বয় করতে পারেন।

ড্যাশবোর্ড google.visualization.Dashboard ক্লাস ব্যবহার করে সংজ্ঞায়িত করা হয়। Dashboard দৃষ্টান্তগুলি ড্যাশবোর্ডের অংশ এমন সমস্ত চার্টে ডেটা অঙ্কন এবং বিতরণ করার জন্য ভিজ্যুয়ালাইজ করার এবং যত্ন নেওয়ার জন্য ডেটা ধারণকারী একটি DataTable পায়।

কন্ট্রোল হল ইউজার ইন্টারফেস উইজেট (যেমন ক্যাটাগরি পিকার, রেঞ্জ স্লাইডার, স্বয়ংসম্পূর্ণ...) ড্যাশবোর্ড দ্বারা পরিচালিত ডেটা এবং এর অংশ চার্টগুলি চালানোর জন্য আপনি ইন্টারঅ্যাক্ট করেন৷

কন্ট্রোল google.visualization.ControlWrapper ক্লাস ব্যবহার করে সংজ্ঞায়িত করা হয়। আপনি একটি ড্যাশবোর্ডে ControlWrapper দৃষ্টান্ত যোগ করতে পারেন, যেখানে তারা একটি প্লাম্বিং সিস্টেমে পাইপ এবং ভালভের মতো আচরণ করে। তারা ব্যবহারকারীর ইনপুট সংগ্রহ করে এবং তথ্য ব্যবহার করে সিদ্ধান্ত নেয় যে কোন ডেটা ড্যাশবোর্ড পরিচালনা করছে সেটির অংশ চার্টগুলিতে উপলব্ধ করা উচিত।

নিম্নলিখিত উদাহরণটি দেখুন যেখানে একটি পাই চার্ট দ্বারা ভিজ্যুয়ালাইজ করা ডেটা চালাতে একটি বিভাগ বাছাইকারী এবং একটি রেঞ্জ স্লাইডার ব্যবহার করা হয়।

দ্রষ্টব্য: ড্যাশবোর্ডটি ইন্টারেক্টিভ। নিয়ন্ত্রণগুলি পরিচালনা করার চেষ্টা করুন এবং বাস্তব সময়ে চার্ট পরিবর্তন দেখুন।

কন্ট্রোল এবং ড্যাশবোর্ড ব্যবহার করে

এখানে একটি ড্যাশবোর্ড তৈরি এবং এটি আপনার পৃষ্ঠায় এম্বেড করার মূল পদক্ষেপগুলি রয়েছে৷ আপনি নীচে এই সমস্ত পদক্ষেপগুলি প্রদর্শন করে একটি কোড স্নিপেট পাবেন, তারপরে প্রতিটি ধাপ সম্পর্কে বিস্তারিত তথ্য পাবেন।

আপনার ড্যাশবোর্ডের জন্য একটি HTML কঙ্কাল তৈরি করুন । একটি ড্যাশবোর্ডের প্রতিটি সদস্যকে ধরে রাখার জন্য আপনার পৃষ্ঠায় যতগুলি HTML উপাদান প্রয়োজন ততগুলি থাকতে হবে৷ এর মধ্যে ড্যাশবোর্ড এবং সমস্ত নিয়ন্ত্রণ এবং চার্ট যা এর অংশ। সাধারণত আপনি প্রতিটির জন্য একটি <div> ব্যবহার করবেন।
আপনার লাইব্রেরি লোড করুন . একটি ড্যাশবোর্ডের জন্য পৃষ্ঠায় অন্তর্ভুক্ত বা লোড করার জন্য শুধুমাত্র দুটি লাইব্রেরি প্রয়োজন: Google AJAX API এবং Google ভিজ্যুয়ালাইজেশন controls প্যাকেজ।
আপনার ডেটা প্রস্তুত করুন । কল্পনা করার জন্য আপনাকে ডেটা প্রস্তুত করতে হবে; এর মানে হয় কোডে নিজেই ডেটা নির্দিষ্ট করা, বা ডেটার জন্য একটি দূরবর্তী সাইট অনুসন্ধান করা।
একটি ড্যাশবোর্ড উদাহরণ তৈরি করুন । আপনার ড্যাশবোর্ডের কনস্ট্রাক্টরকে কল করে এবং <div> এলিমেন্টের একটি রেফারেন্স দিয়ে যা এটিকে ধরে রাখবে তা ইনস্ট্যান্টিয়েট করুন।
আপনার প্রয়োজন অনুসারে অনেকগুলি নিয়ন্ত্রণ এবং চার্টের উদাহরণ তৈরি করুন ৷ প্রতিটি চার্ট বর্ণনা করতে google.visualization.ChartWrapper এবং google.visualization.ControlWrapper দৃষ্টান্ত তৈরি করুন এবং ড্যাশবোর্ড পরিচালনা করে এমন নিয়ন্ত্রণ করুন৷
নির্ভরতা স্থাপন করুন । আপনার ড্যাশবোর্ডে bind() কল করুন এবং ড্যাশবোর্ডকে কী পরিচালনা করতে হবে তা জানাতে নিয়ন্ত্রণ এবং চার্টের উদাহরণগুলি পাস করুন৷ একবার একটি নিয়ন্ত্রণ এবং চার্ট একসাথে আবদ্ধ হয়ে গেলে, ড্যাশবোর্ড ডেটার উপর নিয়ন্ত্রণ প্রয়োগকারী সীমাবদ্ধতার সাথে মেলে চার্ট আপডেট করে।
আপনার ড্যাশবোর্ড আঁকুন । আপনার ড্যাশবোর্ডে draw() কল করুন এবং পৃষ্ঠায় পুরো ড্যাশবোর্ডটি আঁকতে আপনার ডেটা পাস করুন।
ড্রয়ের পর প্রোগ্রামেটিক পরিবর্তন । ঐচ্ছিকভাবে, প্রাথমিক ড্রয়ের পরে আপনি ড্যাশবোর্ডের অংশ এমন নিয়ন্ত্রণগুলি প্রোগ্রাম্যাটিকভাবে চালাতে পারেন এবং ড্যাশবোর্ডকে এর প্রতিক্রিয়া হিসাবে চার্টগুলি আপডেট করতে হবে৷

এখানে একটি পৃষ্ঠার একটি সাধারণ উদাহরণ যা একটি পাই চার্ট চালানোর জন্য একটি রেঞ্জ স্লাইডার সহ একটি সাধারণ ড্যাশবোর্ড তৈরি করে৷ ফলস্বরূপ ড্যাশবোর্ডটি স্নিপেটের নীচে দেখানো হয়েছে।

<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. আপনার ড্যাশবোর্ডের জন্য একটি HTML কঙ্কাল তৈরি করুন৷

ড্যাশবোর্ড এবং এর সমস্ত নিয়ন্ত্রণ এবং চার্ট উভয়ই ধরে রাখতে আপনার পৃষ্ঠায় অবশ্যই অনেকগুলি HTML উপাদান (সাধারণত <div>s) থাকতে হবে। ড্যাশবোর্ড, কন্ট্রোল এবং চার্ট ইনস্ট্যান্স ইনস্ট্যান্ট করার সময়, আপনাকে অবশ্যই তাদের উপাদানগুলির একটি রেফারেন্স পাস করতে হবে, তাই প্রতিটি HTML উপাদানের জন্য একটি আইডি বরাদ্দ করুন৷

    <!--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 প্যাকেজ। API (বিশেষত, 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. আপনার ডেটা প্রস্তুত করুন

যখন ভিজ্যুয়ালাইজেশন API লোড করা হয়, google.charts.setOnLoadCallback() আপনার হ্যান্ডলার ফাংশনকে কল করবে, যাতে আপনি জানেন যে সমস্ত প্রয়োজনীয় সহায়ক পদ্ধতি এবং ক্লাস আপনার ডেটা প্রস্তুত করা শুরু করার জন্য প্রস্তুত থাকবে৷

ড্যাশবোর্ডগুলি একটি ডেটা টেবিলে ডেটা গ্রহণ করে, চার্টের মতোই৷

4. একটি ড্যাশবোর্ড ইনস্ট্যান্স তৈরি করুন

আপনি আপনার ডেটা তৈরি করার পরে, আপনি আপনার ড্যাশবোর্ড অবজেক্টকে ইনস্ট্যান্টিয়েট করতে পারেন। একটি ড্যাশবোর্ড কনস্ট্রাক্টর একটি প্যারামিটার নেয়: DOM উপাদানের একটি রেফারেন্স যেখানে ড্যাশবোর্ড আঁকতে হয়।

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

ড্যাশবোর্ড একটি জাভাস্ক্রিপ্ট ক্লাস হিসাবে উন্মুক্ত করা হয়. আপনার ড্যাশবোর্ডটি ইনস্ট্যান্টিয়েট করার পরে, আপনি কিছু ঐচ্ছিক পদক্ষেপগুলি সম্পাদন করতে পারেন যেমন ইভেন্ট শ্রোতাদের যোগ করা (উদাহরণস্বরূপ, ড্যাশবোর্ড 'প্রস্তুত' হয়ে গেলে বিজ্ঞপ্তি দেওয়া)। ড্যাশবোর্ডগুলি চার্টের মতো ইভেন্টগুলি পরিচালনা করে, তাই আরও তথ্যের জন্য চার্ট বিভাগে সুন্দরভাবে ভিজ্যুয়ালাইজেশন ইভেন্ট পরিচালনা বা ত্রুটিগুলি প্রদর্শন করুন ।

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 ।

নিয়ন্ত্রণ এবং চার্ট কনফিগার করার বিষয়ে কয়েকটি টিপস:

আপনার google.visualization.DataTable এর কোন কলামটি নির্দিষ্ট করার জন্য আপনাকে অবশ্যই সমস্ত নিয়ন্ত্রণগুলিকে একটি filterColumnIndex (বা filterColumnLabel ) দিতে হবে। নিয়ন্ত্রণটি পরিচালনা করে (উপরের উদাহরণে, নিয়ন্ত্রণটি Donuts eaten লেবেলযুক্ত কলামে কাজ করে)
কন্ট্রোলের 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 ) যা ড্যাশবোর্ডকে শক্তি দেয়।

আপনি যখনই ড্যাশবোর্ডের রচনা পরিবর্তন করেন (উদাহরণস্বরূপ এটিতে নতুন নিয়ন্ত্রণ বা চার্ট যোগ করে) বা আপনি সামগ্রিক DataTable পরিবর্তন করেন যা এটিকে ক্ষমতা দেয় তখনই আপনাকে draw() কল করা উচিত।

ড্যাশবোর্ড ইনস্ট্যান্স একটি ready ইভেন্ট ফায়ার করে যখনই draw() এর অংশ হওয়া সমস্ত নিয়ন্ত্রণ এবং চার্ট আঁকা বন্ধ করে। পরিচালিত নিয়ন্ত্রণ বা চার্ট আঁকতে ব্যর্থ হলে একটি error ইভেন্ট বহিস্কার করা হয়। ইভেন্ট পরিচালনার বিষয়ে আরও জানতে, হ্যান্ডলিং ইভেন্ট দেখুন।

দ্রষ্টব্য: আপনি ড্যাশবোর্ড রচনা পরিবর্তন করার বা এটি আবার আঁকার চেষ্টা করার আগে আপনার ready ইভেন্টের জন্য শুনতে হবে।

8. ড্রয়ের পর প্রোগ্রামেটিক পরিবর্তন

একবার ড্যাশবোর্ড প্রারম্ভিক draw() সম্পন্ন করলে এটি লাইভ হবে এবং এটিতে আপনি যে কোনো ক্রিয়া সম্পাদন করেন (যেমন ড্যাশবোর্ডের অংশ এমন একটি নিয়ন্ত্রণ স্লাইডারের নির্বাচিত পরিসর পরিবর্তন করে) স্বয়ংক্রিয়ভাবে প্রতিক্রিয়া জানাবে।

আপনার যদি ড্যাশবোর্ডের অবস্থা প্রোগ্রাম্যাটিকভাবে পরিবর্তন করতে হয়, তাহলে আপনি এটির অংশ ControlWrapper এবং ChartWrapper উদাহরণগুলিতে সরাসরি কাজ করে তা করতে পারেন। অঙ্গুষ্ঠের নিয়ম হল নির্দিষ্ট ControlWrapper (বা ChartWrapper ) উদাহরণে সরাসরি আপনার প্রয়োজনে যেকোনো পরিবর্তন সম্পাদন করা: উদাহরণস্বরূপ, যথাক্রমে setOption() এবং setState() এর মাধ্যমে একটি নিয়ন্ত্রণ বিকল্প বা স্থিতি পরিবর্তন করুন এবং পরে এর draw() পদ্ধতিতে কল করুন। ড্যাশবোর্ড তারপরে অনুরোধ করা পরিবর্তনের সাথে মেলে আপডেট হবে।

নিম্নলিখিত উদাহরণ যেমন একটি কেস দেখায়.

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(); }; }

সম্পূর্ণ ওয়েব পেজ

<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>

API রেফারেন্স

এই বিভাগে কন্ট্রোল এবং ড্যাশবোর্ড এপিআই দ্বারা উন্মোচিত বস্তু এবং সমস্ত নিয়ন্ত্রণ দ্বারা উন্মোচিত স্ট্যান্ডার্ড পদ্ধতির তালিকা রয়েছে।

ড্যাশবোর্ড

সহযোগী নিয়ন্ত্রণ এবং চার্টের একটি সংগ্রহের প্রতিনিধিত্ব করে যা একই অন্তর্নিহিত ডেটা ভাগ করে।

কনস্ট্রাক্টর

Dashboard(containerRef)

ধারক রেফ
: পৃষ্ঠায় একটি বৈধ কন্টেইনার উপাদানের একটি রেফারেন্স যা ড্যাশবোর্ড বিষয়বস্তু ধারণ করবে।

পদ্ধতি

ড্যাশবোর্ড নিম্নলিখিত পদ্ধতিগুলি প্রকাশ করে:

পদ্ধতি রিটার্ন টাইপ বর্ণনা

পদ্ধতি	রিটার্ন টাইপ	বর্ণনা
`bind( controls , charts )`	google.visualization.Dashboard	এক বা একাধিক কন্ট্রোল এক বা একাধিক অন্যান্য ড্যাশবোর্ড অংশগ্রহণকারীদের (হয় চার্ট বা অন্যান্য নিয়ন্ত্রণ) সাথে আবদ্ধ করে, যাতে যখনই প্রাক্তন কেউ একটি প্রোগ্রাম্যাটিক বা ব্যবহারকারীর মিথস্ক্রিয়া সংগ্রহ করে যা ড্যাশবোর্ড দ্বারা পরিচালিত ডেটাকে প্রভাবিত করে তখনই পরবর্তী সমস্তগুলি পুনরায় আঁকা হয়৷ একাধিক `bind()` কল একসাথে চেইন করার জন্য ড্যাশবোর্ডের দৃষ্টান্ত প্রদান করে। নিয়ন্ত্রণ - হয় একটি একক বা `google.visualization.ControlWrapper` দৃষ্টান্তগুলির একটি অ্যারে যা আবদ্ধ করার জন্য নিয়ন্ত্রণগুলিকে সংজ্ঞায়িত করে৷ চার্ট - হয় একটি একক বা `google.visualization.ChartWrapper` দৃষ্টান্তগুলির একটি অ্যারে যা চার্টগুলিকে সংজ্ঞায়িত করে যা নিয়ন্ত্রণ দ্বারা চালিত হবে৷
`draw( dataTable )`	কোনোটিই নয়	ড্যাশবোর্ড আঁকে। dataTable - নিম্নলিখিত যে কোনো একটি: একটি `DataTable` অবজেক্ট; একটি `DataView` অবজেক্ট; একটি ডেটা টেবিলের একটি JSON উপস্থাপনা; অথবা google.visualization.arrayToDataTable() এর সিনট্যাক্স অনুসরণ করে একটি অ্যারে।
`getSelection()`	অবজেক্টের অ্যারে	ড্যাশবোর্ডে চার্টের নির্বাচিত ভিজ্যুয়াল সত্তাগুলির একটি অ্যারে প্রদান করে। `getSelection()` পদ্ধতি, যখন ড্যাশবোর্ডে কল করা হয়, এটির মধ্যে থাকা সমস্ত চার্টে করা সমস্ত নির্বাচনের একটি সমষ্টি প্রদান করে, চার্ট নির্বাচনের সাথে কাজ করার সময় একটি একক রেফারেন্স ব্যবহারের অনুমতি দেয়। দ্রষ্টব্য: নির্বাচিত ইভেন্টের জন্য ইভেন্ট শ্রোতাদের এখনও প্রতিটি চার্টের সাথে সংযুক্ত করতে হবে যা আপনি শুনতে চান। বর্ধিত বিবরণ

bind( controls , charts )

google.visualization.Dashboard

এক বা একাধিক কন্ট্রোল এক বা একাধিক অন্যান্য ড্যাশবোর্ড অংশগ্রহণকারীদের (হয় চার্ট বা অন্যান্য নিয়ন্ত্রণ) সাথে আবদ্ধ করে, যাতে যখনই প্রাক্তন কেউ একটি প্রোগ্রাম্যাটিক বা ব্যবহারকারীর মিথস্ক্রিয়া সংগ্রহ করে যা ড্যাশবোর্ড দ্বারা পরিচালিত ডেটাকে প্রভাবিত করে তখনই পরবর্তী সমস্তগুলি পুনরায় আঁকা হয়৷ একাধিক bind() কল একসাথে চেইন করার জন্য ড্যাশবোর্ডের দৃষ্টান্ত প্রদান করে।

নিয়ন্ত্রণ - হয় একটি একক বা google.visualization.ControlWrapper দৃষ্টান্তগুলির একটি অ্যারে যা আবদ্ধ করার জন্য নিয়ন্ত্রণগুলিকে সংজ্ঞায়িত করে৷
চার্ট - হয় একটি একক বা google.visualization.ChartWrapper দৃষ্টান্তগুলির একটি অ্যারে যা চার্টগুলিকে সংজ্ঞায়িত করে যা নিয়ন্ত্রণ দ্বারা চালিত হবে৷

draw( dataTable )

কোনোটিই নয়

ড্যাশবোর্ড আঁকে।

dataTable - নিম্নলিখিত যে কোনো একটি: একটি DataTable অবজেক্ট; একটি DataView অবজেক্ট; একটি ডেটা টেবিলের একটি JSON উপস্থাপনা; অথবা google.visualization.arrayToDataTable() এর সিনট্যাক্স অনুসরণ করে একটি অ্যারে।

getSelection()

অবজেক্টের অ্যারে

ড্যাশবোর্ডে চার্টের নির্বাচিত ভিজ্যুয়াল সত্তাগুলির একটি অ্যারে প্রদান করে। getSelection() পদ্ধতি, যখন ড্যাশবোর্ডে কল করা হয়, এটির মধ্যে থাকা সমস্ত চার্টে করা সমস্ত নির্বাচনের একটি সমষ্টি প্রদান করে, চার্ট নির্বাচনের সাথে কাজ করার সময় একটি একক রেফারেন্স ব্যবহারের অনুমতি দেয়।

দ্রষ্টব্য: নির্বাচিত ইভেন্টের জন্য ইভেন্ট শ্রোতাদের এখনও প্রতিটি চার্টের সাথে সংযুক্ত করতে হবে যা আপনি শুনতে চান।

বর্ধিত বিবরণ

ঘটনা

ড্যাশবোর্ড অবজেক্ট নিম্নলিখিত ইভেন্টগুলি নিক্ষেপ করে। মনে রাখবেন যে কোনো ইভেন্ট নিক্ষেপ করার আগে আপনাকে অবশ্যই Dashboard.draw() কল করতে হবে।

নাম বর্ণনা বৈশিষ্ট্য

error ড্যাশবোর্ড রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়। ড্যাশবোর্ডের অংশ এক বা একাধিক নিয়ন্ত্রণ এবং চার্ট রেন্ডারিং ব্যর্থ হতে পারে। আইডি, বার্তা

নাম	বর্ণনা	বৈশিষ্ট্য
`error`	ড্যাশবোর্ড রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়। ড্যাশবোর্ডের অংশ এক বা একাধিক নিয়ন্ত্রণ এবং চার্ট রেন্ডারিং ব্যর্থ হতে পারে।	আইডি, বার্তা
`ready`	ড্যাশবোর্ড অঙ্কন সম্পূর্ণ করেছে এবং পরিবর্তনগুলি গ্রহণ করার জন্য প্রস্তুত৷ ড্যাশবোর্ডের অংশ সমস্ত নিয়ন্ত্রণ এবং চার্ট বাহ্যিক পদ্ধতি কল এবং ব্যবহারকারীর মিথস্ক্রিয়া জন্য প্রস্তুত. আপনি আঁকার পরে যদি আপনি ড্যাশবোর্ড (অথবা এটি যে ডেটা প্রদর্শন করে) পরিবর্তন করতে চান, তাহলে `draw` পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে, এবং তারপর ইভেন্টটি চালিত হওয়ার পরেই আপনার পরিবর্তনগুলি প্রয়োগ করুন৷ `ready` ইভেন্টটিও ফায়ার হবে: একটি ড্যাশবোর্ড রিফ্রেশ সমাপ্তির পরে একটি ব্যবহারকারীর দ্বারা ট্রিগার করা বা নিয়ন্ত্রণগুলির একটির সাথে প্রোগ্রাম্যাটিক মিথস্ক্রিয়া, ড্যাশবোর্ডের যেকোনো চার্ট অংশের `draw()` পদ্ধতিতে একটি প্রোগ্রাম্যাটিক কল করার পর।	কোনোটিই নয়

ready

ড্যাশবোর্ড অঙ্কন সম্পূর্ণ করেছে এবং পরিবর্তনগুলি গ্রহণ করার জন্য প্রস্তুত৷ ড্যাশবোর্ডের অংশ সমস্ত নিয়ন্ত্রণ এবং চার্ট বাহ্যিক পদ্ধতি কল এবং ব্যবহারকারীর মিথস্ক্রিয়া জন্য প্রস্তুত. আপনি আঁকার পরে যদি আপনি ড্যাশবোর্ড (অথবা এটি যে ডেটা প্রদর্শন করে) পরিবর্তন করতে চান, তাহলে draw পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে, এবং তারপর ইভেন্টটি চালিত হওয়ার পরেই আপনার পরিবর্তনগুলি প্রয়োগ করুন৷

ready ইভেন্টটিও ফায়ার হবে:

একটি ড্যাশবোর্ড রিফ্রেশ সমাপ্তির পরে একটি ব্যবহারকারীর দ্বারা ট্রিগার করা বা নিয়ন্ত্রণগুলির একটির সাথে প্রোগ্রাম্যাটিক মিথস্ক্রিয়া,
ড্যাশবোর্ডের যেকোনো চার্ট অংশের draw() পদ্ধতিতে একটি প্রোগ্রাম্যাটিক কল করার পর।

কোনোটিই নয়

কন্ট্রোল র‍্যাপার

একটি ControlWrapper অবজেক্ট হল একটি কনফিগার করা কন্ট্রোল ইন্সট্যান্সের JSON উপস্থাপনার চারপাশে একটি মোড়ক। ক্লাসটি একটি ড্যাশবোর্ড নিয়ন্ত্রণ সংজ্ঞায়িত করার, এটি অঙ্কন করার এবং প্রোগ্রামগতভাবে এর অবস্থা পরিবর্তন করার জন্য সুবিধার পদ্ধতিগুলি প্রকাশ করে।

কনস্ট্রাক্টর

ControlWrapper(opt_spec)

opt_spec: [ ঐচ্ছিক ] - হয় নিয়ন্ত্রণ সংজ্ঞায়িত একটি JSON অবজেক্ট, অথবা সেই বস্তুর একটি ক্রমিক স্ট্রিং সংস্করণ। JSON অবজেক্টের সমর্থিত বৈশিষ্ট্যগুলি নিম্নলিখিত টেবিলে দেখানো হয়েছে। যদি নির্দিষ্ট করা না থাকে, তাহলে আপনাকে অবশ্যই কন্ট্রোল র্যাপার দ্বারা উন্মুক্ত করা সেট... পদ্ধতিগুলি ব্যবহার করে সমস্ত উপযুক্ত বৈশিষ্ট্য সেট করতে হবে।

সম্পত্তি	টাইপ	প্রয়োজন	ডিফল্ট	বর্ণনা
নিয়ন্ত্রণ প্রকার	স্ট্রিং	প্রয়োজন	কোনটি	নিয়ন্ত্রণের ক্লাসের নাম। `google.visualization` প্যাকেজের নাম Google নিয়ন্ত্রণের জন্য বাদ দেওয়া যেতে পারে। উদাহরণ: `CategoryFilter` , `NumberRangeFilter` ।
ধারক আইডি	স্ট্রিং	প্রয়োজন	কোনটি	আপনার পৃষ্ঠার DOM উপাদানের ID যা নিয়ন্ত্রণ হোস্ট করবে।
বিকল্প	অবজেক্ট	ঐচ্ছিক	কোনটি	নিয়ন্ত্রণের বিকল্পগুলি বর্ণনা করে এমন একটি বস্তু। আপনি হয় JavaScript আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, অথবা বস্তুর একটি হ্যান্ডেল প্রদান করতে পারেন। উদাহরণ: `"options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}`
অবস্থা	অবজেক্ট	ঐচ্ছিক	কোনটি	একটি বস্তু নিয়ন্ত্রণের অবস্থা বর্ণনা করে। রাজ্য সমস্ত ভেরিয়েবল সংগ্রহ করে যা নিয়ন্ত্রণ পরিচালনাকারী ব্যবহারকারী প্রভাবিত করতে পারে। উদাহরণস্বরূপ, স্লাইডারের নিম্ন এবং উচ্চ থাম্ব যে অবস্থানগুলি দখল করে তার পরিভাষায় একটি রেঞ্জ স্লাইডার অবস্থা বর্ণনা করা যেতে পারে। আপনি হয় জাভাস্ক্রিপ্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, অথবা বস্তুর একটি হ্যান্ডেল প্রদান করতে পারেন। উদাহরণ: `"state": {"lowValue": 20, "highValue": 50}`

পদ্ধতি

ControlWrapper নিম্নলিখিত অতিরিক্ত পদ্ধতিগুলি প্রকাশ করে:

পদ্ধতি	রিটার্ন টাইপ	বর্ণনা
`draw()`	কোনোটিই নয়	নিয়ন্ত্রণ আঁকে। সাধারনত ড্যাশবোর্ডের নিয়ন্ত্রণে থাকা ড্যাশবোর্ড এটি আঁকার যত্ন নেয়। অপশন বা স্টেটের মতো অন্য কোনো সেটিংস পরিবর্তন করার পরে নিয়ন্ত্রণের প্রোগ্রাম্যাটিক পুনরায় অঙ্কন করতে বাধ্য করতে আপনার `draw()` কল করা উচিত।
`toJSON()`	স্ট্রিং	নিয়ন্ত্রণের JSON উপস্থাপনার একটি স্ট্রিং সংস্করণ প্রদান করে।
`clone()`	কন্ট্রোল র‍্যাপার	নিয়ন্ত্রণ মোড়কের একটি গভীর অনুলিপি প্রদান করে।
`getControlType()`	স্ট্রিং	নিয়ন্ত্রণের ক্লাসের নাম। যদি এটি একটি Google নিয়ন্ত্রণ হয়, তাহলে নামটি `google.visualization` এর সাথে যোগ্য হবে না। সুতরাং, উদাহরণস্বরূপ, যদি এটি একটি CategoryFilter নিয়ন্ত্রণ হয় তবে এটি "google.visualization.CategoryFilter" এর পরিবর্তে "CategoryFilter" প্রদান করবে।
`getControlName()`	স্ট্রিং	`setControlName()` দ্বারা নির্ধারিত নিয়ন্ত্রণের নাম ফেরত দেয়।
`getControl()`	কন্ট্রোল অবজেক্ট রেফারেন্স	এই ControlWrapper দ্বারা তৈরি নিয়ন্ত্রণের একটি রেফারেন্স প্রদান করে। আপনি ControlWrapper অবজেক্টে (বা এটি ধরে থাকা ড্যাশবোর্ডে) `draw()` কল না করা পর্যন্ত এটি শূন্য হয়ে যাবে এবং এটি একটি প্রস্তুত ইভেন্ট নিক্ষেপ করবে। প্রত্যাবর্তিত অবজেক্টটি শুধুমাত্র একটি পদ্ধতি প্রকাশ করে: `resetControl()` , যা কন্ট্রোল স্টেটকে রিসেট করে যার সাথে এটি শুরু করা হয়েছিল (যেমন একটি HTML ফর্ম উপাদান পুনরায় সেট করা)।
`getContainerId()`	স্ট্রিং	নিয়ন্ত্রণের DOM কন্টেইনার উপাদানের ID।
`getOption( key , opt_default_val )`	যেকোন ধরণের	নির্দিষ্ট নিয়ন্ত্রণ বিকল্প মান প্রদান করে কী - পুনরুদ্ধার করার বিকল্পটির নাম। একটি যোগ্য নাম হতে পারে, যেমন `'vAxis.title'` । opt_default_value [ ঐচ্ছিক ] - যদি নির্দিষ্ট মান অনির্দিষ্ট বা শূন্য হয়, তাহলে এই মানটি ফেরত দেওয়া হবে।
`getOptions()`	অবজেক্ট	এই নিয়ন্ত্রণের জন্য বিকল্প বস্তু প্রদান করে।
`getState()`	অবজেক্ট	নিয়ন্ত্রণ অবস্থা ফিরিয়ে দেয়।
`setControlType( type )`	কোনোটিই নয়	নিয়ন্ত্রণের ধরন সেট করে। কন্ট্রোলের ক্লাসের নাম ইনস্ট্যান্টিয়েট করার জন্য পাস করুন। যদি এটি একটি Google নিয়ন্ত্রণ হয়, তাহলে এটিকে `google.visualization` দিয়ে যোগ্য করবেন না। সুতরাং, উদাহরণস্বরূপ, একটি সাংখ্যিক কলামের উপর একটি রেঞ্জ স্লাইডারের জন্য, "NumberRangeFilter" এ পাস করুন।
`setControlName( name )`	কোনোটিই নয়	নিয়ন্ত্রণের জন্য একটি নির্বিচারে নাম সেট করে। এটি নিয়ন্ত্রণে কোথাও দেখানো হয় না, তবে শুধুমাত্র আপনার রেফারেন্সের জন্য।
`setContainerId( id )`	কোনোটিই নয়	নিয়ন্ত্রণের জন্য ধারণকারী DOM উপাদানের ID সেট করে।
`setOption( key , value )`	কোনোটিই নয়	একটি একক নিয়ন্ত্রণ বিকল্প মান সেট করে, যেখানে কী হল বিকল্পের নাম এবং মান হল মান। একটি বিকল্প আনসেট করতে, মানটির জন্য নাল পাস করুন। মনে রাখবেন কী একটি যোগ্য নাম হতে পারে, যেমন `'vAxis.title'` ।
`setOptions( options_obj )`	কোনোটিই নয়	একটি নিয়ন্ত্রণের জন্য একটি সম্পূর্ণ বিকল্প বস্তু সেট করে।
`setState(state_obj)`	কোনোটিই নয়	নিয়ন্ত্রণ অবস্থা সেট করে। রাজ্য সমস্ত ভেরিয়েবল সংগ্রহ করে যা নিয়ন্ত্রণ পরিচালনাকারী ব্যবহারকারী প্রভাবিত করতে পারে। উদাহরণস্বরূপ, স্লাইডারের নিম্ন এবং উচ্চ থাম্ব যে অবস্থানগুলি দখল করে তার পরিভাষায় একটি রেঞ্জ স্লাইডার অবস্থা বর্ণনা করা যেতে পারে।

ঘটনা

ControlWrapper অবজেক্ট নিম্নলিখিত ঘটনাগুলি নিক্ষেপ করে। মনে রাখবেন যে কোনো ইভেন্ট নিক্ষেপ করার আগে আপনাকে অবশ্যই ControlWrapper.draw() কল করতে হবে (অথবা নিয়ন্ত্রণ ধরে থাকা ড্যাশবোর্ড আঁকতে হবে)।

নাম	বর্ণনা	বৈশিষ্ট্য
`error`	নিয়ন্ত্রণ রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়।	আইডি, বার্তা
`ready`	নিয়ন্ত্রণ ব্যবহারকারীর মিথস্ক্রিয়া গ্রহণ করতে এবং বহিরাগত পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি নিয়ন্ত্রণের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে `draw` পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে। বিকল্পভাবে, আপনি ড্যাশবোর্ডে একটি `ready` ইভেন্টের জন্য শুনতে পারেন যেখানে নিয়ন্ত্রণ এবং কল নিয়ন্ত্রণ পদ্ধতিগুলি ইভেন্টটি চালিত হওয়ার পরেই।	কোনোটিই নয়
`statechange`	ব্যবহারকারী যখন নিয়ন্ত্রণের সাথে ইন্টারঅ্যাক্ট করে, তার অবস্থাকে প্রভাবিত করে তখন বহিস্কার করা হয়। উদাহরণস্বরূপ, যখনই আপনি একটি রেঞ্জ স্লাইডার নিয়ন্ত্রণের থাম্বগুলি সরান তখনই একটি `statechange` ইভেন্ট ফায়ার হবে৷ ইভেন্ট চালানোর পরে একটি আপডেট করা নিয়ন্ত্রণ অবস্থা পুনরুদ্ধার করতে, `ControlWrapper.getState()` কল করুন।	কোনোটিই নয়

চার্ট র‍্যাপার

ভিজ্যুয়ালাইজেশনের API রেফারেন্স বিভাগে google.visualization.ChartWrapper ডকুমেন্টেশন পড়ুন।

একটি ড্যাশবোর্ডের অংশ হিসাবে একটি ChartWrapper ব্যবহার করার সময় নিম্নলিখিত নোটগুলি প্রযোজ্য:

dataTable , query , dataSourceUrl এবং refreshInterval বৈশিষ্ট্যগুলি স্পষ্টভাবে সেট করবেন না৷ চার্ট ধারণ করা ড্যাশবোর্ড এটির প্রয়োজনীয় ডেটা খাওয়ানোর যত্ন নেয়।
ড্যাশবোর্ডে প্রদত্ত dataTable উপস্থিত সমস্ত কলামগুলির মধ্যে কোন কলামগুলি চার্টের জন্য প্রাসঙ্গিক তা ঘোষণা করতে এর view অ্যাট্রিবিউট সেট করুন, যেমনটি তৈরি নিয়ন্ত্রণ এবং চার্ট ইনস্ট্যান্সে দেখানো হয়েছে।

গ্যালারি নিয়ন্ত্রণ করে

ফিল্টারগুলি হল গ্রাফিকাল উপাদান যা লোকেরা ইন্টারেক্টিভভাবে আপনার চার্টে কোন ডেটা প্রদর্শিত হবে তা নির্বাচন করতে ব্যবহার করতে পারে। এই বিভাগটি Google চার্ট ফিল্টারগুলি বর্ণনা করে: CategoryFilter , ChartRangeFilter , DateRangeFilter , NumberRangeFilter , এবং StringFilter ৷

আপনি ControlWrapper.setControlType() এ একটি প্যারামিটার হিসাবে তাদের যেকোনো একটি ব্যবহার করতে পারেন।

দ্রষ্টব্য: বিকল্পগুলি বর্ণনা করার ক্ষেত্রে, নেস্টেড অবজেক্টের বৈশিষ্ট্যগুলি বর্ণনা করতে ডট নোটেশন ব্যবহার করা হয়। উদাহরণ স্বরূপ 'ui.label' নামের একটি অপশন একটি অপশন অবজেক্টে var options = {"ui": {"label": "someLabelValue"} };

সংজ্ঞায়িত মানগুলির একটি সেটের মধ্যে এক বা একাধিক বেছে নেওয়ার জন্য একটি চয়নকারী৷

অবস্থা

নাম	টাইপ	ডিফল্ট	বর্ণনা
নির্বাচিত মান	অবজেক্টের অ্যারে বা আদিম প্রকার	কোনটি	বর্তমানে নির্বাচিত মানগুলির সেট৷ নির্বাচিত মানগুলি অবশ্যই `values` বিকল্প দ্বারা সংজ্ঞায়িত সামগ্রিক নির্বাচনযোগ্য মানগুলির একটি সেট হতে হবে (যেকোন বহিরাগতকে উপেক্ষা করা হবে)। যদি `CategoryFilter` একাধিক পছন্দের অনুমতি না দেয়, তবে কেবলমাত্র অ্যারের প্রথম মানটি বজায় রাখা হয়।

অপশন

নাম	টাইপ	ডিফল্ট	বর্ণনা
ফিল্টার কলাম ইনডেক্স	সংখ্যা	কোনটি	ডেটা টেবিলের কলামটি ফিল্টারটি কাজ করবে। এই বিকল্পটি বা `filterColumnLabel` প্রদান করা বাধ্যতামূলক। উভয় উপস্থিত থাকলে, এই বিকল্পটি অগ্রাধিকার নেয়।
ফিল্টার কলাম লেবেল	স্ট্রিং	কোনটি	ফিল্টারটি যে কলামে কাজ করবে তার লেবেল। এই বিকল্পটি প্রদান করা বাধ্যতামূলক অথবা `filterColumnIndex` . উভয় উপস্থিত থাকলে, `filterColumnIndex` অগ্রাধিকার নেয়।
মান	অ্যারে	স্বয়ংক্রিয়	পছন্দ করার জন্য মানগুলির তালিকা। অবজেক্টের একটি অ্যারে ব্যবহার করা হলে, ব্যবহারকারীর কাছে প্রদর্শনের জন্য তাদের একটি উপযুক্ত `toString()` উপস্থাপনা থাকা উচিত। যদি নাল বা অনির্ধারিত হয়, মানগুলির তালিকাটি স্বয়ংক্রিয়ভাবে ডেটাটেবিল কলামে উপস্থিত মানগুলি থেকে গণনা করা হবে যা এই নিয়ন্ত্রণে কাজ করে৷
ফরম্যাটেড ভ্যালু ব্যবহার করুন	বুলিয়ান	মিথ্যা	DataTable কলাম থেকে স্বয়ংক্রিয়ভাবে নির্বাচনযোগ্য মানগুলির তালিকা তৈরি করার সময় এই ফিল্টারটি কাজ করে, প্রকৃত কক্ষের মান বা তাদের ফর্ম্যাট করা মানগুলি ব্যবহার করতে হবে কিনা।
ui	অবজেক্ট	খালি	নিয়ন্ত্রণের UI এর বিভিন্ন দিক কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে: {label: 'Metric', labelSeparator: ':'}
ui.caption	স্ট্রিং	'একটি মান চয়ন করুন...'	কোনো আইটেম নির্বাচন না হলে মান বাছাইকারী উইজেটের ভিতরে প্রদর্শিত ক্যাপশন।
ui.sortValues	বুলিয়ান	সত্য	মানগুলি থেকে বেছে নেওয়া উচিত কিনা তা সাজানো উচিত।
ui.selectedValuesLayout	স্ট্রিং	'একপাশে'	একাধিক নির্বাচন অনুমোদিত হলে নির্বাচিত মানগুলি কীভাবে প্রদর্শন করবেন। সম্ভাব্য মান হল: `'aside'` : নির্বাচিত মানগুলি মান চয়নকারী উইজেটের পাশে একটি একক পাঠ্য লাইনে প্রদর্শিত হবে, `'below'` : নির্বাচিত মানগুলি উইজেটের নীচে একটি একক পাঠ্য লাইনে প্রদর্শিত হবে, `'belowWrapping'` : `below` মতই, কিন্তু যে এন্ট্রিগুলি পিকারে ফিট করতে পারে না সেগুলি একটি নতুন লাইনে মোড়ানো হবে, `'belowStacked'` : নির্বাচিত মানগুলি উইজেটের নীচে একটি কলামে প্রদর্শিত হবে।
ui.allowNone	বুলিয়ান	সত্য	ব্যবহারকারীকে কোনো মান বেছে নেওয়ার অনুমতি দেওয়া হয় কি না। `false` হলে ব্যবহারকারীকে উপলব্ধ মান থেকে অন্তত একটি মান বেছে নিতে হবে। কন্ট্রোল ইনিশিয়ালাইজেশনের সময়, যদি অপশনটি `false` সেট করা থাকে এবং `selectedValues` স্টেট দেওয়া না থাকে, তাহলে উপলব্ধ মানগুলি থেকে প্রথম মানটি স্বয়ংক্রিয়ভাবে সিলেট হয়ে যায়।
ui.allow একাধিক	বুলিয়ান	সত্য	শুধুমাত্র একটির পরিবর্তে একাধিক মান নির্বাচন করা যায় কিনা।
ui.allowটাইপিং	বুলিয়ান	সত্য	ব্যবহারকারীকে সম্ভাব্য পছন্দের তালিকা সংকুচিত করার জন্য একটি পাঠ্য ক্ষেত্রে টাইপ করার অনুমতি দেওয়া হয়েছে কিনা (একটি স্বয়ংসম্পূর্ণতার মাধ্যমে), বা না।
ui.label	স্ট্রিং	স্বয়ংক্রিয়	বিভাগ বাছাইকারীর পাশে প্রদর্শিত লেবেল। অনির্দিষ্ট থাকলে, নিয়ন্ত্রণ যে কলামে কাজ করে তার লেবেলটি ব্যবহার করা হবে।
ui.labelSeparator	স্ট্রিং	কোনটি	লেবেলের সাথে একটি বিভাজক স্ট্রিং যুক্ত করা হয়েছে, লেবেলটিকে বিভাগ চয়নকারী থেকে দৃশ্যমানভাবে আলাদা করতে।
ui.label স্ট্যাকিং	স্ট্রিং	'অনুভূমিক'	লেবেল উপরে (উল্লম্ব স্ট্যাকিং) বা পাশে (অনুভূমিক স্ট্যাকিং) বিভাগ বাছাইকারী প্রদর্শন করা উচিত কিনা। হয় `'vertical'` বা `'horizontal'` ব্যবহার করুন।
ui.cssClass	স্ট্রিং	'google-visualization-controls-categoryfilter'	কাস্টম স্টাইলিংয়ের জন্য নিয়ন্ত্রণে বরাদ্দ করার জন্য CSS ক্লাস।

চার্টরেঞ্জ ফিল্টার

চার্টের অবিচ্ছিন্ন অক্ষ থেকে মানগুলির একটি পরিসীমা নির্বাচন করতে একটি চার্টের উপরে দুটি থাম্ব সহ একটি স্লাইডার।

অবস্থা

নাম	টাইপ	ডিফল্ট	বর্ণনা
range.start	সংখ্যা, তারিখ, তারিখ সময় বা দিনের সময়	পরিসীমা শুরু মান	নির্বাচিত ব্যাপ্তির শুরু, অন্তর্ভুক্ত।
range.end	সংখ্যা, তারিখ, তারিখ সময় বা দিনের সময়	পরিসীমা শেষ মান	নির্বাচিত পরিসরের শেষ, অন্তর্ভুক্ত।

অপশন

নাম	টাইপ	ডিফল্ট	বর্ণনা
ফিল্টার কলাম ইনডেক্স	সংখ্যা	কোনটি	ফিল্টারটি যে ডেটা টেবিলে কাজ করে তার কলামের সূচী। এই বিকল্পটি বা `filterColumnLabel` প্রদান করা বাধ্যতামূলক। উভয় উপস্থিত থাকলে, এই বিকল্পটি অগ্রাধিকার নেয়। মনে রাখবেন যে নিয়ন্ত্রণের ভিতরে টানা চার্টের অবিচ্ছিন্ন অক্ষে মূর্ত হওয়া একটি ডোমেন কলামের একটি সূচক নির্দিষ্ট করাই বোধগম্য।
ফিল্টার কলাম লেবেল	স্ট্রিং	কোনটি	ফিল্টারটি যে ডেটা টেবিলে কাজ করে তার কলামের লেবেল। এই বিকল্পটি প্রদান করা বাধ্যতামূলক অথবা `filterColumnIndex` . উভয় উপস্থিত থাকলে, `filterColumnIndex` অগ্রাধিকার নেয়। মনে রাখবেন যে নিয়ন্ত্রণের ভিতরে অঙ্কিত চার্টের ক্রমাগত অক্ষে মূর্ত হওয়া একটি ডোমেন কলামের একটি লেবেল নির্দিষ্ট করাই বোধগম্য।
ui	অবজেক্ট	খালি	নিয়ন্ত্রণের UI এর বিভিন্ন দিক কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্যগুলি নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে: {chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType	স্ট্রিং	'কম্বোচার্ট'	নিয়ন্ত্রণের ভিতরে আঁকা চার্টের ধরন। এর মধ্যে একটি হতে পারে: 'এরিয়াচার্ট', 'লাইনচার্ট', 'কম্বোচার্ট' বা 'স্ক্যাটারচার্ট'।
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	বুলিয়ান	মিথ্যা	সত্য হলে, সীমার থাম্বগুলি নিকটতম ডেটা পয়েন্টগুলিতে স্ন্যাপ করা হয়। এই ক্ষেত্রে, `getState()` দ্বারা প্রত্যাবর্তিত পরিসরের শেষ বিন্দুগুলি অগত্যা ডেটা টেবিলের মান।

ঘটনা

ControlWrapper ইভেন্টে সংযোজন:

নাম	বর্ণনা	বৈশিষ্ট্য
`statechange`	প্রতিটি কন্ট্রোল র‍্যাপারের জন্য নথিভুক্ত হিসাবে একই, শুধুমাত্র একটি অতিরিক্ত বুলিয়ান প্রপার্টি আছে, `inProgress` , যা নির্দিষ্ট করে যে রাজ্যটি বর্তমানে পরিবর্তিত হচ্ছে কিনা (হয় একটি থাম্বস বা পরিসর নিজেই টেনে আনা হচ্ছে)।	চলমান

তারিখ রেঞ্জ ফিল্টার

তারিখের ব্যাপ্তি নির্বাচন করার জন্য একটি দ্বৈত-মূল্যবান স্লাইডার।

নিচের সারণীতে কোন সারি দেখানো হয়েছে তা পরিবর্তন করতে স্লাইডারটি সরানোর চেষ্টা করুন।

অবস্থা

নাম	টাইপ	ডিফল্ট	বর্ণনা
নিম্নমূল্য	সংখ্যা	কোনটি	নির্বাচিত ব্যাপ্তির নিম্ন ব্যাপ্তি, অন্তর্ভুক্ত।
উচ্চমূল্য	সংখ্যা	কোনটি	নির্বাচিত ব্যাপ্তির উচ্চতর ব্যাপ্তি, অন্তর্ভুক্ত।
কম থাম্বঅ্যাটমিনিমাম	বুলিয়ান	কোনটি	স্লাইডারের নীচের থাম্বটি ন্যূনতম অনুমোদিত পরিসরে লক করা আছে কিনা। সেট করা হলে, `lowValue` ওভাররাইড করে।
highThumbAtMacimum	বুলিয়ান	কোনটি	স্লাইডারের উচ্চতর থাম্বটি সর্বাধিক অনুমোদিত পরিসরে লক করা আছে কিনা। সেট করা হলে, `highValue` ওভাররাইড করে।

অপশন

নাম	টাইপ	ডিফল্ট	বর্ণনা
ফিল্টার কলাম ইনডেক্স	সংখ্যা	কোনটি	ডেটা টেবিলের কলামটি ফিল্টারটি কাজ করবে। এই বিকল্পটি বা `filterColumnLabel` প্রদান করা বাধ্যতামূলক। উভয় উপস্থিত থাকলে, এই বিকল্পটি অগ্রাধিকার নেয়। টাইপ `number` সহ একটি কলামে নির্দেশ করতে হবে।
ফিল্টার কলাম লেবেল	স্ট্রিং	কোনটি	ফিল্টারটি যে কলামে কাজ করবে তার লেবেল। এই বিকল্পটি প্রদান করা বাধ্যতামূলক অথবা `filterColumnIndex` . উভয় উপস্থিত থাকলে, `filterColumnIndex` অগ্রাধিকার নেয়। টাইপ `number` সহ একটি কলামে নির্দেশ করতে হবে।
minValue	তারিখ	স্বয়ংক্রিয়	নিম্ন ব্যাপ্তির ব্যাপ্তির জন্য ন্যূনতম অনুমোদিত মান। যদি অনির্ধারিত হয়, মানটি নিয়ন্ত্রণ দ্বারা পরিচালিত ডেটা টেবিলের বিষয়বস্তু থেকে অনুমান করা হবে।
maxValue	তারিখ	স্বয়ংক্রিয়	ব্যাপ্তির উচ্চতর ব্যাপ্তির জন্য সর্বাধিক অনুমোদিত মান। যদি অনির্ধারিত হয়, মানটি নিয়ন্ত্রণ দ্বারা পরিচালিত ডেটা টেবিলের বিষয়বস্তু থেকে অনুমান করা হবে।
ui	অবজেক্ট	খালি	নিয়ন্ত্রণের UI এর বিভিন্ন দিক কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে: {label: 'Age', labelSeparator: ':'}
ui.format	অবজেক্ট	কোনটি	কিভাবে একটি স্ট্রিং হিসাবে তারিখ উপস্থাপন. কোনো বৈধ তারিখ বিন্যাস গ্রহণ করে।
ui.step	স্ট্রিং	দিন	স্লাইডার থাম্বস টেনে আনার সময় ন্যূনতম সম্ভাব্য পরিবর্তন: "দিন" পর্যন্ত যেকোনো সময়ের একক হতে পারে। ("মাস" এবং "বছর" এখনও সমর্থিত নয়৷)
ui.ticks	সংখ্যা	স্বয়ংক্রিয়	টিক সংখ্যা (রেঞ্জ বারে নির্দিষ্ট অবস্থান) স্লাইডার থাম্বস দখল করতে পারে।
ui.unitIncrement	স্ট্রিং	'1'	ব্যাপ্তির একক বৃদ্ধির জন্য বৃদ্ধির পরিমাণ। একটি ইউনিট বৃদ্ধি একটি স্লাইডার থাম্ব সরাতে তীর কী ব্যবহার করার সমতুল্য।
ui.blockIncrement	সংখ্যা	10	ব্যাপ্তির সীমার ব্লক বৃদ্ধির জন্য বৃদ্ধির পরিমাণ। একটি ব্লক বৃদ্ধি স্লাইডার থাম্বস সরাতে pgUp এবং pgDown কী ব্যবহার করার সমতুল্য।
ui.showRangeValues	বুলিয়ান	সত্য	নির্বাচিত পরিসরের বিস্তৃতি প্রদর্শনকারী স্লাইডারের পাশে লেবেল থাকবে কিনা।
ui.orientation	স্ট্রিং	'অনুভূমিক'	স্লাইডার অভিযোজন. হয় `'horizontal'` বা `'vertical'` ।
ui.label	স্ট্রিং	স্বয়ংক্রিয়	স্লাইডারের পাশে প্রদর্শিত লেবেল। অনির্দিষ্ট থাকলে, নিয়ন্ত্রণ যে কলামে কাজ করে তার লেবেলটি ব্যবহার করা হবে।
ui.labelSeparator	স্ট্রিং	কোনটি	স্লাইডার থেকে লেবেলটিকে দৃশ্যত আলাদা করতে লেবেলে একটি বিভাজক স্ট্রিং যুক্ত করা হয়েছে।
ui.label স্ট্যাকিং	স্ট্রিং	'অনুভূমিক'	লেবেল স্লাইডারের উপরে (উল্লম্ব স্ট্যাকিং) বা পাশে (অনুভূমিক স্ট্যাকিং) প্রদর্শন করা উচিত কিনা। হয় `'vertical'` বা `'horizontal'` ব্যবহার করুন।
ui.cssClass	স্ট্রিং	'google-visualization-controls-rangefilter'	কাস্টম স্টাইলিংয়ের জন্য নিয়ন্ত্রণে বরাদ্দ করার জন্য CSS ক্লাস।

নম্বর রেঞ্জ ফিল্টার

সাংখ্যিক মানের ব্যাপ্তি নির্বাচন করার জন্য একটি দ্বৈত-মূল্যবান স্লাইডার।

অবস্থা

নাম	টাইপ	ডিফল্ট	বর্ণনা
নিম্নমূল্য	সংখ্যা	কোনটি	নির্বাচিত ব্যাপ্তির নিম্ন ব্যাপ্তি, অন্তর্ভুক্ত।
উচ্চমূল্য	সংখ্যা	কোনটি	নির্বাচিত ব্যাপ্তির উচ্চতর ব্যাপ্তি, অন্তর্ভুক্ত।
কম থাম্বঅ্যাটমিনিমাম	বুলিয়ান	কোনটি	স্লাইডারের নীচের থাম্বটি ন্যূনতম অনুমোদিত পরিসরে লক করা আছে কিনা। সেট করা হলে, `lowValue` ওভাররাইড করে।
highThumbAtMacimum	বুলিয়ান	কোনটি	স্লাইডারের উচ্চতর থাম্বটি সর্বাধিক অনুমোদিত পরিসরে লক করা আছে কিনা। সেট করা হলে, `highValue` ওভাররাইড করে।

অপশন

নাম	টাইপ	ডিফল্ট	বর্ণনা
ফিল্টার কলাম ইনডেক্স	সংখ্যা	কোনটি	ডেটা টেবিলের কলামটি ফিল্টারটি কাজ করবে। এই বিকল্পটি বা `filterColumnLabel` প্রদান করা বাধ্যতামূলক। উভয় উপস্থিত থাকলে, এই বিকল্পটি অগ্রাধিকার নেয়। টাইপ `number` সহ একটি কলামে নির্দেশ করতে হবে।
ফিল্টার কলাম লেবেল	স্ট্রিং	কোনটি	ফিল্টারটি যে কলামে কাজ করবে তার লেবেল। এই বিকল্পটি প্রদান করা বাধ্যতামূলক অথবা `filterColumnIndex` . উভয় উপস্থিত থাকলে, `filterColumnIndex` অগ্রাধিকার নেয়। টাইপ `number` সহ একটি কলামে নির্দেশ করতে হবে।
minValue	সংখ্যা	স্বয়ংক্রিয়	নিম্ন ব্যাপ্তির ব্যাপ্তির জন্য ন্যূনতম অনুমোদিত মান। যদি অনির্ধারিত হয়, মানটি নিয়ন্ত্রণ দ্বারা পরিচালিত ডেটা টেবিলের বিষয়বস্তু থেকে অনুমান করা হবে।
maxValue	সংখ্যা	স্বয়ংক্রিয়	ব্যাপ্তির উচ্চতর ব্যাপ্তির জন্য সর্বাধিক অনুমোদিত মান। যদি অনির্ধারিত হয়, মানটি নিয়ন্ত্রণ দ্বারা পরিচালিত ডেটা টেবিলের বিষয়বস্তু থেকে অনুমান করা হবে।
ui	অবজেক্ট	খালি	নিয়ন্ত্রণের UI এর বিভিন্ন দিক কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্যগুলি নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে: {label: 'Age', labelSeparator: ':'}
ui.format	অবজেক্ট	কোনটি	সংখ্যাটিকে স্ট্রিং হিসাবে কীভাবে উপস্থাপন করবেন। যেকোনো বৈধ নম্বর বিন্যাস গ্রহণ করে।
ui.step	সংখ্যা	1, অথবা সংজ্ঞায়িত হলে `ticks` থেকে গণনা করা হয়	স্লাইডার থাম্বস টেনে আনার সময় ন্যূনতম সম্ভাব্য পরিবর্তন।
ui.ticks	সংখ্যা	স্বয়ংক্রিয়	টিক সংখ্যা (রেঞ্জ বারে নির্দিষ্ট অবস্থান) স্লাইডার থাম্বস দখল করতে পারে।
ui.unitIncrement	সংখ্যা	1	ব্যাপ্তির একক বৃদ্ধির জন্য বৃদ্ধির পরিমাণ। একটি ইউনিট বৃদ্ধি একটি স্লাইডার থাম্ব সরাতে তীর কী ব্যবহার করার সমতুল্য।
ui.blockIncrement	সংখ্যা	10	ব্যাপ্তির সীমার ব্লক বৃদ্ধির জন্য বৃদ্ধির পরিমাণ। একটি ব্লক বৃদ্ধি স্লাইডার থাম্বস সরাতে pgUp এবং pgDown কী ব্যবহার করার সমতুল্য।
ui.showRangeValues	বুলিয়ান	সত্য	নির্বাচিত পরিসরের বিস্তৃতি প্রদর্শনকারী স্লাইডারের পাশে লেবেল থাকবে কিনা।
ui.orientation	স্ট্রিং	'অনুভূমিক'	স্লাইডার অভিযোজন. হয় `'horizontal'` বা `'vertical'` ।
ui.label	স্ট্রিং	স্বয়ংক্রিয়	স্লাইডারের পাশে প্রদর্শিত লেবেল। অনির্দিষ্ট থাকলে, নিয়ন্ত্রণ যে কলামে কাজ করে তার লেবেলটি ব্যবহার করা হবে।
ui.labelSeparator	স্ট্রিং	কোনটি	স্লাইডার থেকে লেবেলটিকে দৃশ্যত আলাদা করতে লেবেলে একটি বিভাজক স্ট্রিং যুক্ত করা হয়েছে।
ui.label স্ট্যাকিং	স্ট্রিং	'অনুভূমিক'	লেবেল স্লাইডারের উপরে (উল্লম্ব স্ট্যাকিং) বা পাশে (অনুভূমিক স্ট্যাকিং) প্রদর্শন করা উচিত কিনা। হয় `'vertical'` বা `'horizontal'` ব্যবহার করুন।
ui.cssClass	স্ট্রিং	'google-visualization-controls-rangefilter'	কাস্টম স্টাইলিংয়ের জন্য নিয়ন্ত্রণে বরাদ্দ করার জন্য CSS ক্লাস।

স্ট্রিংফিল্টার

একটি সাধারণ পাঠ্য ইনপুট ক্ষেত্র যা আপনাকে স্ট্রিং ম্যাচিংয়ের মাধ্যমে ডেটা ফিল্টার করতে দেয়। এটি প্রতিটি কী চাপার পরে আপডেট হয়: নীচের টেবিলটি জন এবং জেসিকার কাছে সংকীর্ণ করতে j টাইপ করার চেষ্টা করুন৷

অবস্থা

নাম	টাইপ	ডিফল্ট	বর্ণনা
মান	স্ট্রিং বা বস্তু	কোনটি	বর্তমানে কন্ট্রোল ইনপুট ক্ষেত্রে প্রবেশ করা পাঠ্য।

অপশন

নাম	টাইপ	ডিফল্ট	বর্ণনা
ফিল্টার কলাম ইনডেক্স	সংখ্যা	কোনটি	ডেটা টেবিলের কলামটি ফিল্টারটি কাজ করবে। এই বিকল্পটি বা `filterColumnLabel` প্রদান করা বাধ্যতামূলক। উভয় উপস্থিত থাকলে, এই বিকল্পটি অগ্রাধিকার নেয়।
ফিল্টার কলাম লেবেল	স্ট্রিং	কোনটি	ফিল্টারটি যে কলামে কাজ করবে তার লেবেল। এই বিকল্পটি প্রদান করা বাধ্যতামূলক অথবা `filterColumnIndex` . উভয় উপস্থিত থাকলে, `filterColumnIndex` অগ্রাধিকার নেয়।
ম্যাচ টাইপ	স্ট্রিং	'উপসর্গ'	নিয়ন্ত্রণটি শুধুমাত্র সঠিক মানগুলির সাথে মেলে কিনা ( `'exact'` ), মানের শুরু থেকে শুরু হওয়া উপসর্গ ( `'prefix'` ) বা যেকোনো সাবস্ট্রিং ( `'any'` )।
কেস সংবেদনশীল	বুলিয়ান	মিথ্যা	ম্যাচিং কেস সংবেদনশীল হওয়া উচিত কি না।
ফরম্যাটেড ভ্যালু ব্যবহার করুন	বুলিয়ান	মিথ্যা	কন্ট্রোলটি সেল ফরম্যাট করা মানের সাথে মেলে নাকি আসল মানের সাথে মেলে।
ui	অবজেক্ট	খালি	নিয়ন্ত্রণের UI এর বিভিন্ন দিক কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে: {label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger	বুলিয়ান	সত্য	কোন কী চাপলে নিয়ন্ত্রণটি মেলে কিনা বা শুধুমাত্র যখন ইনপুট ক্ষেত্র 'পরিবর্তন' হয় (ফোকাস হারানো বা এন্টার কী টিপে)।
ui.label	স্ট্রিং	স্বয়ংক্রিয়	ইনপুট ক্ষেত্রের পাশে প্রদর্শিত লেবেল। অনির্দিষ্ট থাকলে, নিয়ন্ত্রণ যে কলামে কাজ করে তার লেবেলটি ব্যবহার করা হবে।
ui.labelSeparator	স্ট্রিং	কোনটি	ইনপুট ক্ষেত্র থেকে লেবেলটিকে দৃশ্যত আলাদা করতে লেবেলে একটি বিভাজক স্ট্রিং যুক্ত করা হয়েছে।
ui.label স্ট্যাকিং	স্ট্রিং	'অনুভূমিক'	লেবেলটি উপরে (উল্লম্ব স্ট্যাকিং) বা ইনপুট ক্ষেত্রের পাশে (অনুভূমিক স্ট্যাকিং) প্রদর্শন করা উচিত। হয় `'vertical'` বা `'horizontal'` ব্যবহার করুন।
ui.cssclass	স্ট্রিং	'গুগল-ভিজ্যুয়ালাইজেশন-নিয়ন্ত্রণ-স্ট্রিং ফিল্টার'	কাস্টম স্টাইলিংয়ের জন্য নিয়ন্ত্রণকে বরাদ্দ করার জন্য সিএসএস ক্লাস।

নিয়ন্ত্রণ এবং ড্যাশবোর্ড

ওভারভিউ

কন্ট্রোল এবং ড্যাশবোর্ড ব্যবহার করে

1. আপনার ড্যাশবোর্ডের জন্য একটি HTML কঙ্কাল তৈরি করুন৷

2. আপনার লাইব্রেরি লোড করুন

3. আপনার ডেটা প্রস্তুত করুন

4. একটি ড্যাশবোর্ড ইনস্ট্যান্স তৈরি করুন

5. নিয়ন্ত্রণ এবং চার্ট উদাহরণ তৈরি করুন

6. নির্ভরতা স্থাপন করুন

7. আপনার ড্যাশবোর্ড আঁকুন

8. ড্রয়ের পর প্রোগ্রামেটিক পরিবর্তন

API রেফারেন্স

ড্যাশবোর্ড

কনস্ট্রাক্টর

পদ্ধতি

ঘটনা

কন্ট্রোল র‍্যাপার

কনস্ট্রাক্টর

পদ্ধতি

ঘটনা

চার্ট র‍্যাপার

গ্যালারি নিয়ন্ত্রণ করে

ক্যাটাগরি ফিল্টার

অবস্থা

অপশন

চার্টরেঞ্জ ফিল্টার

অবস্থা

অপশন

ঘটনা

তারিখ রেঞ্জ ফিল্টার

অবস্থা

অপশন

নম্বর রেঞ্জ ফিল্টার

অবস্থা

অপশন

স্ট্রিংফিল্টার

অবস্থা

অপশন