Basic Charts তৈরি করা গাইড ও নোট

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

526

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

গুগল চার্ট সেটআপ

গুগল চার্ট ব্যবহার করার জন্য প্রথমে আপনাকে গুগল চার্ট লাইব্রেরি লোড করতে হবে। এটি করার জন্য, HTML ফাইলের <head> ট্যাগে নিচের কোডটি যুক্ত করুন:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

এটি লাইব্রেরিটি লোড করবে, এবং এরপর আপনি বিভিন্ন ধরণের চার্ট তৈরি করতে পারবেন।

১. বার চার্ট (Bar Chart) তৈরি করা

বার চার্ট সাধারণত তুলনামূলক ডেটা উপস্থাপন করার জন্য ব্যবহৃত হয়, যেমন বিক্রয় ডেটা, জনসংখ্যা ইত্যাদি।

উদাহরণ: বার চার্ট

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

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Population'],
        ['New York', 8175000],
        ['Los Angeles', 3792000],
        ['Chicago', 2695000],
        ['Houston', 2121000],
        ['Phoenix', 1445000]
      ]);

      var options = {
        title: 'Population of Major Cities',
        chartArea: {width: '50%'},
        hAxis: {title: 'Population', minValue: 0},
        vAxis: {title: 'City'}
      };

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

এখানে, google.visualization.arrayToDataTable() ব্যবহার করে ডেটা তৈরি করা হয়েছে এবং google.visualization.BarChart() ব্যবহার করে বার চার্ট তৈরি করা হয়েছে।

২. পাই চার্ট (Pie Chart) তৈরি করা

পাই চার্ট সাধারণত শতাংশ বা অংশের ভগ্নাংশ দেখাতে ব্যবহৃত হয়, যেমন খরচের বণ্টন, মার্কেট শেয়ার ইত্যাদি।

উদাহরণ: পাই চার্ট

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>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 Distribution',
        is3D: true
      };

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

এখানে, google.visualization.arrayToDataTable() ব্যবহার করে ডেটা তৈরি করা হয়েছে এবং google.visualization.PieChart() ব্যবহার করে পাই চার্ট তৈরি করা হয়েছে। এখানে ৩D মোডে পাই চার্ট দেখানো হয়েছে।

৩. লাইন চার্ট (Line Chart) তৈরি করা

লাইন চার্ট সাধারণত সময়ের সাথে পরিবর্তনশীল ডেটা প্রদর্শন করতে ব্যবহৃত হয়, যেমন সেলস ট্রেন্ড বা শেয়ার প্রাইসের পরিবর্তন।

উদাহরণ: লাইন চার্ট

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line 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(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2020', 1000],
        ['2021', 1170],
        ['2022', 660],
        ['2023', 1030]
      ]);

      var options = {
        title: 'Company Sales Over the Years',
        hAxis: {title: 'Year'},
        vAxis: {title: 'Sales (in USD)'},
        curveType: 'function',
        legend: { position: 'bottom' }
      };

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

এখানে, google.visualization.arrayToDataTable() ব্যবহার করে ডেটা প্রস্তুত করা হয়েছে এবং google.visualization.LineChart() ব্যবহার করে লাইন চার্ট তৈরি করা হয়েছে।

উপসংহার

এইভাবে, গুগল চার্ট ব্যবহার করে বেসিক চার্ট তৈরি করা যায়। আপনি বিভিন্ন ধরনের চার্ট যেমন বার চার্ট, পাই চার্ট এবং লাইন চার্ট ব্যবহার করে আপনার ডেটা ভিজ্যুয়ালাইজ করতে পারেন। এগুলো আপনার ওয়েবসাইটে বা অ্যাপ্লিকেশনে ডেটাকে সহজে এবং কার্যকরভাবে উপস্থাপন করতে সহায়ক হবে।

Content added By

Rezwan Siddiki Tamim

Bar, Line, এবং Pie Chart এর ব্যবহার

337

Google Charts একটি শক্তিশালী টুল যা ডেভেলপারদের বিভিন্ন ধরনের চার্ট তৈরি করতে সাহায্য করে। এই চার্টগুলো ডেটাকে সুন্দরভাবে এবং কার্যকরীভাবে উপস্থাপন করতে সহায়ক। এখানে Bar Chart, Line Chart, এবং Pie Chart এর ব্যবহার দেখানো হবে।

১. Bar Chart (বার চার্ট)

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

উদাহরণ: Bar Chart তৈরি করা

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

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Population'],
        ['New York', 8175000],
        ['Los Angeles', 3792000],
        ['Chicago', 2695000],
        ['Houston', 2121000],
        ['Phoenix', 1445000]
      ]);

      var options = {
        title: 'Population of Major Cities',
        chartArea: {width: '50%'},
        hAxis: {title: 'Population', minValue: 0},
        vAxis: {title: 'City'}
      };

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

ব্যাখ্যা:

ডেটা: শহর এবং তাদের জনসংখ্যার ডেটা।
অপশন: চার্টের শিরোনাম, এক্স এবং ওয়াই অক্ষের লেবেল এবং অন্যান্য কাস্টমাইজেশন।

২. Line Chart (লাইন চার্ট)

Line 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>Line 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(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2020', 1000],
        ['2021', 1170],
        ['2022', 660],
        ['2023', 1030]
      ]);

      var options = {
        title: 'Company Sales Over the Years',
        hAxis: {title: 'Year'},
        vAxis: {title: 'Sales (in USD)'},
        curveType: 'function',
        legend: { position: 'bottom' }
      };

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

ব্যাখ্যা:

ডেটা: বছর এবং সেলস ডেটা।
অপশন: চার্টের শিরোনাম, এক্স এবং ওয়াই অক্ষের লেবেল এবং কনফিগারেশন (যেমন, curveType গ্রাফে স্নিগ্ধতা আনতে ব্যবহৃত হয়)।

৩. 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>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 Distribution',
        is3D: true
      };

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

ব্যাখ্যা:

ডেটা: মাসিক খরচের ভাগ, যেমন খাবার, ভাড়া, বিদ্যুৎ, ইত্যাদি।
অপশন: শিরোনাম এবং ৩ডি অপশন, যা চার্টটিকে আরও আকর্ষণীয় করে তোলে।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Area এবং Column Chart তৈরি করা

344

Google Charts এর মাধ্যমে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন, যার মধ্যে Area Chart এবং Column Chart অত্যন্ত জনপ্রিয়। এই চার্টগুলো ডেটা ভিজ্যুয়ালাইজেশন এবং বিশ্লেষণের জন্য খুবই কার্যকরী। এখানে, আমরা আপনাকে Area Chart এবং Column Chart তৈরি করার পদ্ধতি দেখাবো।

১. Area Chart তৈরি করা

Area 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 Area 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', 'area']});

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

    // Area Chart তৈরি করার ফাংশন
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2020', 1000],
        ['2021', 1170],
        ['2022', 660],
        ['2023', 1030]
      ]);

      var options = {
        title: 'Company Sales Over the Years',
        hAxis: {title: 'Year'},
        vAxis: {title: 'Sales (in USD)'},
        curveType: 'function',
        legend: { position: 'bottom' }
      };

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

কোড ব্যাখ্যা

Google Charts লোড করা: google.charts.load('current', {packages: ['corechart', 'area']}); লাইনে আমরা area প্যাকেজটি লোড করেছি, যা Area Chart তৈরি করতে সহায়তা করবে।
ডেটা তৈরি: google.visualization.arrayToDataTable() এর মাধ্যমে আমরা ডেটা প্রস্তুত করেছি।
চার্টের অপশন সেট করা: options অবজেক্টের মাধ্যমে আমরা চার্টের শিরোনাম, অক্ষের টাইটেল এবং অন্যান্য স্টাইল সেট করেছি।
চার্ট তৈরি করা: google.visualization.AreaChart() ব্যবহার করে চার্টটি তৈরি এবং প্রদর্শন করা হয়েছে।

২. Column Chart তৈরি করা

Column Chart (বা Bar 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 Column 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);

    // Column Chart তৈরি করার ফাংশন
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Population'],
        ['New York', 8175000],
        ['Los Angeles', 3792000],
        ['Chicago', 2695000],
        ['Houston', 2121000],
        ['Phoenix', 1445000]
      ]);

      var options = {
        title: 'Population of Major Cities',
        chartArea: {width: '50%'},
        hAxis: {title: 'Population', minValue: 0},
        vAxis: {title: 'City'}
      };

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

কোড ব্যাখ্যা

Google Charts লোড করা: google.charts.load('current', {packages: ['corechart', 'bar']}); লাইনে আমরা bar প্যাকেজটি লোড করেছি, যা Column Chart তৈরি করতে সহায়তা করবে।
ডেটা তৈরি: google.visualization.arrayToDataTable() এর মাধ্যমে আমরা জনসংখ্যার ডেটা প্রস্তুত করেছি।
চার্টের অপশন সেট করা: options অবজেক্টের মাধ্যমে আমরা চার্টের শিরোনাম, অক্ষের টাইটেল এবং অন্যান্য কাস্টমাইজেশন সেট করেছি।
চার্ট তৈরি করা: google.visualization.ColumnChart() ব্যবহার করে চার্টটি তৈরি এবং প্রদর্শন করা হয়েছে।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Stacked Bar এবং Stacked Column Chart এর প্রয়োগ

273

Stacked Bar Chart এবং Stacked Column Chart দুটি জনপ্রিয় চার্ট টাইপ যা একাধিক ক্যাটেগরির মধ্যে তুলনা প্রদর্শন করতে ব্যবহৃত হয়। এদের মধ্যে Stacked Bar Chart অনুভূমিক (horizontal) আকারে এবং Stacked Column Chart উল্লম্ব (vertical) আকারে ডেটা প্রদর্শন করে।

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

১. Stacked Bar Chart

Stacked Bar Chart একাধিক ডেটা সিরিজকে অনুভূমিকভাবে স্তরবদ্ধ করে উপস্থাপন করে। এটি বিভিন্ন বিভাগ এবং উপাদানগুলির তুলনা করতে সাহায্য করে, যাতে প্রতিটি বিভাগের অবদান স্পষ্টভাবে দৃশ্যমান হয়।

কোড উদাহরণ:

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

    function drawStackedBarChart() {
      var data = google.visualization.arrayToDataTable([
        ['City', '2015', '2016', '2017'],
        ['New York', 1000, 1200, 1300],
        ['Los Angeles', 700, 800, 950],
        ['Chicago', 500, 600, 700],
        ['Houston', 400, 500, 600],
        ['Phoenix', 300, 400, 500]
      ]);

      var options = {
        title: 'City Population by Year',
        chartArea: {width: '50%'},
        hAxis: {title: 'Population'},
        vAxis: {title: 'City'},
        isStacked: true
      };

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

ব্যাখ্যা:

ডেটা প্রস্তুতি: এখানে আমরা ২০১৫, ২০১৬, এবং ২০১৭ সালের জন্য পাঁচটি শহরের জনসংখ্যার ডেটা দিয়েছি।
isStacked অপশন: isStacked: true সেট করলে চার্টটি স্ট্যাকড (stacked) হবে, অর্থাৎ সব ডেটা সিরিজ একসাথে স্তরবদ্ধ হবে।
অপশন কাস্টমাইজেশন: চার্টের শিরোনাম, এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিসের লেবেল কাস্টমাইজ করা হয়েছে।

২. Stacked Column Chart

Stacked Column Chart স্তরবদ্ধ বার চার্টের মতোই কাজ করে, তবে এটি উল্লম্ব (vertical) আকারে ডেটা উপস্থাপন করে। এটি বিভিন্ন উপাদানের অবদান দেখতে সাহায্য করে।

কোড উদাহরণ:

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

    function drawStackedColumnChart() {
      var data = google.visualization.arrayToDataTable([
        ['Month', 'Sales 2020', 'Sales 2021', 'Sales 2022'],
        ['January', 400, 500, 600],
        ['February', 600, 700, 800],
        ['March', 800, 900, 1000],
        ['April', 1000, 1100, 1200],
        ['May', 1200, 1300, 1400]
      ]);

      var options = {
        title: 'Sales by Year',
        chartArea: {width: '50%'},
        hAxis: {title: 'Sales (in USD)'},
        vAxis: {title: 'Month'},
        isStacked: true
      };

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

ব্যাখ্যা:

ডেটা প্রস্তুতি: এখানে ২০২০, ২০২১, এবং ২০২২ সালের মার্চ মাসের সেলস ডেটা প্রদর্শিত হয়েছে।
isStacked অপশন: isStacked: true সেট করে ডেটাকে স্তরবদ্ধভাবে প্রদর্শন করা হয়েছে, যাতে প্রতিটি বছরের সেলস ডেটা একসাথে দেখা যায়।
অপশন কাস্টমাইজেশন: চার্টের শিরোনাম, এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিসের লেবেল কাস্টমাইজ করা হয়েছে।

Stacked Bar এবং Stacked Column Chart এর উপকারিতা

বিভিন্ন শ্রেণির তুলনা: Stacked Charts আপনাকে একাধিক শ্রেণির ডেটাকে তুলনা করার সুযোগ দেয় এবং একই সাথে প্রতিটি শ্রেণির অবদান স্পষ্টভাবে দেখা যায়।
পারফরমেন্স বিশ্লেষণ: এটি বিভিন্ন সময় বা অবস্থার মধ্যে পারফরমেন্স বা অবদান বিশ্লেষণ করতে সাহায্য করে।
স্পষ্ট ও সহজ ভিজ্যুয়ালাইজেশন: একাধিক উপাদানের স্তরবদ্ধভাবে প্রদর্শন ডেটা আরও স্পষ্ট এবং সহজভাবে বোঝা যায়।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Basic Chart Customization এবং Style পরিবর্তন

267

Google Charts এর মাধ্যমে আপনি সহজেই চার্ট তৈরি করতে পারেন, তবে এগুলোর স্টাইল এবং কাস্টমাইজেশন আপনার প্রয়োজন অনুসারে পরিবর্তন করা সম্ভব। Google Charts এর সাথে একাধিক কাস্টমাইজেশন অপশন রয়েছে, যেমন রং, ফন্ট, অক্ষের লেবেল, টুলটিপ, লেজেন্ড ইত্যাদি। এই টিউটোরিয়ালে আমরা দেখব কিভাবে Google Charts এর Basic Customization এবং Style পরিবর্তন করা যায়।

Google Charts এর Basic Customization

Google Charts এর মাধ্যমে তৈরি চার্টগুলোর অনেকগুলো উপাদান কাস্টমাইজ করা যায়। কিছু প্রধান কাস্টমাইজেশন পয়েন্ট নিম্নরূপ:

চার্টের শিরোনাম (Title)
অক্ষের লেবেল (Axis Labels)
রং (Colors)
লেজেন্ড (Legend)
টুলটিপ (Tooltip)

১. চার্টের শিরোনাম কাস্টমাইজেশন (Chart Title Customization)

চার্টের শিরোনাম সেট করতে বা কাস্টমাইজ করতে, আপনি title অপশন ব্যবহার করতে পারেন। এতে আপনি শিরোনামের স্টাইলও পরিবর্তন করতে পারবেন।

var options = {
  title: 'Sales Growth Over Years',
  titleTextStyle: {
    color: 'blue',        // শিরোনামের রং
    fontSize: 20,         // ফন্ট সাইজ
    bold: true            // বোল্ড স্টাইল
  }
};

এখানে titleTextStyle এর মাধ্যমে শিরোনামের ফন্ট এবং রং কাস্টমাইজ করা হয়েছে।

২. অক্ষের লেবেল কাস্টমাইজেশন (Axis Labels Customization)

অক্ষের লেবেল কাস্টমাইজ করতে hAxis (horizontal axis) এবং vAxis (vertical axis) অপশন ব্যবহার করা হয়। এগুলোর মাধ্যমে আপনি অক্ষের নাম, রং, এবং ফন্ট সাইজ পরিবর্তন করতে পারবেন।

var options = {
  title: 'Sales Growth Over Years',
  hAxis: {
    title: 'Year',          // এক্স অক্ষের লেবেল
    titleTextStyle: {color: 'green', fontSize: 14}, // এক্স অক্ষের লেবেলের রং ও ফন্ট সাইজ
    textStyle: {color: 'red', fontSize: 12}  // এক্স অক্ষের টেক্সটের রং ও ফন্ট সাইজ
  },
  vAxis: {
    title: 'Sales (in USD)',  // ওয়াই অক্ষের লেবেল
    titleTextStyle: {color: 'purple', fontSize: 14}, // ওয়াই অক্ষের লেবেলের রং ও ফন্ট সাইজ
    textStyle: {color: 'orange', fontSize: 12}  // ওয়াই অক্ষের টেক্সটের রং ও ফন্ট সাইজ
  }
};

এখানে এক্স এবং ওয়াই অক্ষের টেক্সটের রং এবং ফন্ট সাইজ পরিবর্তন করা হয়েছে।

৩. রং পরিবর্তন (Changing Colors)

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

var options = {
  title: 'Sales Growth Over Years',
  colors: ['#FF5733', '#33FF57', '#3357FF']  // বার বা লাইন চার্টের রং পরিবর্তন
};

এখানে colors অ্যারে ব্যবহার করে তিনটি রং উল্লেখ করা হয়েছে।

৪. লেজেন্ড কাস্টমাইজেশন (Legend Customization)

চার্টে লেজেন্ড দেখানোর জন্য এবং এর স্টাইল কাস্টমাইজ করার জন্য legend অপশন ব্যবহার করা হয়।

var options = {
  title: 'Sales Growth Over Years',
  legend: {
    position: 'top',         // লেজেন্ডের অবস্থান (top, bottom, left, right)
    textStyle: {color: 'blue', fontSize: 16}  // লেজেন্ডের টেক্সটের রং ও ফন্ট সাইজ
  }
};

এখানে লেজেন্ডের অবস্থান এবং টেক্সটের স্টাইল কাস্টমাইজ করা হয়েছে।

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

টুলটিপ হল সেই ছোট বাক্যাংশ যা চার্টের যেকোনো উপাদানের ওপর হোভার করলে প্রদর্শিত হয়। আপনি টুলটিপের ফরম্যাট এবং কনটেন্ট কাস্টমাইজ করতে পারেন।

var options = {
  title: 'Sales Growth Over Years',
  tooltip: {
    isHtml: true,   // টুলটিপের কন্টেন্ট HTML হিসেবে দেখাবে
    trigger: 'focus'  // টুলটিপ কিভাবে ট্রিগার হবে (focus, hover)
  }
};

এখানে টুলটিপের কন্টেন্ট HTML হিসেবে দেখানোর জন্য isHtml সেট করা হয়েছে।

Google Charts উদাহরণ

এখন আমরা একটি সিম্পল লাইন চার্ট তৈরি করব এবং এর মধ্যে কাস্টমাইজেশন দেখাবো:

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

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2020', 1000],
        ['2021', 1200],
        ['2022', 1500],
        ['2023', 1800]
      ]);

      var options = {
        title: 'Company Sales Over the Years',
        titleTextStyle: {
          color: 'green', fontSize: 20, bold: true
        },
        hAxis: {
          title: 'Year',
          titleTextStyle: {color: 'blue', fontSize: 14},
          textStyle: {color: 'orange', fontSize: 12}
        },
        vAxis: {
          title: 'Sales (in USD)',
          titleTextStyle: {color: 'purple', fontSize: 14},
          textStyle: {color: 'red', fontSize: 12}
        },
        colors: ['#FF5733', '#33FF57'],
        legend: {
          position: 'top',
          textStyle: {color: 'blue', fontSize: 16}
        }
      };

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

এখানে লাইন চার্টের শিরোনাম, অক্ষের লেবেল, রং, এবং লেজেন্ড কাস্টমাইজ করা হয়েছে।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

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

Basic Charts তৈরি করা গাইড ও নোট

গুগল চার্ট সেটআপ

১. বার চার্ট (Bar Chart) তৈরি করা

উদাহরণ: বার চার্ট

২. পাই চার্ট (Pie Chart) তৈরি করা

উদাহরণ: পাই চার্ট

৩. লাইন চার্ট (Line Chart) তৈরি করা

উদাহরণ: লাইন চার্ট

উপসংহার

Bar, Line, এবং Pie Chart এর ব্যবহার

১. Bar Chart (বার চার্ট)

উদাহরণ: Bar Chart তৈরি করা

ব্যাখ্যা:

২. Line Chart (লাইন চার্ট)

উদাহরণ: Line Chart তৈরি করা

ব্যাখ্যা:

৩. Pie Chart (পাই চার্ট)

উদাহরণ: Pie Chart তৈরি করা

ব্যাখ্যা:

উপসংহার

Area এবং Column Chart তৈরি করা

১. Area Chart তৈরি করা

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

কোড ব্যাখ্যা

২. Column Chart তৈরি করা

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

কোড ব্যাখ্যা

উপসংহার

Stacked Bar এবং Stacked Column Chart এর প্রয়োগ

১. Stacked Bar Chart

কোড উদাহরণ:

ব্যাখ্যা:

২. Stacked Column Chart

কোড উদাহরণ:

ব্যাখ্যা:

Stacked Bar এবং Stacked Column Chart এর উপকারিতা

উপসংহার

Basic Chart Customization এবং Style পরিবর্তন

Google Charts এর Basic Customization

১. চার্টের শিরোনাম কাস্টমাইজেশন (Chart Title Customization)

২. অক্ষের লেবেল কাস্টমাইজেশন (Axis Labels Customization)

৩. রং পরিবর্তন (Changing Colors)

৪. লেজেন্ড কাস্টমাইজেশন (Legend Customization)

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

Google Charts উদাহরণ

উপসংহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!