Combo Charts এবং Dual-Axis Charts গাইড ও নোট

Big Data and Analytics - গুগল চার্ট (Google Charts)

350

Google Charts এ Combo Charts এবং Dual-Axis Charts তৈরি করার মাধ্যমে একাধিক ডেটা সিরিজ বা ভেরিয়েবলের তুলনা করা সম্ভব। এই ধরনের চার্টগুলো একসঙ্গে বিভিন্ন ধরনের চার্ট দেখানোর মাধ্যমে একাধিক ডেটা সেটের বিশ্লেষণ করা সহজ করে তোলে।

Combo Charts (কম্বো চার্ট)

Combo Chart হলো এমন একটি চার্ট, যা একাধিক চার্টের সংমিশ্রণ হতে পারে। উদাহরণস্বরূপ, আপনি একটি বার চার্ট এবং একটি লাইন চার্ট একসঙ্গে ব্যবহার করতে পারেন একই চার্টে। এটি মূলত তখন ব্যবহৃত হয় যখন একাধিক ডেটা সিরিজকে একসঙ্গে তুলনা করার প্রয়োজন হয়, তবে তাদের স্কেল বা ইউনিট ভিন্ন হতে পারে।

Combo Chart তৈরির উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Combo Chart Example</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart', 'combochart']});
    google.charts.setOnLoadCallback(drawComboChart);

    function drawComboChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Profit'],
        ['2019', 1000, 400],
        ['2020', 1170, 460],
        ['2021', 660, 1120],
        ['2022', 1030, 540]
      ]);

      var options = {
        title: 'Company Performance',
        vAxis: {title: 'Sales'},
        hAxis: {title: 'Year'},
        seriesType: 'bars',  // বার চার্ট
        series: {
          1: {type: 'line'}  // দ্বিতীয় সিরিজ (Profit) হবে লাইন চার্ট
        }
      };

      var chart = new google.visualization.ComboChart(document.getElementById('combo_chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <h2>Combo Chart Example</h2>
  <div id="combo_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

এই কোডটি একটি Combo Chart তৈরি করবে, যেখানে প্রথম সিরিজ (Sales) বার চার্ট হিসেবে এবং দ্বিতীয় সিরিজ (Profit) লাইন চার্ট হিসেবে প্রদর্শিত হবে।

Combo Chart এর কাস্টমাইজেশন:

seriesType: আপনি কোন সিরিজটিকে কোন চার্ট টাইপে রূপান্তর করবেন, সেটি এখানে নির্ধারণ করা হয়। উদাহরণস্বরূপ, 'bars' (বার চার্ট), 'line' (লাইন চার্ট), 'scatter' (স্ক্যাটার চার্ট) ইত্যাদি।
series: প্রতিটি সিরিজের জন্য কাস্টমাইজেশন করতে ব্যবহার হয়। আপনি চাইলে বিভিন্ন সিরিজের জন্য ভিন্ন ভিন্ন স্টাইল এবং টাইপ নির্ধারণ করতে পারেন।

Dual-Axis Charts (ডুয়াল-অ্যাক্সিস চার্ট)

Dual-Axis Chart হল একটি বিশেষ ধরনের চার্ট, যেখানে দুটি ভিন্ন অক্ষ (এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিস) থাকে। এটি বিশেষভাবে ব্যবহৃত হয় যখন দুটি ভিন্ন ধরনের ডেটা সেটের মধ্যে সম্পর্ক দেখানো প্রয়োজন হয়, এবং তাদের এক্সপানশন বা স্কেল আলাদা হয়।

উদাহরণস্বরূপ, একটি ডুয়াল-অ্যাক্সিস চার্টে আপনি Sales এবং Profit প্রদর্শন করতে পারেন, যেখানে Sales এর পরিমাণ বড় হলে একটি এক্স-অ্যাক্সিসে, এবং Profit এর পরিমাণ ছোট হলে অন্য এক্স-অ্যাক্সিসে দেখানো হবে।

Dual-Axis Chart তৈরির উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dual-Axis Chart Example</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawDualAxisChart);

    function drawDualAxisChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Year');
      data.addColumn('number', 'Sales');
      data.addColumn('number', 'Profit');

      data.addRows([
        [2019, 1000, 400],
        [2020, 1170, 460],
        [2021, 660, 1120],
        [2022, 1030, 540]
      ]);

      var options = {
        title: 'Company Performance',
        vAxis: {title: 'Sales'},
        vAxis: {title: 'Profit', format: 'currency'},
        hAxis: {title: 'Year'},
        seriesType: 'bars',
        series: {
          1: {type: 'line', targetAxisIndex: 1}
        }
      };

      var chart = new google.visualization.ComboChart(document.getElementById('dual_axis_chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <h2>Dual-Axis Chart Example</h2>
  <div id="dual_axis_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

এখানে:

seriesType: এই অপশনে বার এবং লাইন চার্ট টাইপ ব্যবহার করা হয়েছে।
targetAxisIndex: এখানে দ্বিতীয় সিরিজের জন্য targetAxisIndex: 1 ব্যবহার করা হয়েছে, যার মাধ্যমে দ্বিতীয় অক্ষের জন্য উপযুক্ত স্কেলটি প্রদর্শিত হবে।

Dual-Axis Chart এর কাস্টমাইজেশন:

vAxis: এটি Y-axis এর সেটিংস। আপনি দুটি ভিন্ন স্কেল বা অক্ষ কাস্টমাইজ করতে পারবেন।
hAxis: X-axis এর কাস্টমাইজেশন।
targetAxisIndex: প্রতিটি সিরিজের জন্য কোন অক্ষ ব্যবহার করা হবে তা নির্ধারণ করে।

Combo এবং Dual-Axis Chart এর মধ্যে পার্থক্য

Combo Chart: একাধিক চার্ট টাইপ (যেমন, বার এবং লাইন) একসাথে এক চার্টে উপস্থাপন করে।
Dual-Axis Chart: একে একাধিক ভিন্ন অক্ষ (X এবং Y) ব্যবহার করা হয়, যাতে বিভিন্ন স্কেল বা পরিসীমা থাকে।

উপসংহার

Google Charts এর Combo Charts এবং Dual-Axis Charts আপনাকে একাধিক ডেটা সিরিজ বা ভেরিয়েবলকে একসাথে তুলনা এবং বিশ্লেষণ করার সুযোগ দেয়। Combo Chart আপনাকে একাধিক চার্ট টাইপ একসাথে প্রদর্শন করতে সাহায্য করে, এবং Dual-Axis Chart দুইটি ভিন্ন অক্ষ ব্যবহার করে একাধিক ডেটা সেটের সম্পর্ক এবং পরিবর্তন দেখাতে সক্ষম। এই দুটি চার্ট ব্যবহার করে আপনি আপনার ডেটাকে আরও কার্যকরভাবে এবং বিস্তারিতভাবে উপস্থাপন করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Combo Chart এর মাধ্যমে Multiple Data Series Visualize করা

304

Combo Chart গুগল চার্টের একটি শক্তিশালী ফিচার, যা একসাথে একাধিক ডেটা সিরিজের (Multiple Data Series) ভিজ্যুয়ালাইজেশন করতে সাহায্য করে। এটি বিভিন্ন ধরনের চার্টের সমন্বয়ে তৈরি হয়, যেমন Bar Chart এবং Line Chart। Combo Chart আপনাকে একাধিক ডেটা সেগমেন্ট বা ক্যাটেগরির মধ্যে তুলনা করতে সক্ষম করে।

Combo Chart এর সুবিধা

একাধিক ডেটা সিরিজ একসাথে প্রদর্শন করতে সহায়ক।
বিভিন্ন ধরনের চার্ট একত্রে ব্যবহারের মাধ্যমে ডেটার উপর বিস্তারিত বিশ্লেষণ করা যায়।
তুলনা বা সম্পর্ক বিশ্লেষণের জন্য খুবই কার্যকরী।

Combo Chart তৈরি করার জন্য প্রয়োজনীয় ধাপ

Combo Chart তৈরি করতে আপনি দুটি প্রধান ধাপ অনুসরণ করবেন:

ডেটা প্রস্তুত করা।
Combo Chart এর জন্য সেটিংস এবং অপশন কাস্টমাইজ করা।

নিচে Combo Chart তৈরির একটি উদাহরণ দেওয়া হলো।

Combo Chart তৈরি করার উদাহরণ

ধরা যাক, আমাদের কাছে একটি কোম্পানির Sales এবং Profit ডেটা রয়েছে এবং আমরা চাই একে Bar Chart এবং Line Chart এর মাধ্যমে প্রদর্শন করতে।

উদাহরণ কোড:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Combo Chart Example</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart', 'combo']});
    google.charts.setOnLoadCallback(drawChart);

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

      var options = {
        title: 'Company Performance',
        vAxis: {title: 'Amount (in USD)'},
        hAxis: {title: 'Year'},
        seriesType: 'bars',  // Default type for the first series is 'bar'
        series: {
          1: {type: 'line'},  // The second series will be a line chart (Profit)
          2: {type: 'line', lineWidth: 3, pointSize: 5}  // The third series will also be a line chart (Expenses)
        },
        legend: { position: 'bottom' }
      };

      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <h2>Google Combo Chart Example</h2>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

কোডের ব্যাখ্যা

ডেটা প্রস্তুত করা: আমরা google.visualization.arrayToDataTable ফাংশন ব্যবহার করে ডেটা প্রস্তুত করেছি। এখানে তিনটি ভিন্ন ডেটা সিরিজ রয়েছে:
- Sales (Bar Chart হিসেবে প্রদর্শিত হবে)
- Profit (Line Chart হিসেবে প্রদর্শিত হবে)
- Expenses (Line Chart হিসেবে প্রদর্শিত হবে)
Combo Chart অপশন কাস্টমাইজ করা:
- seriesType: প্রথম সিরিজটি Bar Chart হিসেবে এবং পরবর্তী দুটি সিরিজ Line Chart হিসেবে প্রদর্শিত হবে।
- series: এখানে আমরা সিরিজের ধরন কাস্টমাইজ করেছি। প্রথম সিরিজটি Bar হিসেবে এবং দ্বিতীয় ও তৃতীয় সিরিজটি Line হিসেবে প্রদর্শিত হবে।
- lineWidth এবং pointSize: দ্বিতীয় ও তৃতীয় সিরিজের লাইনের প্রস্থ এবং পয়েন্ট সাইজ কাস্টমাইজ করা হয়েছে।
Legend: লেজেন্ডের অবস্থান bottom এ নির্ধারণ করা হয়েছে যাতে প্রতিটি ডেটা সিরিজের সাথে সম্পর্কিত চিহ্ন দেখানো যায়।

Combo Chart এর আরো কাস্টমাইজেশন

Axis Labels:
- আপনি X-axis এবং Y-axis এর লেবেল কাস্টমাইজ করতে পারেন যেমন আগের উদাহরণে করা হয়েছিল।
Data Point Customization:
- আপনি Line Chart এর পয়েন্ট সাইজ এবং স্টাইল কাস্টমাইজ করতে পারেন, যেমন pointSize: 5 এর মাধ্যমে পয়েন্টের সাইজ পরিবর্তন করা হয়েছে।
Colors and Styles:
- আপনি সিরিজের রঙ এবং স্টাইলও কাস্টমাইজ করতে পারেন, যেমন: color: 'red' দিয়ে লাইনের রঙ পরিবর্তন করা।

উপসংহার

Google Charts এর Combo Chart একটি শক্তিশালী টুল যা আপনাকে একাধিক ডেটা সিরিজ একসাথে প্রদর্শন করতে সাহায্য করে। এটি বিভিন্ন ধরনের চার্টকে একত্রে ব্যবহার করে ডেটার উপর আরও বিস্তারিত বিশ্লেষণ এবং তুলনা করতে সহায়ক। Combo Chart এর মাধ্যমে আপনি Bar Chart এবং Line Chart একসাথে উপস্থাপন করতে পারেন, যা ব্যবহারকারীদের জন্য ডেটা বোঝা সহজ করে তোলে।

Content added By

Rezwan Siddiki Tamim

Line এবং Bar Combo Chart তৈরি করা

285

Google Charts এ আপনি Line Chart এবং Bar Chart এর কম্বিনেশনও তৈরি করতে পারেন, যা ডেটার বিভিন্ন দৃষ্টিকোণ একসাথে উপস্থাপন করতে সাহায্য করে। এই কম্বিনেশন চার্টে কিছু সিরিজ লাইন আকারে এবং কিছু সিরিজ বার আকারে প্রদর্শিত হয়। এটি বিভিন্ন ডেটার মধ্যে তুলনা করার জন্য খুবই কার্যকর।

এখানে আমরা Line and Bar Combo Chart তৈরি করার প্রক্রিয়া দেখবো।

Line এবং Bar Combo Chart তৈরি করার উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line and Bar Combo Chart Example</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    // Google Charts লাইব্রেরি লোড করা
    google.charts.load('current', {'packages':['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // ডেটা প্রস্তুত করা
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2019', 1000, 400],
        ['2020', 1170, 460],
        ['2021', 660, 1120],
        ['2022', 1030, 540]
      ]);

      // অপশন কাস্টমাইজেশন
      var options = {
        title: 'Company Performance',
        chartArea: {width: '50%'},  // চার্টের আঞ্চলিক আকার নির্ধারণ
        hAxis: {
          title: 'Year',
          minValue: 0
        },
        vAxis: {
          title: 'Amount (in USD)'
        },
        seriesType: 'bars',  // বারের জন্য সিরিজ টাইপ নির্ধারণ
        series: {
          0: {type: 'line'},  // প্রথম সিরিজের জন্য লাইন
          1: {type: 'bars'}   // দ্বিতীয় সিরিজের জন্য বার
        }
      };

      // কম্বিনেশন চার্ট ড্র করা
      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <h2>Line and Bar Combo Chart</h2>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

কোড ব্যাখ্যা:

লাইব্রেরি লোডিং:
```
google.charts.load('current', {'packages':['corechart', 'bar']});
```
এখানে আমরা corechart এবং bar প্যাকেজ লোড করছি। corechart প্যাকেজ লাইন এবং বার চার্ট তৈরি করার জন্য প্রয়োজনীয় ফাংশনality প্রদান করে।
ডেটা তৈরি:
```
var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses'],
  ['2019', 1000, 400],
  ['2020', 1170, 460],
  ['2021', 660, 1120],
  ['2022', 1030, 540]
]);
```
এখানে আমরা একটি 2D Array ব্যবহার করে ডেটা তৈরি করেছি, যেখানে প্রথম কলামটি Year এবং পরবর্তী কলামগুলো হলো Sales এবং Expenses।
চার্টের অপশন কাস্টমাইজেশন:
```
var options = {
  title: 'Company Performance',
  chartArea: {width: '50%'},
  hAxis: {
    title: 'Year',
    minValue: 0
  },
  vAxis: {
    title: 'Amount (in USD)'
  },
  seriesType: 'bars', // Default to bar chart
  series: {
    0: {type: 'line'},  // First series as line
    1: {type: 'bars'}   // Second series as bar
  }
};
```
এখানে, seriesType নির্ধারণ করা হয়েছে bars, যা ডিফল্টভাবে বার চার্ট তৈরি করবে। তবে, আমরা series অপশনে 0 সিরিজকে লাইন এবং 1 সিরিজকে বার চার্ট হিসেবে নির্ধারণ করেছি।
চার্ট রেন্ডারিং:
```
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
```
এখানে, আমরা ComboChart কনস্ট্রাক্টর ব্যবহার করছি এবং সেটি chart_div id তে রেন্ডার করা হচ্ছে।

উপসংহার

এই উদাহরণে, আমরা Line and Bar Combo Chart তৈরি করেছি যেখানে Sales ডেটা লাইন চার্ট হিসেবে এবং Expenses ডেটা বার চার্ট হিসেবে প্রদর্শিত হচ্ছে। Google Charts এর ComboChart ব্যবহার করে আপনি একাধিক চার্ট টাইপ একত্রে ব্যবহার করতে পারেন এবং ডেটা ভিজ্যুয়ালাইজেশনের বিভিন্ন দৃষ্টিকোণ প্রদর্শন করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Dual-Axis Chart এর ব্যবহার এবং প্রয়োজনীয়তা

289

Dual-Axis Chart হল এমন একটি চার্ট যা একে অপরের সাথে সম্পর্কিত দুটি ভিন্ন ডেটাসেটের ভিজ্যুয়ালাইজেশন প্রদর্শন করে। এটি সাধারণত ব্যবহার করা হয় যখন দুটি ভিন্ন ধরনের ডেটার মধ্যে সম্পর্ক বা তুলনা করা দরকার, যেমন সেলস ডেটা এবং তাপমাত্রা, বা স্টক প্রাইস এবং বাজারের ভলিউম। Google Charts এ Dual-Axis Chart তৈরি করার মাধ্যমে আপনি দুটি ভিন্ন অক্ষের (এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিস) মাধ্যমে ডেটা ভিজ্যুয়ালাইজ করতে পারেন।

Dual-Axis Chart এর প্রয়োজনীয়তা

বিভিন্ন ডেটা ভেরিয়েবলের তুলনা: যখন আপনার কাছে দুটি ভিন্ন ভেরিয়েবল থাকে যা একটি নির্দিষ্ট সময় বা ক্যাটাগরির সাথে সম্পর্কিত, তখন Dual-Axis Chart ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, একটি কোম্পানির সেলস এবং মার্কেটিং বাজেটের তুলনা।
বিভিন্ন স্কেলে ডেটা উপস্থাপন: কখনও কখনও, দুটি ডেটা সেটের মানের স্কেল এতটাই ভিন্ন হতে পারে যে একক অক্ষ ব্যবহার করলে তুলনা করা কঠিন হয়ে পড়ে। যেমন একটি ডেটা সেট সেলসের সংখ্যা হতে পারে, যা হাজারে পরিমাপ করা হয়, এবং আরেকটি ডেটা সেট তাপমাত্রা, যা সেলসিয়াসে পরিমাপ করা হয়। এমন অবস্থায়, Dual-Axis Chart খুবই কার্যকরী।
ডেটার মধ্যে সম্পর্ক দেখানো: Dual-Axis Chart দুটি ভিন্ন ডেটাসেটের মধ্যে সম্পর্ক এবং কোরিলেশন দেখাতে সাহায্য করে। যেমন একটি ডেটা সেট প্রাথমিকভাবে বৃদ্ধি পাওয়ার সাথে সাথে আরেকটি ডেটা সেট কীভাবে তার সাথে সম্পর্কিত হচ্ছে তা পর্যবেক্ষণ করা।
ভিজ্যুয়াল কনসোলিডেশন: একই চার্টে দুটি ভিন্ন ডেটা প্রদর্শন করা হলে, আপনার ডেটার ভিজ্যুয়াল উপস্থাপনা আরও সংগঠিত এবং স্পষ্ট হতে পারে।

Google Charts এ Dual-Axis Chart তৈরি করা

Google Charts ব্যবহার করে একটি Dual-Axis Chart তৈরি করা খুবই সহজ। এখানে আমরা একটি Combo Chart ব্যবহার করব, যা দুটি ভিন্ন ধরনের ডেটা সেট এবং দুইটি ভিন্ন অক্ষের মাধ্যমে ডেটা প্রদর্শন করতে সক্ষম।

উদাহরণ: Dual-Axis Chart

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dual-Axis Chart Example</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart', 'combo']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Temperature'],
        ['2019', 1000, 30],
        ['2020', 1170, 32],
        ['2021', 660, 35],
        ['2022', 1030, 33]
      ]);

      var options = {
        title: 'Sales and Temperature Over Time',
        vAxis: {title: 'Sales', format: 'currency'},
        vAxis: {title: 'Temperature (°C)', format: 'number'},
        hAxis: {title: 'Year'},
        seriesType: 'line',  // লাইন চার্টে ডেটা দেখানোর জন্য
        series: {
          0: {targetAxisIndex: 0}, // প্রথম ডেটা সেট (Sales) এর জন্য প্রথম অক্ষ
          1: {targetAxisIndex: 1}  // দ্বিতীয় ডেটা সেট (Temperature) এর জন্য দ্বিতীয় অক্ষ
        },
        width: 900,
        height: 500
      };

      var chart = new google.visualization.ComboChart(document.getElementById('dual_axis_chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <h2>Dual-Axis Chart Example</h2>
  <div id="dual_axis_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

ব্যাখ্যা:

Data Preparation: ডেটা তৈরি করার জন্য google.visualization.arrayToDataTable() ফাংশন ব্যবহার করা হয়েছে। এখানে দুটি ভিন্ন ডেটা সেট রয়েছে - সেলস এবং তাপমাত্রা (Temperature)।
Options:
- vAxis এবং hAxis: এক্স-অ্যাক্সিস (Year) এবং ওয়াই-অ্যাক্সিসের শিরোনাম এবং টাইটেল সেট করা হয়েছে।
- seriesType: এই অপশন দ্বারা আপনি কি ধরনের চার্ট ব্যবহার করবেন তা নির্ধারণ করা হয়। এখানে এটি লাইন চার্ট (line) হিসেবে সেট করা হয়েছে।
- series: এখানে দুইটি ভিন্ন অক্ষ নির্ধারণ করা হয়েছে - একটি সেলস ডেটার জন্য এবং অন্যটি তাপমাত্রা ডেটার জন্য।
Rendering: google.visualization.ComboChart ফাংশন ব্যবহার করে Combo Chart তৈরি করা হয়েছে এবং এটি HTML ডকুমেন্টের একটি div এলিমেন্টে প্রদর্শিত হয়েছে।

Dual-Axis Chart এর সুবিধা

সহজ তুলনা: দুটি ভিন্ন ডেটা সেটের তুলনা করা সহজ হয়ে যায়।
স্পষ্ট উপস্থাপনা: বিভিন্ন স্কেলে ডেটা প্রদর্শনের জন্য Dual-Axis Chart কার্যকরী, যেখানে একক অক্ষ ব্যবহার করা সম্ভব নয়।
ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন: Google Charts এর মাধ্যমে ইন্টারঅ্যাকটিভ চার্ট তৈরি করা যায়, যা ব্যবহারকারীদের ডেটার সঙ্গে ইন্টারঅ্যাক্ট করতে দেয়।
দ্বৈত অক্ষের সাপোর্ট: দুটি ভিন্ন অক্ষ ব্যবহার করে, আপনি ভিন্ন ধরনের ডেটা আরো স্পষ্টভাবে প্রদর্শন করতে পারেন।

উপসংহার

Dual-Axis Chart হল একটি গুরুত্বপূর্ণ টুল যা দুটি সম্পর্কিত ডেটা সেটের তুলনা এবং বিশ্লেষণে সহায়ক। Google Charts-এ এই ধরনের চার্ট তৈরি করা খুবই সহজ এবং এর মাধ্যমে আপনি ডেটাকে আরও কার্যকরী এবং তুলনামূলকভাবে উপস্থাপন করতে পারেন। বিভিন্ন স্কেলে ডেটা তুলনা এবং সম্পর্কের বিশ্লেষণে এটি অত্যন্ত কার্যকরী।

Content added By

Rezwan Siddiki Tamim

Chart Types এর সংমিশ্রণ এবং Customization

340

Google Charts আপনাকে বিভিন্ন ধরনের চার্ট তৈরি করার সুযোগ দেয় এবং একই সময়ে বিভিন্ন Chart Types এর সংমিশ্রণ ও কাস্টমাইজেশন করার সুবিধা প্রদান করে। এটি ডেটাকে আরও আকর্ষণীয় এবং অর্থপূর্ণ উপস্থাপনার জন্য সাহায্য করে, যেখানে একাধিক চার্ট একই পৃষ্ঠায় একসাথে ব্যবহার করা যেতে পারে। এখানে আমরা দেখব কিভাবে Chart Types এর সংমিশ্রণ এবং Customization করা যায়।

১. Chart Types এর সংমিশ্রণ (Combination of Chart Types)

Google Charts আপনাকে একাধিক চার্ট টিপের সংমিশ্রণ করতে দেয়, যেমন বার চার্ট এবং লাইন চার্ট একসাথে, বা পাই চার্টের সাথে অন্যান্য চার্টের সংমিশ্রণ। এই সংমিশ্রণগুলি ডেটা বিশ্লেষণকে আরও গভীরভাবে উপস্থাপন করতে সহায়ক।

সংমিশ্রিত চার্ট তৈরি করার জন্য:

আপনি একাধিক series ব্যবহার করতে পারেন, যেখানে প্রতিটি সিরিজের জন্য আলাদা ধরনের চার্ট নির্ধারণ করা হয়।
Combo Chart ব্যবহার করে বার, লাইন, এবং অন্যান্য চার্টের সংমিশ্রণ করা সম্ভব।

উদাহরণ: বার চার্ট এবং লাইন চার্টের সংমিশ্রণ

var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses'],
  ['2020', 1000, 400],
  ['2021', 1170, 460],
  ['2022', 660, 1120],
  ['2023', 1030, 540]
]);

var options = {
  title: 'Company Performance',
  hAxis: {title: 'Year'},
  vAxis: {title: 'Amount (in USD)'},
  seriesType: 'bars',  // Default series type: Bar Chart
  series: {
    1: {type: 'line'}   // Second series (Expenses) as Line Chart
  },
  legend: { position: 'top' }
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);

এখানে ComboChart ব্যবহার করে Sales (বার চার্ট) এবং Expenses (লাইন চার্ট) কে একসাথে প্রদর্শন করা হয়েছে। seriesType দিয়ে প্রথম সিরিজের জন্য bar এবং দ্বিতীয় সিরিজের জন্য line নির্ধারণ করা হয়েছে।

২. Customization (কাস্টমাইজেশন)

Google Charts এ চার্ট কাস্টমাইজ করার অনেক সুযোগ রয়েছে। আপনি চার্টের লেআউট, রঙ, লাইন স্টাইল, লেবেল, অক্ষ এবং অন্যান্য ভিজ্যুয়াল উপাদান কাস্টমাইজ করতে পারেন।

কিছু গুরুত্বপূর্ণ কাস্টমাইজেশন অপশন:

Title (শিরোনাম): চার্টের শিরোনাম কাস্টমাইজ করা।
Axis Titles (অক্ষের শিরোনাম): এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিসের শিরোনাম।
Legend (লেজেন্ড): চার্টের লেজেন্ডের অবস্থান এবং স্টাইল কাস্টমাইজ করা।
Line and Point Styles (লাইন এবং পয়েন্ট স্টাইল): লাইন চওড়া, রং, পয়েন্ট আকার এবং শেপ কাস্টমাইজ করা।

উদাহরণ:

var options = {
  title: 'Sales vs Expenses',
  hAxis: { 
    title: 'Year', 
    titleTextStyle: { color: 'blue' }  // এক্স-অ্যাক্সিসের শিরোনামের রং
  },
  vAxis: { 
    title: 'Amount (in USD)', 
    titleTextStyle: { color: 'green' }  // ওয়াই-অ্যাক্সিসের শিরোনামের রং
  },
  legend: { position: 'top', textStyle: { color: 'red', fontSize: 14 } },  // লেজেন্ডের কাস্টমাইজেশন
  series: {
    0: { color: '#ff5733', lineWidth: 4, pointSize: 10 }, // প্রথম সিরিজের কাস্টমাইজেশন
    1: { color: '#33c1ff', lineWidth: 2, pointSize: 6 }  // দ্বিতীয় সিরিজের কাস্টমাইজেশন
  }
};

এখানে আমরা:

হরিজেন্টাল (এক্স-অ্যাক্সিস) ও ভারটিকাল (ওয়াই-অ্যাক্সিস) শিরোনামের রং পরিবর্তন করেছি।
লেজেন্ডের অবস্থান এবং স্টাইল কাস্টমাইজ করেছি।
প্রতিটি সিরিজের জন্য রং, লাইন ওয়েডথ এবং পয়েন্টের আকার কাস্টমাইজ করেছি।

৩. একমাত্র চার্টের মধ্যে একাধিক সিরিজ (Multiple Series in a Single Chart)

একই চার্টে একাধিক সিরিজ (যেমন, Sales, Expenses, Profit) উপস্থাপন করতে Google Charts ব্যবহার করা যেতে পারে। প্রতিটি সিরিজের জন্য আলাদা চার্ট টাইপ, রং এবং অন্যান্য ভিজ্যুয়াল উপাদান কাস্টমাইজ করা সম্ভব।

উদাহরণ:

var options = {
  title: 'Company Performance',
  hAxis: { title: 'Year' },
  vAxis: { title: 'Amount (in USD)' },
  seriesType: 'line',  // Default type for all series: Line Chart
  series: {
    0: { type: 'line', color: 'green' },  // Sales as line chart
    1: { type: 'bar', color: 'blue' },    // Expenses as bar chart
    2: { type: 'area', color: 'orange' }  // Profit as area chart
  }
};

এখানে Sales, Expenses, এবং Profit সিরিজ গুলিকে আলাদা আলাদা চার্ট টাইপের মাধ্যমে উপস্থাপন করা হয়েছে:

Sales - লাইন চার্ট
Expenses - বার চার্ট
Profit - এরিয়া চার্ট

৪. চালু করা বিভিন্ন চার্ট টাইপের সংমিশ্রণ (Combining Different Chart Types)

এছাড়া আপনি বার চার্ট, লাইন চার্ট এবং পাই চার্ট একত্রে ব্যবহার করতে পারেন একটি ড্যাশবোর্ড বা রিপোর্টে ডেটার ভিন্ন ভিন্ন দিক দেখানোর জন্য।

উদাহরণ:

var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses', 'Profit'],
  ['2020', 1000, 400, 600],
  ['2021', 1170, 460, 710],
  ['2022', 660, 1120, 80],
  ['2023', 1030, 540, 490]
]);

var options = {
  title: 'Company Performance',
  hAxis: { title: 'Year' },
  vAxis: { title: 'Amount (in USD)' },
  seriesType: 'bars',  // Default type for all series: Bar Chart
  series: {
    0: { type: 'line' }, // Sales as line chart
    1: { type: 'bar' },  // Expenses as bar chart
    2: { type: 'area' }  // Profit as area chart
  }
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);

এখানে ComboChart ব্যবহার করে তিনটি আলাদা সিরিজের সংমিশ্রণ তৈরি করা হয়েছে, যেখানে Sales লাইন চার্ট, Expenses বার চার্ট এবং Profit এরিয়া চার্ট হিসাবে প্রদর্শিত হচ্ছে।

উপসংহার

Google Charts এর Chart Types এর সংমিশ্রণ এবং Customization এর মাধ্যমে আপনি আপনার ডেটাকে আরও আকর্ষণীয় ও বিস্তারিতভাবে উপস্থাপন করতে পারবেন। এটি ডেটার বিভিন্ন দিক দেখতে সাহায্য করে এবং একটি পৃষ্ঠায় একাধিক তথ্য উপস্থাপন করতে সক্ষম। আপনি যখন Chart Types সংমিশ্রণ করেন, তখন এটি ডেটার বিশ্লেষণ ও উপস্থাপনার জন্য আরও কার্যকরী হয়ে ওঠে।

Content added By

Rezwan Siddiki Tamim

Google Charts এর পরিচিতি Google Charts এর সেটআপ এবং প্রথম চার্ট তৈরি Google Charts এর মৌলিক Components Basic Charts তৈরি করা Chart Customization এবং Options

Combo Charts এবং Dual-Axis Charts গাইড ও নোট

Combo Charts (কম্বো চার্ট)

Combo Chart তৈরির উদাহরণ:

Combo Chart এর কাস্টমাইজেশন:

Dual-Axis Charts (ডুয়াল-অ্যাক্সিস চার্ট)

Dual-Axis Chart তৈরির উদাহরণ:

Dual-Axis Chart এর কাস্টমাইজেশন:

Combo এবং Dual-Axis Chart এর মধ্যে পার্থক্য

উপসংহার

Combo Chart এর মাধ্যমে Multiple Data Series Visualize করা

Combo Chart এর সুবিধা

Combo Chart তৈরি করার জন্য প্রয়োজনীয় ধাপ

Combo Chart তৈরি করার উদাহরণ

উদাহরণ কোড:

কোডের ব্যাখ্যা

Combo Chart এর আরো কাস্টমাইজেশন

উপসংহার

Line এবং Bar Combo Chart তৈরি করা

Line এবং Bar Combo Chart তৈরি করার উদাহরণ

কোড ব্যাখ্যা:

উপসংহার

Dual-Axis Chart এর ব্যবহার এবং প্রয়োজনীয়তা

Dual-Axis Chart এর প্রয়োজনীয়তা

Google Charts এ Dual-Axis Chart তৈরি করা

উদাহরণ: Dual-Axis Chart

ব্যাখ্যা:

Dual-Axis Chart এর সুবিধা

উপসংহার

Chart Types এর সংমিশ্রণ এবং Customization

১. Chart Types এর সংমিশ্রণ (Combination of Chart Types)

সংমিশ্রিত চার্ট তৈরি করার জন্য:

২. Customization (কাস্টমাইজেশন)

কিছু গুরুত্বপূর্ণ কাস্টমাইজেশন অপশন:

৩. একমাত্র চার্টের মধ্যে একাধিক সিরিজ (Multiple Series in a Single Chart)

৪. চালু করা বিভিন্ন চার্ট টাইপের সংমিশ্রণ (Combining Different Chart Types)

উপসংহার

Promotion

Satt AI

Hi, আমি SATT AI!

Combo Charts এবং Dual-Axis Charts গাইড ও নোট

Combo Charts (কম্বো চার্ট)

Combo Chart তৈরির উদাহরণ:

Combo Chart এর কাস্টমাইজেশন:

Dual-Axis Charts (ডুয়াল-অ্যাক্সিস চার্ট)

Dual-Axis Chart তৈরির উদাহরণ:

Dual-Axis Chart এর কাস্টমাইজেশন:

Combo এবং Dual-Axis Chart এর মধ্যে পার্থক্য

উপসংহার

Combo Chart এর মাধ্যমে Multiple Data Series Visualize করা

Combo Chart এর সুবিধা

Combo Chart তৈরি করার জন্য প্রয়োজনীয় ধাপ

Combo Chart তৈরি করার উদাহরণ

উদাহরণ কোড:

কোডের ব্যাখ্যা

Combo Chart এর আরো কাস্টমাইজেশন

উপসংহার

Line এবং Bar Combo Chart তৈরি করা

Line এবং Bar Combo Chart তৈরি করার উদাহরণ

কোড ব্যাখ্যা:

উপসংহার

Dual-Axis Chart এর ব্যবহার এবং প্রয়োজনীয়তা

Dual-Axis Chart এর প্রয়োজনীয়তা

Google Charts এ Dual-Axis Chart তৈরি করা

উদাহরণ: Dual-Axis Chart

ব্যাখ্যা:

Dual-Axis Chart এর সুবিধা

উপসংহার

Chart Types এর সংমিশ্রণ এবং Customization

১. Chart Types এর সংমিশ্রণ (Combination of Chart Types)

সংমিশ্রিত চার্ট তৈরি করার জন্য:

২. Customization (কাস্টমাইজেশন)

কিছু গুরুত্বপূর্ণ কাস্টমাইজেশন অপশন:

৩. একমাত্র চার্টের মধ্যে একাধিক সিরিজ (Multiple Series in a Single Chart)

৪. চালু করা বিভিন্ন চার্ট টাইপের সংমিশ্রণ (Combining Different Chart Types)

উপসংহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!