Gauge এবং Progress Charts

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

433

Gauge Chart এবং Progress Chart হল Google Charts এর দুটি বিশেষ ধরনের চার্ট যা বিভিন্ন প্রক্রিয়া বা মানদণ্ডের অগ্রগতি এবং পরিপূর্ণতা প্রদর্শন করতে ব্যবহৃত হয়। এগুলো মূলত পারফরম্যান্স মেট্রিক দেখানোর জন্য ব্যবহৃত হয়, যেমন, কোনো কাজের প্রোগ্রেস, সেলস টার্গেট, বা সময়সীমার মধ্যে কাজের অগ্রগতি।

এখানে Gauge Chart এবং Progress Chart এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশনের পদ্ধতি বিস্তারিতভাবে আলোচনা করা হয়েছে।

১. Gauge Chart: একটি প্রক্রিয়ার পরিমাণের মানদণ্ড প্রদর্শন

Gauge Chart ব্যবহৃত হয় পরিমাপযোগ্য কোনো মানের অগ্রগতি বা সম্পূর্ণতা প্রদর্শনের জন্য। এটি সাধারণত 0 থেকে 100% পর্যন্ত পরিসরের মধ্যে থাকে এবং কোনো প্রক্রিয়ার পরিমাণ বা অগ্রগতির মাত্রা দেখায়। যেমন, সেলস টার্গেট, পারফরম্যান্স মেট্রিক্স, বা এনার্জি কনজাম্পশন এর জন্য ব্যবহার করা যেতে পারে।

HTML এবং JavaScript কোড উদাহরণ (Gauge Chart):

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

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Performance', 80]
      ]);

      var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom: 75, yellowTo: 90,
        greenFrom: 0, greenTo: 75,
        minorTicks: 5
      };

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

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

Gauge Chart লোড করা: google.charts.load('current', {packages: ['gauge']}); লাইনে gauge প্যাকেজটি লোড করা হয়েছে, যা গেজ চার্ট তৈরি করতে ব্যবহৃত হয়।
ডেটা: google.visualization.arrayToDataTable() ফাংশন ব্যবহার করে Performance এর মান ৮০ সেট করা হয়েছে।
অপশন সেট করা: গেজ চার্টের রঙের জন্য red, yellow, এবং green সেট করা হয়েছে যাতে বিভিন্ন পরিসরের জন্য বিভিন্ন রঙ দেখানো যায়।
চার্ট তৈরি: google.visualization.Gauge() ফাংশন দিয়ে চার্টটি তৈরি করা হয়েছে এবং HTML ডকুমেন্টে প্রদর্শিত হয়েছে।

২. Progress Chart: একটি প্রক্রিয়ার অগ্রগতি প্রদর্শন

Progress Chart সাধারণত একটি অনুভূমিক বা উল্লম্ব বার আকারে অগ্রগতির পরিমাণ দেখায়, যেটি ০ থেকে ১০০% পর্যন্ত পূর্ণতা বা প্রোগ্রেস দেখায়। এটি খুবই কার্যকরী যখন কোনো কাজ বা প্রকল্পের অগ্রগতি একটি নির্দিষ্ট সময়ের মধ্যে দেখতে হয়।

HTML এবং JavaScript কোড উদাহরণ (Progress Chart):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Progress 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([
        ['Task', 'Completed'],
        ['Work Completed', 70],
        ['Work Remaining', 30]
      ]);

      var options = {
        title: 'Task Completion Progress',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Completion Percentage',
          minValue: 0
        },
        vAxis: {
          title: 'Task'
        }
      };

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

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

Progress Chart লোড করা: google.charts.load('current', {packages: ['corechart', 'bar']}); লাইনে আমরা corechart এবং bar প্যাকেজ লোড করেছি, যা Progress Bar চার্ট তৈরি করতে সহায়ক।
ডেটা: এখানে আমরা দুটি কক্ষ তৈরি করেছি: Work Completed এবং Work Remaining। এর মাধ্যমে আমাদের কাজের অগ্রগতি এবং বাকি কাজের পরিমাণ প্রদর্শিত হবে।
অপশন সেট করা: আমরা chartArea, hAxis, এবং vAxis অপশন ব্যবহার করে প্রগ্রেস চার্টের কাস্টমাইজেশন করেছি, যাতে এটি আরও পরিষ্কার এবং বোধগম্য হয়।
চার্ট তৈরি: google.visualization.BarChart() ফাংশন ব্যবহার করে বার চার্ট তৈরি করা হয়েছে, যেখানে অগ্রগতির পরিমাণের বার প্রদর্শিত হবে।

৩. Gauge এবং Progress Charts এর প্রয়োগ

Gauge Chart এবং Progress Chart বেশিরভাগ ক্ষেত্রেই ব্যবহৃত হয় যেখানে কাজের অগ্রগতি, পারফরম্যান্স মেট্রিক্স, লক্ষ্য পূরণের পরিমাণ বা উন্নতির হার পরিমাপ করা হয়। এখানে কিছু প্রধান ব্যবহারিক প্রয়োগের উদাহরণ দেওয়া হল:

ব্যবসায়িক কৌশল: গেজ বা প্রগ্রেস চার্টের মাধ্যমে ব্যবসায়িক লক্ষ্য বা সেলস টার্গেটের অর্জন ট্র্যাক করা।
প্রকল্প ব্যবস্থাপনা: প্রকল্পের বিভিন্ন টাস্ক বা মাইলস্টোনের অগ্রগতি দেখানোর জন্য গেজ এবং প্রগ্রেস চার্ট ব্যবহার করা।
টিম পারফরম্যান্স: একটি টিম বা বিভাগ কতটুকু অগ্রসর হচ্ছে তার পারফরম্যান্স বিশ্লেষণ করার জন্য।
অর্থনৈতিক ডেটা: বাজেটের প্রোগ্রেস এবং অর্থনৈতিক লক্ষ্য পূরণের পরিমাণ হিসাব করতে।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Gauge Chart এর মাধ্যমে Performance প্রদর্শন

324

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

১. Google Charts দিয়ে Gauge Chart তৈরি করা

Google Charts লাইব্রেরি ব্যবহার করে Gauge Chart তৈরি করতে, আপনাকে corechart প্যাকেজ লোড করতে হবে এবং তারপরে Gauge 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 Gauge 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', 'gauge']});

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

    // Gauge Chart তৈরি করার ফাংশন
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Performance', 70]  // এখানে 70% পারফরম্যান্স সেট করা হয়েছে
      ]);

      var options = {
        width: 400, height: 120,
        redFrom: 0, redTo: 30,     // Red zone between 0-30
        yellowFrom: 30, yellowTo: 60,  // Yellow zone between 30-60
        greenFrom: 60, greenTo: 100,   // Green zone between 60-100
        minorTicks: 5
      };

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

কোড ব্যাখ্যা

Google Charts লাইব্রেরি লোড করা: google.charts.load('current', {packages: ['corechart', 'gauge']}); লাইনে corechart এবং gauge প্যাকেজ লোড করা হয়েছে, যেটি Gauge Chart তৈরি করতে সহায়ক।
ডেটা প্রস্তুত করা: google.visualization.arrayToDataTable() ফাংশন দিয়ে আমরা Gauge Chart এর জন্য ডেটা প্রস্তুত করেছি, যেখানে Performance নামক একটি মেট্রিকের মান 70% দেয়া হয়েছে।
```
var data = google.visualization.arrayToDataTable([
  ['Label', 'Value'],
  ['Performance', 70]
]);
```
অপশন সেট করা:
- Width এবং Height: চার্টের আকার সেট করা হয়েছে।
- Red, Yellow, Green Zones: redFrom, yellowFrom, greenFrom অপশন দিয়ে পারফরম্যান্সের রেঞ্জ সীমানা নির্ধারণ করা হয়েছে:
  - Red Zone: 0 থেকে 30% (নিম্ন পারফরম্যান্স)
  - Yellow Zone: 30 থেকে 60% (মাঝারি পারফরম্যান্স)
  - Green Zone: 60 থেকে 100% (উচ্চ পারফরম্যান্স)
- minorTicks: ছোট টিকমার্কের সংখ্যা নির্ধারণ করা হয়েছে (এখানে 5টি টিকমার্ক প্রদর্শিত হবে)।
চার্ট তৈরি এবং প্রদর্শন: google.visualization.Gauge() ফাংশন ব্যবহার করে Gauge Chart তৈরি করা হয় এবং এটি HTML ডকুমেন্টের একটি <div> এ প্রদর্শিত হয়।

২. Gauge Chart কাস্টমাইজেশন

Gauge Chart এ আপনি বিভিন্ন ধরনের কাস্টমাইজেশন করতে পারেন, যেমন:

১. রঙ পরিবর্তন:

আপনি red, yellow, এবং green জোনের রঙ পরিবর্তন করতে পারেন, যাতে এগুলো আপনার ডিজাইন বা থিমের সাথে মানানসই হয়। উদাহরণ:

greenColor: '#00FF00',
yellowColor: '#FFFF00',
redColor: '#FF0000',

২. ডেটার মান কাস্টমাইজেশন:

Gauge Chart-এ আপনি ডেটার মান আরও স্পষ্টভাবে প্রদর্শন করতে পারেন, যেমন সংখ্যার পরিবর্তে টেক্সট প্রদর্শন।

ticks: ['0%', '25%', '50%', '75%', '100%']

৩. অ্যাডিশনাল অপশন:

আপনি আরও নানা ধরনের অপশন ব্যবহার করতে পারেন যেমন:

minorTicks: ছোট টিকের সংখ্যা বাড়ানো বা কমানো।
label: লেবেল পরিবর্তন করা, যেমন 'Performance' পরিবর্তে অন্য কোনো টেক্সট।

৩. Gauge Chart এর ব্যবহারিক প্রয়োগ

সিস্টেম পারফরম্যান্স ট্র্যাকিং: Gauge Chart ব্যবহার করে আপনি কোনো সিস্টেমের পারফরম্যান্স যেমন CPU বা RAM ব্যবহার ট্র্যাক করতে পারেন।
বিক্রয় বা রাজস্ব ট্র্যাকিং: মাসিক বিক্রয়ের লক্ষ্যমাত্রা, উৎপাদন বা লাভের অগ্রগতি ট্র্যাক করতে গেজ চার্ট ব্যবহার করা যেতে পারে।
অন্যান্য মেট্রিক্স ট্র্যাকিং: বিভিন্ন প্যারামিটার বা KPI (Key Performance Indicator) গেজ চার্টের মাধ্যমে প্রদর্শন করা যেতে পারে, যেমন গ্রাহক সেবা পরিসংখ্যান, প্রোজেক্টের অগ্রগতি ইত্যাদি।

উপসংহার

Google Gauge Chart একটি চমৎকার টুল যা কোনো সিস্টেম বা প্রক্রিয়ার পারফরম্যান্সের অবস্থা সহজে এবং দ্রুত দেখাতে সাহায্য করে। এটি ব্যবহার করা সহজ এবং কাস্টমাইজেশন অপশনের মাধ্যমে এটি আরও আকর্ষণীয় এবং কার্যকরী করা যেতে পারে। আপনি Google Gauge Chart ব্যবহার করে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে পারফরম্যান্স বা অন্যান্য মেট্রিক্স প্রদর্শন করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Gauge Chart এর জন্য Data Ranges এবং Customization

407

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

গুগল চার্টে Gauge Chart তৈরি করতে, আপনি বিভিন্ন data ranges এবং customization অপশন ব্যবহার করতে পারেন, যেমন রঙের স্কেল, রেঞ্জ ডিফাইন করা, লাইনের স্টাইল ইত্যাদি।

১. Gauge Chart তৈরি করা

নিচে একটি Gauge Chart তৈরি করার উদাহরণ দেওয়া হলো, যেখানে একটি প্রগতি সূচক (progress indicator) দেখানো হয়েছে:

কোড উদাহরণ:

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

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Memory', 80],
      ]);

      var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom: 75, yellowTo: 90,
        greenFrom: 0, greenTo: 75,
        minorTicks: 5
      };

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

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

Gauge Chart লোড করা:
- google.charts.load('current', {packages: ['gauge']}); দ্বারা gauge প্যাকেজ লোড করা হচ্ছে, যা গেজ চার্ট তৈরি করতে ব্যবহৃত হয়।
ডেটা তৈরি করা:
- google.visualization.arrayToDataTable() ফাংশনের মাধ্যমে Memory রিডিং মান ৮০ দিয়ে ডেটা তৈরি করা হয়েছে।
কাস্টমাইজেশন (Customization):
- redFrom, redTo, yellowFrom, yellowTo, greenFrom, এবং greenTo: এখানে আমরা গেজ চার্টের রেঞ্জ কাস্টমাইজ করেছি। যেমন:
  - Red রেঞ্জ: 90 থেকে 100 পর্যন্ত (উচ্চ মানের জন্য)
  - Yellow রেঞ্জ: 75 থেকে 90 পর্যন্ত
  - Green রেঞ্জ: 0 থেকে 75 পর্যন্ত (নিরাপদ রেঞ্জ)
- minorTicks: এটি গেজের মধ্যে ছোট টিক মার্কস তৈরি করে, যার মাধ্যমে ভ্যালু আরও স্পষ্টভাবে বুঝা যায়।
গেজ চার্ট তৈরি করা:
- google.visualization.Gauge() ফাংশন ব্যবহার করে গেজ চার্ট তৈরি করা হয়েছে এবং এটি HTML ডকুমেন্টে প্রদর্শিত হচ্ছে।

২. Gauge Chart এর জন্য Data Ranges এবং Customization

Gauge Chart এর জন্য ডেটার রেঞ্জ কাস্টমাইজ করা এবং ভিজ্যুয়াল স্টাইলিং খুবই গুরুত্বপূর্ণ, কারণ এটি পরিসরের পরিবর্তন এবং অগ্রগতির ট্র্যাকিং দেখাতে সাহায্য করে। এখানে বিভিন্ন কাস্টমাইজেশন অপশন রয়েছে যা আপনি ব্যবহার করতে পারেন।

২.১ Data Ranges

Red, Yellow, Green Ranges: গেজে বিভিন্ন রঙের জন্য রেঞ্জ নির্ধারণ করা হয়, যা একটি বিশ্লেষণাত্মক দৃষ্টিকোণ দেয়।
- redFrom and redTo: উচ্চ মানের জন্য (দ্বিগুণ রেড রেঞ্জ)
- yellowFrom and yellowTo: সতর্কতা বা সাবধানতার জন্য (কম yellow রেঞ্জ)
- greenFrom and greenTo: নিরাপদ মান (green রেঞ্জ)

২.২ Major and Minor Ticks

majorTicks: এই অপশনটি ব্যবহার করে আপনি গেজের মধ্যে বড় টিক মার্কসের সংখ্যা কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, 0 থেকে 100 পর্যন্ত গেজ হলে বড় বড় টিক মার্কসের সংখ্যা 5 হতে পারে।
minorTicks: ছোট ছোট টিক মার্কসের জন্য এই অপশনটি ব্যবহার করা হয়। এটি গেজে টিক মার্কসের ঘনত্ব বা স্পষ্টতা বাড়ায়।

২.৩ Chart Size and Shape

width and height: গেজ চার্টের আকার কাস্টমাইজ করার জন্য এই অপশনগুলি ব্যবহার করা হয়।

২.৪ Font Color and Size

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

৩. আরও কিছু কাস্টমাইজেশন

৩.১ গেজের টেক্সট এবং লেবেল কাস্টমাইজ করা:

var options = {
  width: 400,
  height: 120,
  redFrom: 90,
  redTo: 100,
  yellowFrom: 75,
  yellowTo: 90,
  greenFrom: 0,
  greenTo: 75,
  minorTicks: 5,
  majorTicks: ['0', '25', '50', '75', '100'], // Major ticks for gauge values
  max: 100, // Maximum value of the gauge
  min: 0 // Minimum value of the gauge
};

৩.২ Dynamic Data Update:

গেজের মান ডাইনামিকভাবে আপডেট করতে আপনি JavaScript দিয়ে ফাংশন লিখতে পারেন। উদাহরণস্বরূপ:

function updateGauge(newValue) {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', newValue],
  ]);
  chart.draw(data, options);
}

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Progress Bar এবং Progress Circle Chart তৈরি

282

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

১. Progress Bar তৈরি করা

Progress Bar সাধারণত রৈখিকভাবে কাজের অগ্রগতি প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি সরল উপায়ে কাজের সম্পূর্ণতার শতাংশ দেখানোর জন্য উপকারী।

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 Progress Bar 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':['gauge']});

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

    // Progress Bar তৈরি করার ফাংশন
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Progress', 60]  // এখানে 60% অগ্রগতি দেখানো হচ্ছে
      ]);

      var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom: 75, yellowTo: 90,
        greenFrom: 0, greenTo: 75,
        minorTicks: 5
      };

      var chart = new google.visualization.Gauge(document.getElementById('progress_bar'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <h2>Google Progress Bar Example</h2>
  <div id="progress_bar" style="width: 400px; height: 120px;"></div>
</body>
</html>

কোড ব্যাখ্যা

Google Charts লাইব্রেরি লোড করা: google.charts.load('current', {'packages':['gauge']}); লাইনে gauge প্যাকেজটি লোড করা হয়েছে, যেটি Progress Bar তৈরি করতে ব্যবহৃত হয়।
ডেটা তৈরি করা: google.visualization.arrayToDataTable() ফাংশন দিয়ে Progress Bar এর জন্য ডেটা তৈরি করা হয়েছে। এখানে 60 শতাংশ অগ্রগতি দেখানো হয়েছে।
অপশন সেট করা:
- redFrom, yellowFrom, greenFrom: এগুলি প্রগ্রেস বারটির বিভিন্ন অংশের রঙ নির্ধারণ করে।
- minorTicks: এটি ছোট টিক মার্কের সংখ্যা নির্ধারণ করে।
চার্ট তৈরি করা: google.visualization.Gauge() ফাংশন ব্যবহার করে Progress Bar তৈরি এবং প্রদর্শন করা হয়েছে।

২. Progress Circle Chart তৈরি করা

Progress Circle Chart হল একটি রাউন্ড (circle) আকারের চার্ট যা প্রকল্প বা কাজের অগ্রগতি দেখাতে ব্যবহৃত হয়। এটি গোলাকার আকারে কাজের সম্পূর্ণতার শতাংশ প্রদর্শন করে।

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 Progress Circle 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);

    // Progress Circle তৈরি করার ফাংশন
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Percentage'],
        ['Completed', 70],  // এখানে 70% সম্পূর্ণ হয়েছে
        ['Remaining', 30]
      ]);

      var options = {
        title: 'Task Progress',
        pieSliceText: 'percentage',
        is3D: true,
        slices: {
          0: {offset: 0.1, color: '#4caf50'},  // Completed স্লাইসের রঙ
          1: {offset: 0.1, color: '#f44336'}   // Remaining স্লাইসের রঙ
        }
      };

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

কোড ব্যাখ্যা

Google Charts লাইব্রেরি লোড করা: google.charts.load('current', {'packages':['corechart', 'pie']}); লাইনে corechart এবং pie প্যাকেজ লোড করা হয়েছে, যা Progress Circle তৈরি করতে সহায়তা করে।
ডেটা তৈরি করা: google.visualization.arrayToDataTable() এর মাধ্যমে আমরা Progress Circle এর ডেটা তৈরি করেছি, যেখানে Completed টাস্কের জন্য 70% এবং Remaining টাস্কের জন্য 30% প্রদর্শিত হয়েছে।
অপশন সেট করা:
- pieSliceText: 'percentage': এটি স্লাইসগুলোর ভিতরে শতাংশ প্রদর্শন করবে।
- is3D: true: এটি গোলাকার চার্টটিকে 3D প্রভাব দিবে।
- slices: এর মাধ্যমে Completed এবং Remaining স্লাইসের রঙ নির্ধারণ করা হয়েছে।
চার্ট তৈরি করা: google.visualization.PieChart() ফাংশন ব্যবহার করে Progress Circle তৈরি এবং প্রদর্শন করা হয়েছে।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

Gauge এবং Progress Charts এর Advanced Customization

481

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

এখানে আমরা Gauge এবং Progress Charts এর Advanced Customization নিয়ে আলোচনা করব, যাতে আপনি এসব চার্টের মধ্যে রঙ, সীমা, লেবেল, অ্যানিমেশন এবং অন্যান্য স্টাইলিং কাস্টমাইজ করতে পারেন।

১. Gauge Chart Advanced Customization

Gauge Chart সাধারণত একটি নির্দিষ্ট মানের সাথে সম্পর্কিত অগ্রগতি বা পারফরম্যান্স প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি রিং বা আর্কের মত দেখায়, যেখানে একটি সূচক বা পয়েন্ট আপনি কোথায় দাঁড়াচ্ছেন তা দেখায়।

Gauge Chart কাস্টমাইজেশনের উদাহরণ

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

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Memory', 80],
        ['CPU', 55],
        ['Network', 68]
      ]);

      var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom: 75, yellowTo: 90,
        greenFrom: 0, greenTo: 75,
        minorTicks: 5,
        max: 100,
        min: 0,
        majorTicks: ['0', '20', '40', '60', '80', '100'],
        minorTicks: 5,
        animation: {
          duration: 1000,
          easing: 'out'
        },
        greenColor: '#4CAF50',
        yellowColor: '#FFEB3B',
        redColor: '#F44336'
      };

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

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

Gauge Chart অপশন কাস্টমাইজেশন:
- redFrom, yellowFrom, এবং greenFrom অপশনগুলি রঙের সীমানা নির্ধারণ করে, যেখানে আপনি প্রতিটি সেকশনের জন্য সর্বোচ্চ এবং সর্বনিম্ন মান নির্ধারণ করতে পারেন।
- majorTicks এবং minorTicks ব্যবহার করে আপনি মূল এবং ছোট টিক মার্কস কাস্টমাইজ করতে পারেন।
- animation অপশন দিয়ে অ্যানিমেশন যুক্ত করা হয়েছে, যা চার্টটি সুন্দরভাবে লোড হতে সহায়ক।
- greenColor, yellowColor, এবং redColor অপশনগুলি দিয়ে আমরা চার্টের রঙ কাস্টমাইজ করেছি।
Customizing Labels and Colors: majorTicks এর মাধ্যমে আপনি গেজের বিভিন্ন বিভাগের লেবেল কাস্টমাইজ করতে পারেন।

২. Progress Chart Advanced Customization

Progress Chart বা Bar Progress Chart মূলত কাজের অগ্রগতি বা সম্পন্নের স্তর প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত রঙিন বার আকারে কাজের অগ্রগতি প্রকাশ করে।

Progress Chart কাস্টমাইজেশনের উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Progress 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([
        ['Task', 'Progress', { role: 'style' }],
        ['Task 1', 60, 'color: green'],
        ['Task 2', 80, 'color: orange'],
        ['Task 3', 40, 'color: red'],
        ['Task 4', 90, 'color: blue']
      ]);

      var options = {
        title: 'Progress of Tasks',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Progress',
          minValue: 0
        },
        vAxis: {
          title: 'Tasks'
        },
        animation: {
          startup: true,
          duration: 1500,
          easing: 'out'
        }
      };

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

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

Progress Chart অপশন কাস্টমাইজেশন:
- color: প্রতিটি টাস্কের জন্য একটি ভিন্ন রঙ নির্ধারণ করা হয়েছে (যেমন: green, orange, red এবং blue).
- animation: গেজ বা প্রোগ্রেস বারটি সুন্দরভাবে রেন্ডার করার জন্য অ্যানিমেশন যুক্ত করা হয়েছে।
- hAxis এবং vAxis: প্রোগ্রেস বারটির অনুভূমিক (horizontal) এবং উল্লম্ব (vertical) অক্ষের শিরোনাম কাস্টমাইজ করা হয়েছে।
Customizing Progress Bar: প্রতিটি টাস্কের অগ্রগতির জন্য নির্দিষ্ট রঙ ব্যবহার করা হয়েছে, যা ব্যবহারকারীর কাছে আরও বোঝার সুবিধা দেয়।

৩. Advanced Customization Options

Interactive Features:
- Tooltips: আপনি প্রতিটি বার বা গেজে টুলটিপ যোগ করতে পারেন, যাতে ব্যবহারকারীরা ক্লিক বা হোভার করার মাধ্যমে আরও তথ্য দেখতে পারে।
- Hover Effects: hover ইভেন্ট ব্যবহার করে বিভিন্ন টাস্ক বা ডেটা পয়েন্টে মাউসের উপর হোভার করলে সেগুলোর স্টাইল পরিবর্তন করতে পারেন।
Dynamic Data: Google Charts-এ Dynamic Data যোগ করতে, আপনি API থেকে ডেটা লোড করে সেই ডেটার উপর ভিত্তি করে চার্ট তৈরি করতে পারেন।
Real-time Updates: আপনার Progress Chart বা Gauge Chart তে রিয়েল-টাইম ডেটা আপডেট করার জন্য JavaScript setInterval() ফাংশন ব্যবহার করতে পারেন, যা নির্দিষ্ট সময় পর পর চার্ট রিফ্রেশ করবে।
Custom Animations: Google Charts সাপোর্ট করে custom animations যা আপনি আপনার চার্টের জন্য সেট করতে পারেন, যেমন ধীরে ধীরে আকার পরিবর্তন বা ট্রানজিশন ইফেক্ট।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

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

Gauge এবং Progress Charts

১. Gauge Chart: একটি প্রক্রিয়ার পরিমাণের মানদণ্ড প্রদর্শন

HTML এবং JavaScript কোড উদাহরণ (Gauge Chart):

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

২. Progress Chart: একটি প্রক্রিয়ার অগ্রগতি প্রদর্শন

HTML এবং JavaScript কোড উদাহরণ (Progress Chart):

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

৩. Gauge এবং Progress Charts এর প্রয়োগ

উপসংহার

Gauge Chart এর মাধ্যমে Performance প্রদর্শন

১. Google Charts দিয়ে Gauge Chart তৈরি করা

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

কোড ব্যাখ্যা

২. Gauge Chart কাস্টমাইজেশন

১. রঙ পরিবর্তন:

২. ডেটার মান কাস্টমাইজেশন:

৩. অ্যাডিশনাল অপশন:

৩. Gauge Chart এর ব্যবহারিক প্রয়োগ

উপসংহার

Gauge Chart এর জন্য Data Ranges এবং Customization

১. Gauge Chart তৈরি করা

কোড উদাহরণ:

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

২. Gauge Chart এর জন্য Data Ranges এবং Customization

২.১ Data Ranges

২.২ Major and Minor Ticks

২.৩ Chart Size and Shape

২.৪ Font Color and Size

৩. আরও কিছু কাস্টমাইজেশন

৩.১ গেজের টেক্সট এবং লেবেল কাস্টমাইজ করা:

৩.২ Dynamic Data Update:

উপসংহার

Progress Bar এবং Progress Circle Chart তৈরি

১. Progress Bar তৈরি করা

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

কোড ব্যাখ্যা

২. Progress Circle Chart তৈরি করা

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

কোড ব্যাখ্যা

উপসংহার

Gauge এবং Progress Charts এর Advanced Customization

১. Gauge Chart Advanced Customization

Gauge Chart কাস্টমাইজেশনের উদাহরণ

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

২. Progress Chart Advanced Customization

Progress Chart কাস্টমাইজেশনের উদাহরণ

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

৩. Advanced Customization Options

উপসংহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!