Big Data and Analytics Pie এবং Donut Charts তৈরি করা গাইড ও নোট

344

Google Charts একটি শক্তিশালী টুল, যা বিভিন্ন ধরনের চার্ট তৈরি করতে সাহায্য করে। Pie Chart এবং Donut Chart হল জনপ্রিয় চার্টের ধরন, যা সাধারণত ডেটার ভাগ বা পদ্ধতি ভিজ্যুয়ালাইজ করতে ব্যবহৃত হয়। Google Charts-এ Pie Chart এবং Donut Chart তৈরি করা সহজ এবং ইন্টারঅ্যাকটিভ হতে পারে।

Pie Chart তৈরি করা

Pie Chart একটি সার্কুলার চার্ট যা ডেটার ভাগ বা শতাংশ দেখাতে ব্যবহৃত হয়। এটি বিভিন্ন বিভাগের পার্সেন্টেজ বা অংশ দেখানোর জন্য অত্যন্ত কার্যকর।

উদাহরণ: Pie Chart

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Pie 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', 'pie']});

    // কলব্যাক ফাংশন
    google.charts.setOnLoadCallback(drawChart);

    // Pie Chart তৈরি করার ফাংশন
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Amount'],
        ['Food', 45],
        ['Rent', 25],
        ['Utilities', 15],
        ['Entertainment', 10],
        ['Others', 5]
      ]);

      var options = {
        title: 'Monthly Expenses Distribution',
        is3D: true  // 3D Pie Chart
      };

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

ব্যাখ্যা:

Data: এখানে google.visualization.arrayToDataTable() ব্যবহার করে ডেটা নির্ধারণ করা হয়েছে। প্রথম কলামটি বিভাগ (Category), এবং দ্বিতীয় কলামটি মান (Amount)।
Options: is3D: true অপশন ব্যবহার করে চার্টটিকে 3D আকারে তৈরি করা হয়েছে।
Rendering: google.visualization.PieChart() ফাংশন ব্যবহার করে চার্টটি রেন্ডার করা হয়েছে, এবং এটি HTML এর একটি <div> ট্যাগে প্রদর্শিত হবে।

Donut Chart তৈরি করা

Donut Chart হল একটি Pie Chart এর একটি পরিবর্তিত রূপ, যা মাঝখানে ফাঁকা রেখে প্রদর্শন করা হয়। এটি Pie Chart এর মতোই কাজ করে, তবে এতে একটি কেন্দ্রীয় ফাঁকা অংশ থাকে যা অনেক সময় একটি অতিরিক্ত ডেটা প্রদর্শনের জন্য ব্যবহার করা হয়।

উদাহরণ: Donut Chart

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Donut 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', 'pie']});

    // কলব্যাক ফাংশন
    google.charts.setOnLoadCallback(drawChart);

    // Donut Chart তৈরি করার ফাংশন
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Amount'],
        ['Food', 45],
        ['Rent', 25],
        ['Utilities', 15],
        ['Entertainment', 10],
        ['Others', 5]
      ]);

      var options = {
        title: 'Monthly Expenses Distribution',
        pieHole: 0.4  // Donut Chart তৈরির জন্য pieHole ব্যবহার করা হয়
      };

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

ব্যাখ্যা:

Data: google.visualization.arrayToDataTable() ব্যবহার করে ডেটা প্রস্তুত করা হয়েছে, যেখানে বিভাগ এবং মান উল্লেখ করা হয়েছে।
Options: pieHole: 0.4 অপশন ব্যবহার করে Pie Chart এর মাঝখানে একটি ফাঁকা অংশ তৈরি করা হয়েছে, যা Donut Chart তৈরি করে।
Rendering: google.visualization.PieChart() ফাংশন ব্যবহার করে চার্টটি রেন্ডার করা হয়েছে এবং এটি <div id="donutchart"> এ প্রদর্শিত হবে।

Pie এবং Donut Chart এর মধ্যে পার্থক্য

Pie Chart: এটি একটি সাধারণ গোলাকার চার্ট যেখানে পুরো ডেটার অংশগুলি সেকশনে বিভক্ত থাকে।
Donut Chart: এটি একটি Pie Chart এর মতো, তবে এতে একটি ফাঁকা কেন্দ্র থাকে, যা সাধারণত ডিজাইন পরিবর্তন বা অতিরিক্ত ডেটার জন্য ব্যবহৃত হয়।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Pie Chart এর জন্য Data Setup এবং Customization

302

Google Charts এর Pie Chart হল একটি জনপ্রিয় চার্ট টাইপ যা ডেটার ভগ্নাংশ বা অংশবিশেষের তুলনা করতে ব্যবহৃত হয়। এটি সহজেই ডেটার ভাগ এবং শতাংশ প্রদর্শন করতে সক্ষম, যেমন মার্কেট শেয়ার, মাসিক খরচ, এবং বিভিন্ন বিভাগের অংশ।

এখানে আমরা Pie Chart তৈরি করার জন্য ডেটা সেটআপ এবং কাস্টমাইজেশন সম্পর্কে বিস্তারিত আলোচনা করব।

Pie Chart এর জন্য Data Setup

Pie Chart তৈরি করতে Google Charts এ ডেটা সঠিকভাবে সেটআপ করা প্রয়োজন। সাধারণত ডেটা arrayToDataTable() ফাংশন ব্যবহার করে প্রস্তুত করা হয়, যেখানে প্রথম কলাম হবে ক্যাটেগরি এবং দ্বিতীয় কলাম হবে প্রতিটি ক্যাটেগরির মান।

উদাহরণ: Basic Pie Chart Data Setup

google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Amount'],
    ['Food', 45],
    ['Rent', 25],
    ['Utilities', 15],
    ['Entertainment', 10],
    ['Others', 5]
  ]);

  var options = {
    title: 'Monthly Expenses Distribution'
  };

  var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
  chart.draw(data, options);
}

ব্যাখ্যা:

ডেটা: এখানে ক্যাটেগরি (যেমন 'Food', 'Rent') এবং তাদের মান (যেমন 45%, 25% ইত্যাদি) রয়েছে।
arrayToDataTable(): এই ফাংশনটি ডেটাকে গুগল চার্ট API এর জন্য সঠিক ফরম্যাটে রূপান্তর করে।

Pie Chart কাস্টমাইজেশন (Customization)

Google Charts এর Pie Chart কে কাস্টমাইজ করার অনেক উপায় রয়েছে। আপনি চার্টের শিরোনাম, রং, আকার, ৩ডি প্রভাব এবং টুলটিপ ইত্যাদি পরিবর্তন করতে পারেন।

১. Chart Title (চার্ট শিরোনাম)

চার্টের শিরোনাম কাস্টমাইজ করা যায়, যা ডেটার গুরুত্ব এবং অর্থ স্পষ্ট করতে সাহায্য করে।

var options = {
  title: 'Monthly Expenses Distribution'
};

২. 3D Effect (৩ডি প্রভাব)

পাই চার্টে ৩ডি প্রভাব যোগ করা যেতে পারে, যা চার্টকে আরো আকর্ষণীয় এবং দৃশ্যমান করে তোলে।

var options = {
  title: 'Monthly Expenses Distribution',
  is3D: true
};

৩. Slice Customization (স্লাইস কাস্টমাইজেশন)

পাই চার্টের প্রতিটি স্লাইসের রং, আকার এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করা যায়। যেমন আপনি এক বা একাধিক স্লাইসকে আলাদা করে তুলে ধরতে পারেন।

var options = {
  title: 'Monthly Expenses Distribution',
  slices: {
    0: { offset: 0.1, color: '#ff0000' }, // First slice (Food) is offset and red
    1: { offset: 0.1, color: '#00ff00' }  // Second slice (Rent) is offset and green
  }
};

৪. Legend (লেজেন্ড)

লেজেন্ডের অবস্থান পরিবর্তন করা যায়, যেমন এটি ডান, বাম, উপরের দিকে, বা নীচের দিকে থাকতে পারে।

var options = {
  title: 'Monthly Expenses Distribution',
  legend: { position: 'bottom' }
};

৫. Tooltip Customization (টুলটিপ কাস্টমাইজেশন)

পাই চার্টে টুলটিপসের মাধ্যমে স্লাইসের বিস্তারিত তথ্য প্রদর্শন করা যায়। আপনি isHtml অপশন দিয়ে HTML টুলটিপ যোগ করতে পারেন।

var options = {
  title: 'Monthly Expenses Distribution',
  tooltip: { isHtml: true }
};

৬. Pie Slice Text (পাই স্লাইস টেক্সট)

স্লাইসে টেক্সট প্রদর্শন করার জন্য pieSliceText অপশন ব্যবহার করা হয়। আপনি এখানে ‘percentage’, ‘value’, অথবা ‘none’ সেট করতে পারেন।

var options = {
  title: 'Monthly Expenses Distribution',
  pieSliceText: 'percentage'
};

৭. Chart Size (চার্টের আকার)

চার্টের আকার কাস্টমাইজ করা যায়, যেমন width এবং height অপশন দিয়ে।

var options = {
  title: 'Monthly Expenses Distribution',
  width: 600,
  height: 400
};

উদাহরণ: Full Customization সহ Pie Chart

এখানে একটি পূর্ণাঙ্গ কাস্টমাইজড Pie Chart উদাহরণ দেওয়া হল:

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

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Amount'],
        ['Food', 45],
        ['Rent', 25],
        ['Utilities', 15],
        ['Entertainment', 10],
        ['Others', 5]
      ]);

      var options = {
        title: 'Monthly Expenses Distribution',
        is3D: true,
        slices: {
          0: { offset: 0.1, color: '#ff0000' }, // Food
          1: { offset: 0.1, color: '#00ff00' }  // Rent
        },
        pieSliceText: 'percentage',
        legend: { position: 'bottom' },
        tooltip: { isHtml: true },
        width: 600,
        height: 400
      };

      var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <h2>Custom Pie Chart Example</h2>
  <div id="pie_chart" style="width: 600px; height: 400px;"></div>
</body>
</html>

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Donut Chart এর মাধ্যমে Data Visualization

290

Donut Chart একটি বিশেষ ধরনের Pie Chart যা কেন্দ্রে একটি খালি অংশ রাখে, যা দেখতে ডোনাটের মতো হয়। এটি সাধারণত ডেটার পার্সেন্টেজ ভিত্তিক অংশগুলোকে সহজভাবে উপস্থাপন করতে ব্যবহৃত হয়। Google Charts এর মাধ্যমে সহজেই Donut Chart তৈরি করা সম্ভব এবং এটি ডেটা ভিজ্যুয়ালাইজেশনের জন্য একটি কার্যকর টুল।

১. Google Charts এর মাধ্যমে Donut Chart তৈরি করা

Google Charts লাইব্রেরি ব্যবহার করে Donut Chart তৈরি করতে, আপনাকে প্রথমে Pie Chart তৈরি করার মতো সাধারণ সেটআপ করতে হবে। তারপর, Pie Chart এর pieSliceText অপশন ব্যবহার করে এটিকে Donut Chart এ রূপান্তর করা হয়।

HTML এবং JavaScript কোড উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Donut 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', 'pie']});

    // কলব্যাক ফাংশন
    google.charts.setOnLoadCallback(drawChart);

    // Donut Chart তৈরি করার ফাংশন
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Amount'],
        ['Food', 45],
        ['Rent', 25],
        ['Utilities', 15],
        ['Entertainment', 10],
        ['Others', 5]
      ]);

      var options = {
        title: 'Monthly Expenses Distribution',
        pieHole: 0.4, // এই অপশনটি ডোনাটের মাঝের অংশ খালি রাখবে
        is3D: true, // 3D প্রভাব প্রয়োগ করা
        slices: {
          0: {offset: 0.1}, // প্রথম স্লাইস (Food) এর জন্য কিছুটা সরে রাখা
        },
        pieSliceText: 'percentage', // প্রতিটি স্লাইসের পার্সেন্টেজ প্রদর্শন
      };

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

কোড ব্যাখ্যা

Google Charts লাইব্রেরি লোড করা: আমরা corechart এবং pie প্যাকেজ লোড করছি, যেগুলি Pie এবং Donut Chart তৈরি করতে সাহায্য করবে।
```
google.charts.load('current', {packages: ['corechart', 'pie']});
```
ডেটা প্রস্তুত করা: google.visualization.arrayToDataTable() ফাংশনের মাধ্যমে ডেটাকে টেবিল ফরম্যাটে তৈরি করা হয়েছে, যাতে Food, Rent, Utilities ইত্যাদি ক্যাটেগরি অনুযায়ী খরচের পরিমাণ প্রদান করা যায়।
ডোনাট চার্টের অপশন সেট করা:
- pieHole: 0.4: এই অপশনটি চার্টের মাঝখানে 40% খালি রাখে, যা ডোনাট চার্টের দৃশ্য তৈরি করে।
- is3D: true: এটি চার্টটিকে 3D প্রভাব দেয়।
- pieSliceText: 'percentage': প্রতিটি স্লাইসের পার্সেন্টেজ ডেটা প্রদর্শন করার জন্য এই অপশনটি ব্যবহার করা হয়।
চার্ট তৈরি এবং প্রদর্শন: google.visualization.PieChart() ফাংশন দিয়ে ডেটা দিয়ে ডোনাট চার্ট তৈরি করা হয় এবং এটি HTML ডকুমেন্টে প্রদর্শিত হয়।

Donut Chart কিভাবে ব্যবহার করবেন

বিভিন্ন ক্যাটেগরি দেখানো: Donut Chart সাধারণত ক্যাটেগরি ভিত্তিক ডেটা দেখানোর জন্য ব্যবহৃত হয়, যেমন মাসিক খরচ, রাজস্ব বিভাজন, বাজার শেয়ার ইত্যাদি।
ডেটা পার্সেন্টেজ ভিজ্যুয়ালাইজেশন: এটি আপনাকে একটি স্পষ্ট এবং সহজভাবে ডেটার বিভিন্ন অংশকে তুলনা করতে সাহায্য করে।
অংশবিশেষে ফোকাস: Donut Chart এর মাধ্যমে আপনি কোন বিশেষ অংশকে ফোকাস করতে পারদর্শী, যেমন স্লাইসগুলোকে আলাদা করে দেখানো।

২. কিছু অতিরিক্ত কাস্টমাইজেশন

Google Charts এ Donut Chart তৈরি করার সময় আপনি আরও কিছু কাস্টমাইজেশন করতে পারেন:

রঙ পরিবর্তন: আপনি প্রতিটি স্লাইসের রঙ কাস্টমাইজ করতে পারেন, উদাহরণস্বরূপ:

slices: {
  0: {offset: 0.1, color: 'blue'},
  1: {offset: 0.1, color: 'green'},
  2: {offset: 0.1, color: 'red'},
}

টুলটিপ কাস্টমাইজেশন: আপনি টুলটিপের কন্টেন্ট কাস্টমাইজ করতে পারেন:

tooltip: { trigger: 'selection' }

অ্যানিমেশন: অ্যানিমেশন অ্যাড করতে পারেন, যাতে চার্টটি প্রথমে কিছুটা প্রভাব দিয়ে প্রদর্শিত হয়।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Pie Chart এর জন্য Exploded এবং Sliced Techniques

278

Pie Chart হলো একটি গোলাকার গ্রাফ যা একটি ডেটাসেটের বিভিন্ন অংশের তুলনা করতে সাহায্য করে। এর মধ্যে Exploded Pie Chart এবং Sliced Pie Chart দুটি জনপ্রিয় কৌশল যা একটি নির্দিষ্ট সেগমেন্টকে আলাদা করে উপস্থাপন করে, যাতে সেটি আরও স্পষ্টভাবে দেখা যায়। Google Charts এ এগুলো তৈরি করা বেশ সহজ।

১. Exploded Pie Chart তৈরি করা

Exploded Pie Chart এমন একটি চার্ট, যেখানে একটি বা একাধিক সেগমেন্ট অন্যান্য সেগমেন্ট থেকে আলাদা করে দেখানো হয়। এটি ডেটার একটি বিশেষ অংশের দিকে ব্যবহারকারীদের দৃষ্টি আকর্ষণ করতে ব্যবহৃত হয়।

কোড উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exploded Pie 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', 'pie']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Amount'],
        ['Food', 45],
        ['Rent', 25],
        ['Utilities', 15],
        ['Entertainment', 10],
        ['Others', 5]
      ]);

      var options = {
        title: 'Monthly Expenses',
        slices: {
          0: {offset: 0.1},  // Exploding the "Food" slice
          1: {offset: 0.1}   // Exploding the "Rent" slice
        }
      };

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

ব্যাখ্যা:

স্লাইস অপশন (Slices option): এখানে slices অবজেক্টের মাধ্যমে offset প্রোপার্টি ব্যবহার করে "Food" এবং "Rent" সেগমেন্টগুলো আলাদা করে উপস্থাপন করা হয়েছে। offset: 0.1 মানে সেগমেন্টটি পিজের মধ্যে 10% বেরিয়ে আসবে।
Exploded effect: আপনি যেকোনো সেগমেন্টকে আলাদা করে বের করে দেখতে পারেন, যা ডেটার গুরুত্ব বুঝতে সাহায্য করে।

২. Sliced Pie Chart তৈরি করা

Sliced Pie Chart এর মাধ্যমে, আপনি Pie Chart এর নির্দিষ্ট সেগমেন্টগুলিকে কাটা বা ভাগ করতে পারেন, যাতে সেগমেন্টগুলো আরও স্পষ্টভাবে প্রদর্শিত হয়। এটি Pie Chart এর বিভিন্ন অংশের অবদানকে সহজে বিশ্লেষণ করতে সাহায্য করে।

কোড উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sliced Pie 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', 'pie']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Amount'],
        ['Food', 45],
        ['Rent', 25],
        ['Utilities', 15],
        ['Entertainment', 10],
        ['Others', 5]
      ]);

      var options = {
        title: 'Monthly Expenses',
        slices: {
          2: {offset: 0.2},  // Slicing the "Utilities" slice
          3: {offset: 0.2}   // Slicing the "Entertainment" slice
        }
      };

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

ব্যাখ্যা:

Sliced effect: এখানে আমরা slices অপশন ব্যবহার করে "Utilities" এবং "Entertainment" সেগমেন্টগুলোকে স্লাইস করেছি, যা চিত্রে সেগুলোকে আলাদা এবং স্লাইসড দেখাবে।
offset: 0.2: এটি সেগমেন্টগুলোকে 20% আলাদা করে দেখানোর জন্য ব্যবহৃত হয়।

Exploded এবং Sliced Pie Chart এর মধ্যে পার্থক্য

Exploded Pie Chart: এক বা একাধিক সেগমেন্টকে আলাদা করে বের করা হয়। এটি ডেটার গুরুত্ব বা বিশেষ অংশের দিকে দৃষ্টি আকর্ষণ করার জন্য ব্যবহৃত হয়।
Sliced Pie Chart: সেগমেন্টগুলোকে স্লাইস করা হয়, যা প্রতিটি অংশের অবদান আরও স্পষ্টভাবে দেখানোর জন্য ব্যবহৃত হয়।

উপসংহার

Exploded Pie Chart এবং Sliced Pie Chart দুটি কৌশল ডেটার বিশেষ সেগমেন্ট বা অংশকে আলাদা করে প্রদর্শন করতে সাহায্য করে, যা ভিজ্যুয়ালাইজেশনে আরও স্পষ্টতা আনে। Google Charts এ এই কৌশলগুলি খুব সহজেই প্রয়োগ করা যায়, যা ডেটাকে আরও কার্যকরী এবং বোঝার সহজ করে তোলে।

Content added By

Rezwan Siddiki Tamim

Pie এবং Donut Chart এর জন্য Advanced Customization

309

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

Pie Chart এবং Donut Chart এর মধ্যে পার্থক্য

Pie Chart: একটি সাধারণ গোলাকার চার্ট যা ডেটাকে সেগমেন্টে বিভক্ত করে। এটি পুরোপুরি বৃত্তাকার থাকে।
Donut Chart: Pie Chart এর মতো, তবে এর মধ্যে একটি খালি অংশ থাকে, যা একটি বৃত্তাকার খাঁজ তৈরি করে।

১. Pie Chart এর Advanced Customization

এখানে একটি Pie Chart তৈরি করা হয়েছে, যা বিভিন্ন কাস্টমাইজেশন এবং স্টাইলিং এর মাধ্যমে দেখানো হয়েছে।

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

    function drawPieChart() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Amount'],
        ['Food', 45],
        ['Rent', 25],
        ['Utilities', 15],
        ['Entertainment', 10],
        ['Others', 5]
      ]);

      var options = {
        title: 'Monthly Expense Distribution',
        titleTextStyle: {
          color: 'darkblue',     // শিরোনামের রং
          fontSize: 20,          // ফন্ট সাইজ
          bold: true             // বোল্ড স্টাইল
        },
        slices: {
          0: {offset: 0.1, color: '#FF5733'},   // Food সেগমেন্টের জন্য কাস্টমাইজেশন
          1: {offset: 0.1, color: '#33FF57'},   // Rent সেগমেন্টের জন্য কাস্টমাইজেশন
          2: {offset: 0.1, color: '#3357FF'},   // Utilities সেগমেন্টের জন্য কাস্টমাইজেশন
        },
        pieSliceText: 'percentage',  // স্লাইসের ভিতরের টেক্সট কিভাবে দেখানো হবে (percentage, value)
        pieSliceTextStyle: {
          color: 'white',           // স্লাইস টেক্সটের রং
          fontSize: 14              // স্লাইস টেক্সটের ফন্ট সাইজ
        },
        legend: {
          position: 'labeled',      // লেজেন্ডের অবস্থান
          alignment: 'center',      // লেজেন্ডের কেন্দ্রস্থল
          textStyle: {
            color: 'green',         // লেজেন্ডের টেক্সট রং
            fontSize: 16            // লেজেন্ডের ফন্ট সাইজ
          }
        }
      };

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

কাস্টমাইজেশন বিস্তারিত

শিরোনাম কাস্টমাইজেশন: titleTextStyle এর মাধ্যমে শিরোনামের রং, সাইজ এবং স্টাইল পরিবর্তন করা হয়েছে।
স্লাইসের কাস্টমাইজেশন: slices অপশনের মাধ্যমে প্রতিটি সেগমেন্টের রং এবং অবস্থান কাস্টমাইজ করা হয়েছে।
পাই স্লাইস টেক্সট: pieSliceText এবং pieSliceTextStyle এর মাধ্যমে স্লাইসের ভিতরের টেক্সটের ফরম্যাট কাস্টমাইজ করা হয়েছে।
লেজেন্ড কাস্টমাইজেশন: legend এর মাধ্যমে লেজেন্ডের অবস্থান, সাইজ এবং রং পরিবর্তন করা হয়েছে।

২. Donut Chart এর Advanced Customization

Donut Chart মূলত Pie Chart এর মতো কাজ করে, তবে এর মধ্যে একটি খালি অংশ থাকে, যা চার্টের মধ্যবর্তী অংশে একটি বৃত্ত তৈরি করে। নিচে একটি Donut Chart তৈরি করা হয়েছে:

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

    function drawDonutChart() {
      var data = google.visualization.arrayToDataTable([
        ['Category', 'Amount'],
        ['Food', 50],
        ['Rent', 20],
        ['Utilities', 10],
        ['Entertainment', 15],
        ['Others', 5]
      ]);

      var options = {
        title: 'Monthly Expense Distribution',
        titleTextStyle: {
          color: 'purple',     // শিরোনামের রং
          fontSize: 20,        // ফন্ট সাইজ
          bold: true           // বোল্ড স্টাইল
        },
        pieSliceText: 'percentage',  // স্লাইসের ভিতরে টেক্সট (percentage, value)
        pieSliceTextStyle: {
          color: 'white',           // স্লাইস টেক্সটের রং
          fontSize: 14              // স্লাইস টেক্সটের ফন্ট সাইজ
        },
        slices: {
          0: {offset: 0.1, color: '#FF5733'},   // Food সেগমেন্টের রং
          1: {offset: 0.1, color: '#33FF57'},   // Rent সেগমেন্টের রং
          2: {offset: 0.1, color: '#3357FF'},   // Utilities সেগমেন্টের রং
        },
        pieStartAngle: 270,           // Donut Chart এর শুরুর কোণ
        pieSliceTextStyle: {          // স্লাইসের টেক্সট স্টাইল
          color: 'black',
          fontSize: 16
        },
        is3D: true,                   // 3D ভিউ অন করা
        pieSliceBorderColor: 'black', // স্লাইসের সীমানার রং
        slices: {
          0: {offset: 0.1, color: '#FF5733'}, // Food সেগমেন্টের জন্য
          1: {offset: 0.1, color: '#33FF57'}, // Rent সেগমেন্টের জন্য
          2: {offset: 0.1, color: '#3357FF'}, // Utilities সেগমেন্টের জন্য
        }
      };

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

Donut Chart কাস্টমাইজেশন বিস্তারিত:

প্রধান রং ও শিরোনাম কাস্টমাইজেশন: titleTextStyle দিয়ে শিরোনাম এবং অন্যান্য কাস্টমাইজেশন করা হয়েছে।
3D ভিউ: is3D অপশন ব্যবহার করে চার্টটিকে 3D ভিউতে রেন্ডার করা হয়েছে।
স্লাইসের কাস্টমাইজেশন: slices এবং pieSliceBorderColor ব্যবহার করে স্লাইসের রং এবং সীমানা কাস্টমাইজ করা হয়েছে।
শুরু কোণ: pieStartAngle এর মাধ্যমে ডোনাট চার্টের শুরু কোণ পরিবর্তন করা হয়েছে, যাতে এটি একটি সম্পূর্ণ গোলাকার বৃত্তের মতো প্রদর্শিত না হয়।

উপসংহার

Google Charts এর Pie Chart এবং Donut Chart এ বিভিন্ন ধরনের Advanced Customization এর মাধ্যমে আপনি নিজের চার্টকে সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। শিরোনাম, স্লাইসের রং, টুলটিপ, স্লাইসের টেক্সট, লেজেন্ড, 3D ভিউ ইত্যাদির কাস্টমাইজেশন এর মাধ্যমে আপনার চার্টকে আরও তথ্যপূর্ণ এবং আকর্ষণীয় করে তোলা যায়।

Content added By

Rezwan Siddiki Tamim

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

Big Data and Analytics Pie এবং Donut Charts তৈরি করা গাইড ও নোট

Pie Chart তৈরি করা

উদাহরণ: Pie Chart

ব্যাখ্যা:

Donut Chart তৈরি করা

উদাহরণ: Donut Chart

ব্যাখ্যা:

Pie এবং Donut Chart এর মধ্যে পার্থক্য

উপসংহার

Pie Chart এর জন্য Data Setup এবং Customization

Pie Chart এর জন্য Data Setup

উদাহরণ: Basic Pie Chart Data Setup

ব্যাখ্যা:

Pie Chart কাস্টমাইজেশন (Customization)

১. Chart Title (চার্ট শিরোনাম)

২. 3D Effect (৩ডি প্রভাব)

৩. Slice Customization (স্লাইস কাস্টমাইজেশন)

৪. Legend (লেজেন্ড)

৫. Tooltip Customization (টুলটিপ কাস্টমাইজেশন)

৬. Pie Slice Text (পাই স্লাইস টেক্সট)

৭. Chart Size (চার্টের আকার)

উদাহরণ: Full Customization সহ Pie Chart

উপসংহার

Donut Chart এর মাধ্যমে Data Visualization

১. Google Charts এর মাধ্যমে Donut Chart তৈরি করা

HTML এবং JavaScript কোড উদাহরণ

কোড ব্যাখ্যা

Donut Chart কিভাবে ব্যবহার করবেন

২. কিছু অতিরিক্ত কাস্টমাইজেশন

উপসংহার

Pie Chart এর জন্য Exploded এবং Sliced Techniques

১. Exploded Pie Chart তৈরি করা

কোড উদাহরণ:

ব্যাখ্যা:

২. Sliced Pie Chart তৈরি করা

কোড উদাহরণ:

ব্যাখ্যা:

Exploded এবং Sliced Pie Chart এর মধ্যে পার্থক্য

উপসংহার

Pie এবং Donut Chart এর জন্য Advanced Customization

Pie Chart এবং Donut Chart এর মধ্যে পার্থক্য

১. Pie Chart এর Advanced Customization

কাস্টমাইজেশন বিস্তারিত

২. Donut Chart এর Advanced Customization

Donut Chart কাস্টমাইজেশন বিস্তারিত:

উপসংহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!