Chart.js এর বিভিন্ন ধরনের চার্ট

Chart.js একটি শক্তিশালী এবং বহুমুখী জাভাস্ক্রিপ্ট লাইব্রেরি যা বিভিন্ন ধরনের চার্ট তৈরি করার সুবিধা প্রদান করে। Chart.js এর সাহায্যে আপনি আপনার ডেটাকে দৃষ্টিনন্দন এবং ইন্টার‌্যাকটিভ আকারে উপস্থাপন করতে পারেন। এখানে Chart.js এর জনপ্রিয় এবং ব্যবহৃত বিভিন্ন চার্টের ধরন আলোচনা করা হলো।

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

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

ব্যবহার:

• স্টক মার্কেট ট্রেন্ড।
• তাপমাত্রা পরিবর্তন।
• ওয়েবসাইট ভিজিট ট্র্যাফিক।

কোড উদাহরণ:

const lineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Temperature',
            data: [30, 25, 20, 15],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false
        }]
    }
});

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

বার চার্ট তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়, যেখানে ভিন্ন ভিন্ন ক্যাটাগরি বা গ্রুপের মধ্যে তুলনা করা হয়। এটি ডেটার ভ্যালু সমূহকে বার হিসেবে প্রদর্শন করে।

ব্যবহার:

• সেলস রিপোর্ট।
• শিক্ষার্থীর প্রাপ্ত নম্বর।
• কোন বিষয়ে কাস্টমারের পছন্দ।

কোড উদাহরণ:

const barChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    }
});

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

পাই চার্ট একটি সেগমেন্টেড চার্ট যা ডেটার অংশবিশেষ বা শতাংশ প্রদর্শন করে। এটি ডেটাকে বিভিন্ন ভাগে বিভক্ত করে প্রতিটি ভাগের পরিমাণ প্রদর্শন করে।

ব্যবহার:

• বাজার শেয়ার।
• বিভিন্ন বিভাগের শতাংশ।
• ভোটের ফলাফল।

কোড উদাহরণ:

const pieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Green'],
        datasets: [{
            data: [10, 20, 30],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)']
        }]
    }
});

৪. ডোনাট চার্ট (Doughnut Chart)

ডোনাট চার্ট পাই চার্টের মতো, তবে এর কেন্দ্রে একটি খালি জায়গা থাকে। এটি আকারের মাধ্যমে ডেটার অংশ প্রদর্শন করে।

ব্যবহার:

• বিভিন্ন ক্যাটাগরির তুলনা।
• মার্কেটিং কার্যক্রমের পারফরম্যান্স।

কোড উদাহরণ:

const doughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [15, 25, 35],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)']
        }]
    }
});

৫. রাডার চার্ট (Radar Chart)

রাডার চার্ট ডেটার বিভিন্ন ক্যাটাগরি বা ভেরিয়েবলকে কেন্দ্রবিন্দু থেকে রেডিয়াল আকারে প্রদর্শন করে। এটি একাধিক ডেটা সিরিজের তুলনা করতে ব্যবহৃত হয়।

ব্যবহার:

• স্পোর্টস পারফরম্যান্স বিশ্লেষণ।
• বিভিন্ন বিভাগের মধ্যে তুলনা।

কোড উদাহরণ:

const radarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'],
        datasets: [{
            label: 'Activity',
            data: [20, 30, 40, 50, 60],
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2,
            fill: true
        }]
    }
});

৬. পোলার এরিয়া চার্ট (Polar Area Chart)

পোলার এরিয়া চার্ট একটি রাডার চার্টের মতো হলেও এটি একাধিক ভেরিয়েবলের তুলনা এবং বিশ্লেষণে ব্যবহৃত হয়, তবে এটি সিলিন্ড্রিক্যাল বা পোলার আকারে ডেটা প্রদর্শন করে।

ব্যবহার:

• বাজারের বিভাগ ভিত্তিক বিশ্লেষণ।
• ভিন্ন ভিন্ন আঞ্চলিক বাজারের তুলনা।

কোড উদাহরণ:

const polarAreaChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [30, 50, 70],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)']
        }]
    }
});

৭. বাবল চার্ট (Bubble Chart)

বাবল চার্ট একটি স্ক্যাটার প্লট যেখানে প্রতিটি বুদবুদ X, Y এবং Z অক্ষের মানকে প্রতিনিধিত্ব করে। এটি ডেটার আকার, অবস্থান এবং সম্পর্ক বিশ্লেষণে ব্যবহৃত হয়।

ব্যবহার:

• বাজার গবেষণা।
• ভিন্ন ভিন্ন আঞ্চলিক বাজারের তুলনা।

কোড উদাহরণ:

const bubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets: [{
            label: 'My Dataset',
            data: [{
                x: 10,
                y: 20,
                r: 5
            }, {
                x: 30,
                y: 40,
                r: 10
            }]
        }]
    }
});

৮. স্ক্যাটার চার্ট (Scatter Chart)

স্ক্যাটার চার্ট দুটি ভেরিয়েবলের মধ্যে সম্পর্ক বা পার্থক্য বোঝাতে ব্যবহৃত হয়। এটি ডেটা পয়েন্টগুলিকে X এবং Y অক্ষের উপর প্লট করে।

ব্যবহার:

• বৈজ্ঞানিক গবেষণা।
• ইঞ্জিনিয়ারিং বিশ্লেষণ।

কোড উদাহরণ:

const scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'My Dataset',
            data: [{
                x: 1,
                y: 2
            }, {
                x: 2,
                y: 3
            }]
        }]
    }
});

সারাংশ

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

বার চার্ট (Bar Chart) হলো একটি জনপ্রিয় চার্ট টাইপ যা তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সাধারণত একাধিক ক্যাটেগরি বা গ্রুপের মধ্যে ডেটা তুলনা করতে ব্যবহৃত হয়। Chart.js এর মাধ্যমে বার চার্ট তৈরি করা খুবই সহজ এবং এটি ভিন্ন ভিন্ন গ্রুপের মান বা পরিমাণে তুলনা প্রদর্শন করতে সাহায্য করে।

Bar Chart এর ব্যবহার

বার চার্ট সাধারণত নিম্নলিখিত ক্ষেত্রে ব্যবহার করা হয়:

• সেলস রিপোর্ট এবং আর্থিক বিশ্লেষণ।
• জনসংখ্যার ডেটা বিশ্লেষণ।
• মার্কেট শেয়ার এবং অন্যান্য তুলনামূলক ডেটা প্রদর্শন।
• গ্রাহক বা কর্মচারীর পারফরম্যান্স বিশ্লেষণ।

Bar Chart এর বেসিক কনফিগারেশন

Chart.js এর মাধ্যমে একটি সাধারণ বার চার্ট তৈরি করতে কিছু কনফিগারেশন সেট করতে হয়। এই কনফিগারেশনের মধ্যে চার্টের ধরন, ডেটাসেট, এবং কাস্টমাইজেশন অপশন থাকবে।

কোড উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Bar Chart Example</title>
</head>
<body>
    <h1>Sales Data (Bar Chart)</h1>
    <!-- Chart.js Canvas -->
    <canvas id="myBarChart" width="400" height="200"></canvas>

    <!-- Chart.js Library -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Custom Script for Bar Chart -->
    <script>
        const ctx = document.getElementById('myBarChart').getContext('2d');
        
        const myBarChart = new Chart(ctx, {
            type: 'bar', // Chart type: Bar
            data: {
                labels: ['January', 'February', 'March', 'April', 'May'], // X-axis labels
                datasets: [{
                    label: 'Sales', // Dataset label
                    data: [30, 45, 60, 25, 50], // Y-axis data values
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1 // Bar border width
                }]
            },
            options: {
                responsive: true, // Responsive chart
                scales: {
                    y: {
                        beginAtZero: true // Y-axis starts from zero
                    }
                }
            }
        });
    </script>
</body>
</html>

Bar Chart কনফিগারেশন বিশ্লেষণ

1. type: 'bar': এটি Chart.js এর টাইপ কনফিগারেশন, যেখানে আমরা 'bar' টাইপ ব্যবহার করেছি, যা বার চার্ট তৈরি করবে।
2. data: ডেটা সেট এবং লেবেলসমূহ এখানে সংজ্ঞায়িত করা হয়:
   • labels: এক্স-অক্ষের লেবেল (এখানে মাসের নাম: January, February, March, ইত্যাদি)।
   • datasets: ডেটাসেটের জন্য ডেটা পয়েন্ট এবং স্টাইল সেট করা হয়:
     • label: ডেটাসেটের নাম (যেমন Sales)।
     • data: Y-অক্ষের জন্য ডেটার মান (যেমন সেলস ডেটা)।
     • backgroundColor: বারগুলোর ব্যাকগ্রাউন্ড কালার।
     • borderColor: বারগুলোর বর্ডার কালার।
     • borderWidth: বারগুলোর বর্ডারের প্রস্থ।
3. options: চার্টের কাস্টমাইজেশন অপশন:
   • responsive: true: এটি নিশ্চিত করে যে চার্টটি রেসপন্সিভ হবে, অর্থাৎ বিভিন্ন স্ক্রীন সাইজের সাথে মানিয়ে চলবে।
   • scales: এটি চার্টের অক্ষের স্কেল কনফিগারেশন। Y-অক্ষের জন্য beginAtZero: true সেট করা হয়েছে যাতে Y-অক্ষ শূন্য থেকে শুরু হয়।

আরও কাস্টমাইজেশন

Chart.js এর বার চার্টের কাস্টমাইজেশন আরও বাড়ানো যেতে পারে যেমন:

• বার গ্যাপ: বারগুলোর মধ্যে ফাঁকা জায়গা কাস্টমাইজ করা।
• এনিমেশন: চার্টের লোডিং বা আপডেটিংয়ে এনিমেশন যোগ করা।
• লেজেন্ড ও টুলটিপস: চার্টের লেজেন্ড এবং টুলটিপস কাস্টমাইজ করা।

উদাহরণ: বার গ্যাপ কাস্টমাইজেশন:

options: {
    scales: {
        x: {
            barPercentage: 0.5, // বারগুলোর সাইজ কমানো
        }
    }
}

সারাংশ

Chart.js এর মাধ্যমে বার চার্ট তৈরি করা খুবই সহজ এবং এর মাধ্যমে আপনি ডেটার তুলনামূলক বিশ্লেষণ করতে পারবেন। এটি খুবই কাস্টমাইজেবল, এবং আপনি আপনার প্রয়োজন অনুসারে বার চার্টের রঙ, আকার, অক্ষ এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন। এটি সেলস ডেটা, জনসংখ্যা পরিসংখ্যান, বা যে কোনো তুলনামূলক ডেটার জন্য আদর্শ।

Chart.js একটি শক্তিশালী লাইব্রেরি যা বিভিন্ন ধরনের চার্ট তৈরি করতে সহায়ক। আজ আমরা দেখব কিভাবে Horizontal Bar Chart এবং Vertical Bar Chart তৈরি করা যায়। এই দুটি চার্ট বিভিন্ন ডেটা প্রদর্শনের জন্য উপকারী, এবং এগুলো bar টাইপের চার্টের মধ্যে পড়ে।

১. Vertical Bar Chart

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

Vertical Bar Chart উদাহরণ

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Bar Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Vertical Bar Chart Example</h1>
    <canvas id="verticalBarChart" width="400" height="200"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const ctx = document.getElementById('verticalBarChart').getContext('2d');
const verticalBarChart = new Chart(ctx, {
    type: 'bar', // Bar chart type
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'], // X-axis labels
        datasets: [{
            label: 'Sales', // Dataset label
            data: [10, 25, 15, 30, 40], // Data for Y-axis
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // Bar color
            borderColor: 'rgba(75, 192, 192, 1)', // Bar border color
            borderWidth: 1
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        scales: {
            y: {
                beginAtZero: true // Start the Y-axis at zero
            }
        }
    }
});

বর্ণনা:

• type: 'bar': এটি বারের চার্ট হিসেবে সেট করা হয়েছে।
• labels: X-axis এর জন্য মাসের নাম দেওয়া হয়েছে।
• data: Y-axis এর জন্য বিক্রয়ের ডেটা দেওয়া হয়েছে।
• backgroundColor: বারগুলির রং নির্ধারণ করা হয়েছে।
• borderColor: বারগুলির বর্ডারের রং নির্ধারণ করা হয়েছে।
• borderWidth: বর্ডারের প্রস্থ নির্ধারণ করা হয়েছে।

২. Horizontal Bar Chart

Horizontal Bar Chart হল একটি চার্ট যেখানে বারগুলো অনুভূমিকভাবে (Horizontal) প্রদর্শিত হয়। এটি কিছু বিশেষ ক্ষেত্রে তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়, বিশেষ করে যেখানে বিভাগগুলোর নাম অনেক বড় হয়।

Horizontal Bar Chart উদাহরণ

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Bar Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Horizontal Bar Chart Example</h1>
    <canvas id="horizontalBarChart" width="400" height="200"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const ctx = document.getElementById('horizontalBarChart').getContext('2d');
const horizontalBarChart = new Chart(ctx, {
    type: 'bar', // Bar chart type
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Y-axis labels
        datasets: [{
            label: 'Votes', // Dataset label
            data: [12, 19, 3, 5, 2], // Data for X-axis
            backgroundColor: 'rgba(255, 99, 132, 0.2)', // Bar color
            borderColor: 'rgba(255, 99, 132, 1)', // Bar border color
            borderWidth: 1
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        indexAxis: 'y', // Set axis to horizontal (y-axis will be the index axis)
        scales: {
            x: {
                beginAtZero: true // Start the X-axis at zero
            }
        }
    }
});

বর্ণনা:

• type: 'bar': এটি বারের চার্ট হিসেবে সেট করা হয়েছে, কিন্তু এখানে আমরা এটি অনুভূমিকভাবে (horizontal) কনফিগার করেছি।
• indexAxis: 'y': y নির্ধারণ করলে চার্টটি অনুভূমিকভাবে (horizontal) প্রদর্শিত হবে, অর্থাৎ X-axis এবং Y-axis এর অবস্থান পাল্টে যাবে।
• labels: Y-axis এর জন্য ব্যাখ্যাগুলি দেওয়া হয়েছে।
• data: X-axis এর জন্য ডেটা নির্ধারণ করা হয়েছে।

সারাংশ

• Vertical Bar Chart: এটি সাধারণত ডেটার তুলনা করার জন্য ব্যবহৃত হয়, যেখানে বারগুলি উল্লম্বভাবে প্রদর্শিত হয়।
• Horizontal Bar Chart: এই চার্টটি তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহার করা হয়, তবে বারগুলি অনুভূমিকভাবে (horizontal) প্রদর্শিত হয়।

উপরে দেওয়া উদাহরণগুলো Chart.js এর মাধ্যমে Vertical এবং Horizontal Bar Chart তৈরি করার প্রাথমিক পদক্ষেপগুলো দেখিয়েছে, যা সহজেই আপনার প্রজেক্টে ব্যবহার করা যাবে।

Chart.js এর মাধ্যমে বার চার্ট (Bar Chart) কাস্টমাইজ করা খুবই সহজ এবং নমনীয়। আপনি বিভিন্ন উপাদান যেমন রঙ, প্রস্থ, লেবেল, বর্ডার ইত্যাদি কাস্টমাইজ করতে পারেন। এখানে Bar Chart এর কাস্টমাইজেশন নিয়ে বিস্তারিত আলোচনা করা হলো, যাতে আপনি আপনার চার্টটিকে আরও দৃষ্টিনন্দন এবং ব্যবহারকারীর জন্য উপযোগী করে তুলতে পারেন।

1. Bar Chart রঙ কাস্টমাইজেশন (Colors)

Chart.js এ বার চার্টের রঙ কাস্টমাইজ করতে backgroundColor এবং borderColor প্রপার্টি ব্যবহার করা হয়।

• backgroundColor: বারগুলোর ভিতরের রঙ।
• borderColor: বারগুলোর বর্ডার রঙ।
• borderWidth: বর্ডারের প্রস্থ।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',  // Red bar color
                'rgba(54, 162, 235, 0.2)',  // Blue bar color
                'rgba(75, 192, 192, 0.2)',  // Green bar color
                'rgba(255, 159, 64, 0.2)'   // Yellow bar color
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
    }
});

এখানে, প্রতিটি বার (Red, Blue, Green, Yellow) এর রঙ এবং বর্ডার আলাদা করা হয়েছে।

2. Bar Width কাস্টমাইজেশন (Bar Width)

Chart.js এ বারগুলোর প্রস্থ কাস্টমাইজ করতে barThickness বা categoryPercentage ব্যবহার করা যায়।

• barThickness: একটি নির্দিষ্ট প্রস্থ নির্ধারণ করে।
• categoryPercentage: ক্যাটাগরি অনুযায়ী বারগুলোর প্রস্থ নিয়ন্ত্রণ করে, যাতে বেশ কয়েকটি বার একসাথে উপস্থাপিত হতে পারে।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            barThickness: 40  // নির্দিষ্ট প্রস্থ
        }]
    },
    options: {
        responsive: true,
    }
});

এখানে, barThickness এর মাধ্যমে একটি নির্দিষ্ট প্রস্থ দেওয়া হয়েছে, যা বারগুলোর আকার নিয়ন্ত্রণ করবে।

3. Labels কাস্টমাইজেশন (Labels)

Chart.js এ বার চার্টের labels কাস্টমাইজ করার মাধ্যমে এক্স-অক্ষের লেবেল পরিবর্তন করা যায়। আপনি লেবেলগুলির ফন্ট, সাইজ, রঙ, এবং অবস্থান কাস্টমাইজ করতে পারেন।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],  // লেবেলগুলি
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                ticks: {
                    font: {
                        size: 16,  // লেবেলের ফন্ট সাইজ
                        weight: 'bold',  // ফন্টের ওজন
                        family: 'Arial'  // ফন্টের পরিবার
                    },
                    color: 'rgba(54, 162, 235, 1)'  // লেবেলের রঙ
                }
            },
            y: {
                beginAtZero: true
            }
        }
    }
});

এখানে, এক্স-অক্ষের লেবেলগুলির ফন্ট সাইজ, ফন্টের পরিবার এবং রঙ কাস্টমাইজ করা হয়েছে। আপনি এখানে ticks প্রপার্টি ব্যবহার করে আরও কাস্টমাইজেশন করতে পারেন।

4. Bar Chart এর অ্যানিমেশন কাস্টমাইজেশন

Chart.js এ অ্যানিমেশনও কাস্টমাইজ করা যায়। আপনি animation অপশন ব্যবহার করে বার চার্টের অ্যানিমেশন সন্নিবেশ করতে পারেন।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        animation: {
            duration: 1500,  // অ্যানিমেশন সময়কাল
            easing: 'easeOutBounce'  // অ্যানিমেশন ইফেক্ট
        }
    }
});

এখানে animation অপশন দিয়ে অ্যানিমেশন সময়কাল এবং ইফেক্ট কাস্টমাইজ করা হয়েছে।

5. Stacked Bar Chart কাস্টমাইজেশন

Stacked বার চার্ট ব্যবহার করে একাধিক ডেটাসেট একই গ্রাফে স্তরে স্তরে দেখানো যায়। এটি scales এবং stacked অপশন দিয়ে কাস্টমাইজ করা হয়।

উদাহরণ:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Yellow'],
        datasets: [{
            label: 'Votes A',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(255, 99, 132, 0.2)'
        }, {
            label: 'Votes B',
            data: [6, 8, 4, 2],
            backgroundColor: 'rgba(54, 162, 235, 0.2)'
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true
            }
        }
    }
});

এখানে, stacked: true দিয়ে দুইটি ডেটাসেটকে একে অপরের উপর স্তরে স্তরে দেখানো হচ্ছে।

সারাংশ

Chart.js দিয়ে Bar Chart কাস্টমাইজ করতে আপনি বিভিন্ন উপাদান পরিবর্তন করতে পারেন, যেমন:

• Colors: বারগুলোর রঙ এবং বর্ডার রঙ কাস্টমাইজ করা।
• Widths: বারগুলোর প্রস্থ এবং বর্ডারের প্রস্থ কাস্টমাইজ করা।
• Labels: এক্স-অক্ষের এবং ওয়াই-অক্ষের লেবেল কাস্টমাইজ করা, যেমন ফন্ট, সাইজ, রঙ ইত্যাদি।
• Animation: চার্টের অ্যানিমেশন কাস্টমাইজ করা।

এই কাস্টমাইজেশনগুলো আপনার চার্টকে আরও দৃষ্টিনন্দন এবং কার্যকরী করতে সাহায্য করবে।

Line Chart (লাইন চার্ট) Chart.js-এ একটি জনপ্রিয় চার্ট টাইপ যা সময় বা ধারাবাহিক ডেটার পরিবর্তন বা প্রবণতা প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি লাইন বা পলিনোমিয়াল কনেকশনের মাধ্যমে বিভিন্ন ডেটা পয়েন্টের মধ্যে সম্পর্ক দেখায়। সাধারণত এটি ট্রেন্ড বা সময়ভিত্তিক বিশ্লেষণের জন্য ব্যবহৃত হয়।

Line Chart এর সুবিধা

• টাইম সিরিজ ডেটা: লাইন চার্ট সময়ের সাথে পরিবর্তিত ডেটা বা ধারাবাহিক তথ্য দেখানোর জন্য আদর্শ।
• ডেটার ট্রেন্ড: এটি সহজে ডেটার বৃদ্ধি বা হ্রাসের প্রবণতা দেখতে সাহায্য করে।
• সহজ তুলনা: একাধিক ডেটাসেটের তুলনা করতে সুবিধাজনক।

Line Chart তৈরি করার জন্য Chart.js কনফিগারেশন

নিচে একটি বেসিক Line Chart তৈরি করার উদাহরণ দেওয়া হলো:

HTML ফাইল:

<!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>
</head>
<body>
    <h1>Line Chart Example</h1>
    <canvas id="myLineChart" width="400" height="200"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript ফাইল (Line Chart কনফিগারেশন)

script.js:

const ctx = document.getElementById('myLineChart').getContext('2d');

// Line Chart কনফিগারেশন
const myLineChart = new Chart(ctx, {
    type: 'line',  // চার্টের ধরন: Line Chart
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'], // এক্স-অক্ষের লেবেল
        datasets: [{
            label: 'Sales Growth',  // ডেটাসেটের নাম
            data: [10, 20, 30, 40, 50], // Y-অক্ষের ডেটা পয়েন্ট
            borderColor: 'rgba(75, 192, 192, 1)', // লাইনটির রং
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // লাইনটির নিচে ব্যাকগ্রাউন্ড রং
            fill: true, // লাইন চার্টে ফিলিং
            tension: 0.4  // লাইনটির কোণ (Curve) কাস্টমাইজেশন
        }]
    },
    options: {
        responsive: true,  // রেসপন্সিভ চার্ট
        scales: {
            y: {
                beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
            }
        }
    }
});

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

Chart.js এর লাইন চার্টের বিভিন্ন কাস্টমাইজেশন অপশন রয়েছে, যেমন:

1. borderColor: লাইনটির রং নির্ধারণ করতে ব্যবহৃত হয়।
2. backgroundColor: লাইনটির নিচের ব্যাকগ্রাউন্ড রং কাস্টমাইজ করতে ব্যবহৃত হয়।
3. fill: true দিলে লাইনটির নিচে একটি ভরা অংশ দেখা যাবে।
4. tension: এটি লাইনটির কোণ (curve) নিয়ন্ত্রণ করে। 0.0 দিলে সোজা লাইন, 1.0 দিলে সম্পূর্ণ বাঁকা লাইন হবে।
5. labels: এক্স-অক্ষের লেবেল হিসেবে ব্যবহার করা হয়।

Line Chart এর আরও কাস্টমাইজেশন অপশন

1. লেজেন্ড কাস্টমাইজেশন:

   options: {
       plugins: {
           legend: {
               display: true,
               position: 'top'
           }
       }
   }
   

2. টুলটিপস কাস্টমাইজেশন:

   options: {
       plugins: {
           tooltip: {
               enabled: true,
               mode: 'index',
               intersect: false
           }
       }
   }
   

3. স্কেল কাস্টমাইজেশন:

   options: {
       scales: {
           x: {
               title: {
                   display: true,
                   text: 'Months'
               }
           },
           y: {
               title: {
                   display: true,
                   text: 'Sales'
               },
               beginAtZero: true
           }
       }
   }
   

Line Chart এর অন্যান্য বৈশিষ্ট্য

1. এনিমেশন: Chart.js লাইন চার্টে সুন্দর এনিমেশন অ্যাড করতে পারে, যা ডেটার পরিবর্তন দেখানোর জন্য ব্যবহারকারীদের জন্য আকর্ষণীয়।
2. রেসপন্সিভ: স্ক্রিনের সাইজ অনুযায়ী চার্ট নিজে থেকেই মানিয়ে নেয়।
3. মাল্টিপল ডেটাসেট: একাধিক ডেটাসেটের জন্য একসাথে লাইন চার্ট তৈরি করা যেতে পারে, যা বিভিন্ন ট্রেন্ড বা ক্যাটাগরি তুলনা করার জন্য উপযুক্ত।

সারাংশ

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

Chart.js একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন এর জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন। লাইন চার্ট (Line Chart) হল এমন একটি চার্ট যা সময়ের সাথে ডেটার পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয়, এবং এটি ট্রেন্ড বা প্যাটার্নের বিশ্লেষণে খুব কার্যকর।

লাইন চার্ট (Line Chart) কী?

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

লাইন চার্ট তৈরি করার ধাপসমূহ

Chart.js ব্যবহার করে লাইন চার্ট তৈরি করতে নিচের ধাপগুলো অনুসরণ করতে হবে:

১. HTML ফাইল তৈরি

প্রথমে একটি HTML ফাইল তৈরি করুন যেখানে চার্ট প্রদর্শিত হবে। এই ফাইলে একটি <canvas> ট্যাগ থাকতে হবে যেখানে চার্ট রেন্ডার হবে।

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Chart with Chart.js</title>
</head>
<body>
    <h1>My Line Chart</h1>
    <canvas id="myLineChart" width="400" height="200"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>

এখানে আমরা <canvas> ট্যাগ ব্যবহার করেছি, যার মাধ্যমে Chart.js চার্ট রেন্ডার করবে।

২. JavaScript কোড লেখার জন্য script.js ফাইল তৈরি করা

এখন, আমাদের ডেটা এবং কনফিগারেশন সেট করতে হবে। লাইন চার্ট তৈরি করতে Chart.js এর Chart কনস্ট্রাকটর ব্যবহার করা হয়।

script.js:

// Canvas এলিমেন্টের context অ্যাক্সেস করা
const ctx = document.getElementById('myLineChart').getContext('2d');

// নতুন লাইন চার্ট তৈরি করা
const myLineChart = new Chart(ctx, {
    type: 'line', // লাইন চার্ট টাইপ
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'], // X-অক্ষের লেবেল
        datasets: [{
            label: 'Sales Over Time', // ডেটাসেটের লেবেল
            data: [10, 20, 30, 40, 50], // Y-অক্ষের ডেটা পয়েন্ট
            borderColor: 'rgba(75, 192, 192, 1)', // লাইন রং
            borderWidth: 2, // লাইন প্রস্থ
            fill: false, // লাইনটি ফিল করা হবে না
        }]
    },
    options: {
        responsive: true, // চার্ট রেসপন্সিভ হবে
        scales: {
            y: {
                beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
            }
        }
    }
});

এখানে আমরা লাইন চার্ট তৈরি করেছি এবং তার জন্য নিম্নলিখিত কনফিগারেশন দিয়েছি:

• labels: এক্স-অক্ষের লেবেল হিসেবে আমরা মাসের নাম দিয়েছি।
• datasets: ডেটাসেটের মধ্যে ডেটা, লাইন রঙ, এবং লাইন প্রস্থ সেট করা হয়েছে।
• options: চার্টের রেসপন্সিভনেস এবং Y-অক্ষের শূন্য থেকে শুরু করার অপশন কনফিগার করা হয়েছে।

৩. চার্ট কাস্টমাইজেশন

Chart.js এর মাধ্যমে লাইন চার্টকে কাস্টমাইজ করা যায় বিভিন্ন উপায়ে। কিছু সাধারণ কাস্টমাইজেশন:

• লাইন রং পরিবর্তন: borderColor এর মাধ্যমে লাইন রঙ পরিবর্তন করা হয়।
• ডেটা পয়েন্টের আকার পরিবর্তন: pointRadius এর মাধ্যমে ডেটা পয়েন্টের আকার পরিবর্তন করা যায়।
• গ্রিড লাইন কাস্টমাইজেশন: scales এর মধ্যে গ্রিড লাইন কাস্টমাইজ করা যায়।

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

const myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sales Over Time',
            data: [10, 20, 30, 40, 50],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false,
            pointRadius: 5, // ডেটা পয়েন্টের আকার
            pointBackgroundColor: 'rgba(255, 99, 132, 1)' // পয়েন্টের রং
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(0, 0, 0, 0.1)' // গ্রিড লাইনের রং
                }
            },
            x: {
                grid: {
                    color: 'rgba(0, 0, 0, 0.1)' // এক্স-অক্ষের গ্রিড লাইনের রং
                }
            }
        }
    }
});

৪. লাইন চার্টের ব্যবহার ক্ষেত্র

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

• অর্থনীতি এবং ফিনান্স: স্টক মার্কেটের দাম, মূল্য সূচক ইত্যাদি দেখানোর জন্য।
• বিজ্ঞান এবং প্রকৌশল: তাপমাত্রা, চাপ, গতি ইত্যাদি বিশ্লেষণ করার জন্য।
• ওয়েব অ্যানালিটিক্স: ওয়েবসাইটের ট্রাফিক এবং ব্যবহারকারীর আচরণ ট্র্যাক করার জন্য।

সারাংশ

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

Chart.js-এ একাধিক ডেটাসেট ব্যবহার করে একাধিক সিরিজ বা ডেটা লাইন প্রদর্শন করা সম্ভব। এর মাধ্যমে একটি চার্টে একাধিক ডেটা ভিজ্যুয়ালাইজ করা যায়, যা ডেটার তুলনা করতে সাহায্য করে। এছাড়াও, লাইন স্টাইলিং ব্যবহার করে চার্টের লাইনগুলোকে কাস্টমাইজ করা যায়, যেমন রঙ, প্রস্থ, এবং স্টাইল।

Multiple Datasets in Chart.js

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

উদাহরণ: Multiple Datasets (লাইন চার্ট)

এখানে একটি লাইন চার্ট তৈরি করা হয়েছে যেখানে দুটি ডেটাসেট ব্যবহার করা হয়েছে:

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'line', // চার্ট টাইপ (লাইন চার্ট)
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'], // এক্স-অক্ষের লেবেল
        datasets: [
            {
                label: 'Dataset 1', // প্রথম ডেটাসেটের লেবেল
                data: [12, 19, 3, 5, 2, 3], // প্রথম ডেটাসেটের ডেটা পয়েন্ট
                borderColor: 'rgba(75, 192, 192, 1)', // লাইন রঙ
                borderWidth: 2, // লাইন প্রস্থ
                fill: false // লাইনটি পূর্ণ হবে না
            },
            {
                label: 'Dataset 2', // দ্বিতীয় ডেটাসেটের লেবেল
                data: [6, 11, 15, 6, 8, 12], // দ্বিতীয় ডেটাসেটের ডেটা পয়েন্ট
                borderColor: 'rgba(153, 102, 255, 1)', // লাইন রঙ
                borderWidth: 2, // লাইন প্রস্থ
                fill: false // লাইনটি পূর্ণ হবে না
            }
        ]
    },
    options: {
        responsive: true, // রেসপন্সিভ চার্ট
        scales: {
            y: {
                beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
            }
        }
    }
});

Explanation of Code:

1. Multiple Datasets: এখানে দুটি ডেটাসেট (Dataset 1 এবং Dataset 2) ব্যবহৃত হয়েছে, প্রতিটি ডেটাসেটে আলাদা ডেটা পয়েন্ট এবং লাইন রঙ রয়েছে। আপনি এখানে আরও ডেটাসেট যোগ করতে পারেন।
2. Border Color and Border Width: প্রতিটি ডেটাসেটের লাইন রঙ এবং প্রস্থ কাস্টমাইজ করা হয়েছে। এটি ডেটাসেটকে আলাদা এবং পরিষ্কারভাবে দেখতে সাহায্য করে।
3. Fill: fill: false ব্যবহার করে লাইনগুলোর নিচে পূর্ণতা দেওয়া হয়নি। আপনি যদি পূর্ণতা দিতে চান, fill: true ব্যবহার করতে পারেন।

Line Styling in Chart.js

Chart.js-এ লাইন স্টাইলিং কাস্টমাইজ করা যায়। এর মাধ্যমে আপনি লাইনটির রঙ, প্রস্থ, স্টাইল (যেমন ড্যাশড লাইন) পরিবর্তন করতে পারেন।

উদাহরণ: Line Styling (ড্যাশড লাইন)

এখানে লাইন স্টাইলিং কাস্টমাইজ করার জন্য একটি ড্যাশড লাইন (dashed line) তৈরি করা হয়েছে:

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Dataset 1',
            data: [12, 19, 3, 5, 2],
            borderColor: 'rgba(75, 192, 192, 1)', // লাইন রঙ
            borderWidth: 3, // লাইন প্রস্থ
            fill: false, // পূর্ণতা দিবে না
            borderDash: [5, 5] // ড্যাশড লাইন: [ড্যাশের দৈর্ঘ্য, স্পেস]
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Line Styling Options:

1. borderDash: borderDash অ্যারে ব্যবহার করে আপনি লাইনটির স্টাইল পরিবর্তন করতে পারেন। এটি দুইটি মান নেয়:

   • প্রথম মান: ড্যাশের দৈর্ঘ্য।
   • দ্বিতীয় মান: ড্যাশের মধ্যে স্পেসের দৈর্ঘ্য।

   উদাহরণ: [5, 5] দিয়ে আপনি একটি ড্যাশড লাইন তৈরি করবেন, যেখানে 5px ড্যাশ এবং 5px স্পেস থাকবে।

2. borderColor: লাইন রঙ পরিবর্তন করতে ব্যবহৃত হয়।
3. borderWidth: লাইন প্রস্থ কাস্টমাইজ করার জন্য ব্যবহৃত হয়।

আরও কিছু Line Styling:

• Line Type: Chart.js-এ লাইনটির ধরন পরিবর্তন করতে পারেন, যেমন সোজা (straight), বেজি (bezier) ইত্যাদি।

lineTension: 0.4 // বেজি লাইন

• Point Style: পয়েন্টের আকার এবং রঙ পরিবর্তন করতে পারেন।

pointStyle: 'rect', // পয়েন্টকে রেকটেঙ্গেল আকারে দেখাবে
pointRadius: 5 // পয়েন্টের আকার

সারাংশ

Chart.js-এ multiple datasets ব্যবহার করে একাধিক ডেটাসেটের চার্ট তৈরি করা যায়, যা বিভিন্ন ডেটার তুলনা করতে সহায়ক। একইভাবে, line styling কাস্টমাইজেশন ব্যবহার করে লাইনগুলির রঙ, প্রস্থ এবং স্টাইল পরিবর্তন করা যায়, যা চার্টের দৃষ্টিনন্দনতা এবং বোধগম্যতা বাড়ায়। borderDash, borderColor, এবং borderWidth সহ অন্যান্য স্টাইলিং অপশন ব্যবহার করে আপনি আপনার চার্টের লাইনগুলোকে আরও কাস্টমাইজ করতে পারেন।

Pie Chart এবং Doughnut Chart দুটি জনপ্রিয় চার্ট টাইপ যা Chart.js ব্যবহার করে সহজেই তৈরি করা যায়। এই চার্ট দুটি মূলত একটি সেগমেন্ট হিসেবে ডেটার অংশবিশেষ প্রদর্শন করে, তবে Doughnut Chart-এ কেন্দ্রের একটি খালি জায়গা থাকে।

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

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

ব্যবহার:

• বাজার শেয়ার।
• ভোটের ফলাফল।
• খরচের বিতরণ।

কোড উদাহরণ:

const ctx = document.getElementById('myPieChart').getContext('2d');
const myPieChart = new Chart(ctx, {
    type: 'pie', // Pie Chart টাইপ নির্ধারণ
    data: {
        labels: ['Red', 'Blue', 'Yellow'], // সেগমেন্টের লেবেল
        datasets: [{
            data: [30, 50, 20], // সেগমেন্টের মান
            backgroundColor: ['red', 'blue', 'yellow'], // সেগমেন্টের রঙ
            borderColor: ['#ffffff', '#ffffff', '#ffffff'], // সেগমেন্টের বর্ডার রঙ
            borderWidth: 2 // বর্ডারের প্রস্থ
        }]
    },
    options: {
        responsive: true, // রেসপন্সিভ ডিজাইন
        plugins: {
            legend: {
                position: 'top' // লেজেন্ডের অবস্থান
            },
            tooltip: {
                enabled: true // টুলটিপ চালু
            }
        }
    }
});

প্রধান বৈশিষ্ট্য:

• type: 'pie': পাই চার্টের ধরন।
• labels: এক্স-অক্ষের লেবেল যা প্রতিটি সেগমেন্টের নাম চিহ্নিত করে।
• data: সেগমেন্টের মান যা শতাংশের মাধ্যমে নির্দেশিত হয়।
• backgroundColor: প্রতিটি সেগমেন্টের রঙ।

Doughnut Chart (ডোনাট চার্ট)

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

ব্যবহার:

• বিক্রয় বা অন্যান্য তথ্যের সেগমেন্ট বিশ্লেষণ।
• ডেটার অংশবিশেষ চিত্রিত করা।

কোড উদাহরণ:

const ctx = document.getElementById('myDoughnutChart').getContext('2d');
const myDoughnutChart = new Chart(ctx, {
    type: 'doughnut', // Doughnut Chart টাইপ নির্ধারণ
    data: {
        labels: ['Red', 'Blue', 'Green'], // সেগমেন্টের লেবেল
        datasets: [{
            data: [20, 50, 30], // সেগমেন্টের মান
            backgroundColor: ['red', 'blue', 'green'], // সেগমেন্টের রঙ
            borderColor: ['#ffffff', '#ffffff', '#ffffff'], // সেগমেন্টের বর্ডার রঙ
            borderWidth: 2 // বর্ডারের প্রস্থ
        }]
    },
    options: {
        responsive: true, // রেসপন্সিভ ডিজাইন
        plugins: {
            legend: {
                position: 'top' // লেজেন্ডের অবস্থান
            },
            tooltip: {
                enabled: true // টুলটিপ চালু
            }
        }
    }
});

প্রধান বৈশিষ্ট্য:

• type: 'doughnut': ডোনাট চার্টের ধরন।
• labels: সেগমেন্টের লেবেল।
• data: সেগমেন্টের মান।
• backgroundColor: প্রতিটি সেগমেন্টের রঙ।
• borderColor: বর্ডার রঙ।

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

সারাংশ

• Pie Chart এবং Doughnut Chart উভয়ই ডেটার অংশবিশেষ বা শতাংশ দেখানোর জন্য ব্যবহৃত হয়, তবে ডোনাট চার্টের কেন্দ্রে খালি জায়গা থাকে, যা অতিরিক্ত তথ্য প্রদর্শন করতে সহায়তা করে।
• আপনি যদি শুধু ডেটার শতাংশ দেখাতে চান, তবে Pie Chart ব্যবহার করতে পারেন, আর যদি আপনি কেন্দ্রীয় জায়গায় অতিরিক্ত তথ্য চান, তবে Doughnut Chart ব্যবহার করতে পারেন।
• Chart.js সহজেই এই চার্টগুলিকে কাস্টমাইজ এবং ডেটা সেটিংস অ্যাডজাস্ট করার সুযোগ দেয়।

Chart.js এর মধ্যে Pie এবং Doughnut চার্ট দুটি খুবই জনপ্রিয় ভিজ্যুয়ালাইজেশন টুল। যদিও দুটোই অংশবিশেষের ডেটা প্রদর্শন করতে ব্যবহৃত হয়, তবুও তাদের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে। এই দুটি চার্টের ধরন এবং ব্যবহারের মধ্যে পার্থক্য জানলে, আপনি সঠিক পরিস্থিতিতে সঠিক চার্ট নির্বাচন করতে পারবেন।

১. আকৃতি এবং রূপ

• Pie Chart (পাই চার্ট):
  • পাই চার্টে একটি পূর্ণ বৃত্ত থাকে যা বিভিন্ন অংশে বিভক্ত করা হয়।
  • এতে কোনো খালি কেন্দ্র থাকে না, পুরো বৃত্ত ডেটার অংশ হিসেবে ভাঙা হয়।
• Doughnut Chart (ডোনাট চার্ট):
  • ডোনাট চার্টের আকৃতি পাই চার্টের মতো হলেও এর কেন্দ্রে একটি খালি অংশ থাকে (যা ডোনাটের মতো দেখতে), যা ভিজ্যুয়াল পদ্ধতিতে আরও আকর্ষণীয়।
  • কেন্দ্রে একটি খালি জায়গা থাকার কারণে, আপনি অতিরিক্ত তথ্য বা কাস্টম লেবেল এখানে দেখাতে পারেন।

২. দৃশ্যমানতা এবং তথ্য উপস্থাপন

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

৩. কাস্টমাইজেশন এবং বৈশিষ্ট্য

• Pie Chart:
  • পাই চার্ট সাধারণত কাস্টমাইজেশন সাপোর্ট করে যেমন রঙ, লেবেল, বর্ডার, আউটলাইন ইত্যাদি। তবে কেন্দ্রে কোনো অতিরিক্ত তথ্য দেখানোর কোনো অপশন নেই।
• Doughnut Chart:
  • ডোনাট চার্টে, আপনি কেবল অংশগুলির রঙ এবং আকার কাস্টমাইজ করতে পারেন না, বরং কেন্দ্রে অতিরিক্ত তথ্য, লেবেল বা এমনকি অন্যান্য চার্টও প্রদর্শন করতে পারেন।

৪. ডেটা উপস্থাপন

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

৫. প্রয়োজনীয়তা এবং ব্যবহার ক্ষেত্র

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

৬. পারফরম্যান্স

• Pie Chart:
  • পাই চার্ট সাধারনত কমপার্ট ডেটা সাইজের জন্য ভালো এবং দ্রুত রেন্ডার হয়।
• Doughnut Chart:
  • ডোনাট চার্ট, যদিও পাই চার্টের মতো, কিছুটা অতিরিক্ত কম্প্লেক্স এবং অতিরিক্ত ইনফরমেশন প্রদর্শন করার কারণে একটু বেশি রিসোর্স ব্যবহার করতে পারে।

সারাংশ

উপসংহার

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

Chart.js-এ slices কাস্টমাইজ করা এবং animation যোগ করা খুবই সহজ এবং আপনি বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করতে পারেন। এই অংশে আমরা দেখব কীভাবে পাই চার্ট (Pie Chart) বা ডোনাট চার্ট (Doughnut Chart) এর slices কাস্টমাইজ এবং animation যুক্ত করা যায়।

স্লাইস কাস্টমাইজ করা (Customizing Slices)

Chart.js-এ স্লাইস কাস্টমাইজ করতে, বিশেষ করে পাই বা ডোনাট চার্টে, আপনি segment বা arc কাস্টমাইজেশন করতে পারেন। স্লাইসের রঙ, সীমানা, আকার, ইত্যাদি পরিবর্তন করা যায়।

উদাহরণ: পাই চার্টে স্লাইস কাস্টমাইজ করা

HTML (canvas)

<canvas id="myPieChart" width="400" height="400"></canvas>

JavaScript (Chart.js কনফিগারেশন)

const ctx = document.getElementById('myPieChart').getContext('2d');
const myPieChart = new Chart(ctx, {
    type: 'pie', // পাই চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'], // স্লাইসের নাম
        datasets: [{
            data: [10, 20, 30, 40], // স্লাইসের মান
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'], // স্লাইসের রঙ
            borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'], // স্লাইসের বর্ডার রঙ
            borderWidth: 1 // বর্ডারের প্রস্থ
        }]
    },
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        return tooltipItem.label + ': ' + tooltipItem.raw + '%'; // টুলটিপ কাস্টমাইজেশন
                    }
                }
            }
        }
    }
});

• backgroundColor: প্রতিটি স্লাইসের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা যায়।
• borderColor: স্লাইসের বর্ডার রঙ কাস্টমাইজ করা যায়।
• borderWidth: স্লাইসের বর্ডারের প্রস্থ কাস্টমাইজ করা যায়।

Animation যোগ করা (Adding Animation)

Chart.js চার্টে অ্যানিমেশন যোগ করা সহজ। আপনি বিভিন্ন ধরনের অ্যানিমেশন ফাংশন ব্যবহার করতে পারেন যেমন ডেটা লোড হওয়া, চার্টে স্লাইস প্রবেশ করা ইত্যাদি।

উদাহরণ: পাই চার্টে অ্যানিমেশন যোগ করা

HTML (canvas)

<canvas id="myAnimatedPieChart" width="400" height="400"></canvas>

JavaScript (Chart.js কনফিগারেশন)

const ctx = document.getElementById('myAnimatedPieChart').getContext('2d');
const myAnimatedPieChart = new Chart(ctx, {
    type: 'pie', // পাই চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            data: [10, 20, 30, 40],
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
            borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        animation: {
            animateRotate: true, // স্লাইস রোটেট হবে
            animateScale: true, // স্লাইসের আকার পরিবর্তন হবে
            duration: 1500, // অ্যানিমেশনের সময়কাল (মিলিসেকেন্ড)
            easing: 'easeInOutBounce' // অ্যানিমেশনের ইজিং
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(tooltipItem) {
                        return tooltipItem.label + ': ' + tooltipItem.raw + '%';
                    }
                }
            }
        }
    }
});

• animateRotate: স্লাইসের রোটেশন অ্যানিমেশন চালু বা বন্ধ করতে ব্যবহার হয়।
• animateScale: স্লাইসের আকার পরিবর্তন করার অ্যানিমেশন চালু বা বন্ধ করতে ব্যবহার হয়।
• duration: অ্যানিমেশনের সময়কাল (মিলিসেকেন্ডে) কাস্টমাইজ করা যায়।
• easing: অ্যানিমেশনের গতির টাইপ (যেমন easeInOutBounce, linear ইত্যাদি) কাস্টমাইজ করা যায়।

আরও কিছু কাস্টমাইজেশন এবং অ্যানিমেশন অপশন

• Legend কাস্টমাইজেশন: Chart.js-এ লেজেন্ড কাস্টমাইজ করা যায়। যেমন, লেজেন্ডের অবস্থান পরিবর্তন করা (উপর, নিচে, ডান বা বাম)।

  options: {
      plugins: {
          legend: {
              position: 'top', // লেজেন্ডের অবস্থান
              labels: {
                  font: {
                      size: 16 // ফন্ট সাইজ কাস্টমাইজ করা
                  }
              }
          }
      }
  }
  

• Tooltips কাস্টমাইজেশন: Tooltips কাস্টমাইজ করার মাধ্যমে, আপনি প্রদর্শিত টুলটিপের তথ্য পরিবর্তন করতে পারেন এবং এটিকে আরও ইন্টারেক্টিভ করতে পারেন।

  options: {
      plugins: {
          tooltip: {
              backgroundColor: 'rgba(0, 0, 0, 0.7)', // টুলটিপের ব্যাকগ্রাউন্ড রঙ
              titleColor: 'white', // টুলটিপের টাইটেল রঙ
              bodyColor: 'white', // টুলটিপের বডি রঙ
              displayColors: false // স্লাইসের রঙ দেখানো বন্ধ করা
          }
      }
  }
  

সারাংশ

Chart.js দিয়ে slices কাস্টমাইজ করা এবং animation যোগ করা বেশ সহজ। আপনি স্লাইসের রঙ, সীমানা, আকার ইত্যাদি কাস্টমাইজ করতে পারেন এবং এছাড়া অ্যানিমেশন দিয়ে চার্টকে আরও ইন্টারেক্টিভ ও আকর্ষণীয় করে তুলতে পারেন। এটি ডেটা ভিজ্যুয়ালাইজেশনকে আরও প্রভাবশালী এবং ব্যবহারকারী-বান্ধব করে তোলে।

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

রাডার চার্ট সাধারণত ব্যবহৃত হয়:

• বিভিন্ন বিভাগের তুলনা বা পারফরম্যান্স বিশ্লেষণ।
• একাধিক ভেরিয়েবলের উপর ভিত্তি করে গ্রাফ প্রদর্শন।
• স্কোর বা পারফরম্যান্সের তুলনা করা।

রাডার চার্ট তৈরি করার জন্য Chart.js কনফিগারেশন

রাডার চার্ট তৈরি করতে, প্রথমে type: 'radar' ব্যবহার করে Chart.js এর কনফিগারেশন করতে হবে। নিচে একটি রাডার চার্টের বেসিক কনফিগারেশন উদাহরণ দেওয়া হলো।

উদাহরণ: রাডার চার্ট (Radar Chart)

// Get the context of the canvas element
const ctx = document.getElementById('myRadarChart').getContext('2d');

// Create the radar chart
const radarChart = new Chart(ctx, {
    type: 'radar', // Chart type: Radar
    data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'], // Axis labels
        datasets: [{
            label: 'Activity', // Dataset label
            data: [20, 30, 40, 50, 60], // Data points for each axis
            borderColor: 'rgba(255, 99, 132, 1)', // Border color
            borderWidth: 2, // Border width
            backgroundColor: 'rgba(255, 99, 132, 0.2)', // Background color
            fill: true // Whether to fill the area inside the radar chart
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        scales: {
            r: {
                angleLines: {
                    display: true, // Display lines for each axis
                },
                suggestedMin: 0, // Minimum value suggested for the chart
                suggestedMax: 100 // Maximum value suggested for the chart
            }
        }
    }
});

রাডার চার্ট কনফিগারেশন ব্যাখ্যা:

1. type: 'radar': এটি নির্দেশ করে যে, চার্টটি একটি রাডার চার্ট হবে।
2. labels: এই অ্যারে এক্স-অক্ষের লেবেল (যেমন "Eating", "Drinking", ইত্যাদি) নির্ধারণ করে। এগুলি রাডারের বিভিন্ন অক্ষ হিসেবে প্রদর্শিত হবে।
3. datasets: এটি ডেটাসেটের অ্যারে, যেখানে প্রতিটি ডেটাসেটের জন্য ডেটা পয়েন্ট এবং কনফিগারেশন নির্ধারণ করা হয়।
   • data: এই অ্যারে ডেটা পয়েন্টের মান। প্রতিটি মান একটি রাডার অক্ষের জন্য নির্ধারণ করা হবে।
   • borderColor: ডেটাসেটের বর্ডার রং নির্ধারণ করে।
   • backgroundColor: রাডার চার্টের ভিতরের রং নির্ধারণ করে (অর্থাৎ ডেটা পয়েন্টের ভেতরের অংশ)।
   • fill: এটি true হলে, রাডারের মধ্যে পূর্ণতা থাকবে এবং ডেটা পয়েন্টগুলির মধ্যবর্তী অঞ্চলটি পূর্ণ হবে।
4. options:
   • responsive: এটি চার্টকে রেসপন্সিভ করে তোলে, অর্থাৎ এটি স্ক্রিনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে মানিয়ে যাবে।
   • scales:
     • r: রাডার চার্টের জন্য স্কেল কনফিগারেশন।
     • angleLines.display: এটি রাডারের প্রতিটি অক্ষের জন্য লাইন প্রদর্শন করবে।
     • suggestedMin ও suggestedMax: রাডারের স্কেল অনুযায়ী সর্বনিম্ন এবং সর্বোচ্চ মান নির্ধারণ করে।

রাডার চার্ট কাস্টমাইজেশন

আপনি রাডার চার্টের বেশ কিছু কাস্টমাইজেশন করতে পারেন, যেমন:

• অ্যাক্সেসের নাম পরিবর্তন (Axis Labels)।
• রঙ পরিবর্তন (Background Color, Border Color)।
• অ্যানিমেশন (Animation)।

উদাহরণস্বরূপ, রাডার চার্টে আপনি বিভিন্ন ডেটাসেট যুক্ত করতে পারেন বা একাধিক সিরিজের তুলনা করতে পারেন।

একাধিক ডেটাসেটের রাডার চার্ট:

const multiRadarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'],
        datasets: [
            {
                label: 'Dataset 1',
                data: [20, 30, 40, 50, 60],
                borderColor: 'rgba(255, 99, 132, 1)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                fill: true
            },
            {
                label: 'Dataset 2',
                data: [30, 40, 50, 60, 70],
                borderColor: 'rgba(54, 162, 235, 1)',
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                fill: true
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            r: {
                angleLines: {
                    display: true
                },
                suggestedMin: 0,
                suggestedMax: 100
            }
        }
    }
});

এখানে দুটি আলাদা ডেটাসেট ব্যবহার করা হয়েছে, যেগুলোর প্রতিটির জন্য ভিন্ন রং এবং ডেটা পয়েন্ট রয়েছে।

সারাংশ

রাডার চার্ট (Radar Chart) ডেটার বিভিন্ন ভেরিয়েবলের মধ্যে সম্পর্ক এবং পার্থক্য দেখতে ব্যবহার করা হয়। এটি চার্টের বিভিন্ন অক্ষ (Axis) থেকে রেডিয়াল আকারে ডেটা পয়েন্ট গুলি প্রদর্শন করে। Chart.js এ রাডার চার্ট তৈরি করা সহজ এবং কাস্টমাইজযোগ্য, যা ডেটা ভিজ্যুয়ালাইজেশনে অত্যন্ত কার্যকরী।

Chart.js Polar Coordinate System ব্যবহার করে এমন চার্ট তৈরি করতে সহায়ক, যা সাধারণত একাধিক ভেরিয়েবল বা বিভাগের মধ্যে সম্পর্ক এবং পরিমাণ প্রদর্শনের জন্য ব্যবহৃত হয়। Polar Coordinate System চার্টগুলোর মধ্যে Polar Area Chart এবং Radar Chart দুটি প্রধান চার্ট টাইপ। এই ধরনের চার্টগুলো বিশেষত ত্রিমাত্রিক ডেটা বিশ্লেষণ এবং তুলনা করার জন্য উপযুক্ত।

Polar Coordinate System কি?

Polar Coordinate System একটি ভিন্ন ধরণের কোঅর্ডিনেট সিস্টেম যা ডেটাকে একটি কেন্দ্রীয় পয়েন্ট থেকে রেডিয়াল ভাবে রেন্ডার করে। এটি সাধারণত রেডিয়াস (বুদবুদ বা সেগমেন্টের আকার নির্ধারণকারী মান) এবং অ্যাঙ্গেল (একটি বৃত্তের মধ্যে এক্স-অক্ষ বা ওয়াই-অক্ষের সাথে কোণ) দ্বারা পরিচালিত হয়।

Chart.js এ Polar Area Chart এবং Radar Chart Polar Coordinate System ব্যবহার করে ডেটা প্রদর্শন করা হয়।

Polar Area Chart

Polar Area Chart Polar Coordinate System ব্যবহার করে ডেটাকে আকার এবং পরিমাণ অনুযায়ী সেগমেন্টে ভাগ করে প্রদর্শন করে। এটি সাধারণত এমন ডেটা দেখানোর জন্য ব্যবহৃত হয় যেখানে একাধিক বিভাগ বা ভিন্ন ভিন্ন সিরিজের মধ্যে তুলনা করতে হয়।

উদাহরণ: Polar Area Chart

const ctx = document.getElementById('myPolarChart').getContext('2d');
const myPolarChart = new Chart(ctx, {
    type: 'polarArea', // Polar Area Chart type
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Labels for each section
        datasets: [{
            label: 'Vote Distribution',
            data: [12, 19, 3, 5, 2], // Data for each section
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        scales: {
            r: {
                beginAtZero: true, // Start the radius from zero
            }
        }
    }
});

• type: 'polarArea': এখানে Polar Area Chart টাইপ ব্যবহার করা হয়েছে।
• labels: এক্স-অক্ষের লেবেলগুলোর জন্য ডেটা (যেমন 'Red', 'Blue', 'Yellow', ইত্যাদি)।
• datasets: এখানে ডেটা পয়েন্ট এবং সেগমেন্টের জন্য রঙ নির্ধারণ করা হয়েছে।
• backgroundColor: প্রতিটি সেগমেন্টের জন্য রঙ নির্ধারণ করা হয়।
• borderColor: সেগমেন্টের বর্ডার রঙ।
• r (Radius): স্কেল যেটি রেডিয়াস বা সেগমেন্টের আকার নির্ধারণ করে। এটি beginAtZero: true দিয়ে নিশ্চিত করা হয়েছে যে, রেডিয়াস শূন্য থেকে শুরু হবে।

Radar Chart

Radar Chart (বা Web Chart) একটি চতুর্ভুজ রিডিয়াল চার্ট, যেখানে একাধিক ডেটাসেটকে প্রতিটি সেগমেন্টে প্লট করা হয়। এটি সাধারণত একাধিক ভেরিয়েবলের তুলনা করতে ব্যবহৃত হয়।

উদাহরণ: Radar Chart

const radarCtx = document.getElementById('myRadarChart').getContext('2d');
const myRadarChart = new Chart(radarCtx, {
    type: 'radar', // Radar Chart type
    data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'], // Labels for each axis
        datasets: [{
            label: 'Activity Distribution',
            data: [10, 20, 30, 40, 50], // Data for each category
            fill: true, // Fill the area inside the chart
            backgroundColor: 'rgba(255, 99, 132, 0.2)', // Background color of the area
            borderColor: 'rgba(255, 99, 132, 1)', // Border color
            borderWidth: 1 // Border width
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        scales: {
            r: {
                beginAtZero: true, // Start the radial scale from zero
            }
        }
    }
});

• type: 'radar': এখানে Radar Chart টাইপ ব্যবহার করা হয়েছে।
• labels: এক্স-অক্ষের লেবেল (এটি সেগমেন্টের শিরোনাম হিসেবে কাজ করে)।
• datasets: একাধিক ডেটা সিরিজের জন্য ডেটা এবং স্টাইল কনফিগারেশন।
• backgroundColor: গ্রাফের ভিতরের রঙ।
• fill: true: এটি চার্টের ভিতরের এলাকা পূর্ণ করবে।
• borderColor: সেগমেন্টের সীমানার রঙ।
• r (Radius): রেডিয়াল স্কেল কনফিগারেশন।

Polar Coordinate System এর উপকারিতা

• বিভিন্ন ক্যাটাগরি বা সেগমেন্টের মধ্যে তুলনা: Polar Area Chart এবং Radar Chart ডেটার বিভিন্ন ভেরিয়েবল বা ক্যাটাগরির মধ্যে সম্পর্ক দেখাতে কার্যকরী।
• ডেটার আকার ও পরিমাণ প্রদর্শন: Polar Coordinate System ডেটার আকার এবং পরিমাণের একটি তুলনামূলক দৃশ্য প্রদান করে, যা সাধারণত চক্রাকার বা বৃত্তাকারভাবে প্রদর্শিত হয়।
• সহজ ভিজ্যুয়ালাইজেশন: এটি ডেটাকে খুব সহজ এবং কার্যকরভাবে উপস্থাপন করতে সহায়তা করে, বিশেষত যখন একাধিক ডেটাসেট বা ক্যাটাগরি থাকে।

সারাংশ

Chart.js এর Polar Coordinate System দুটি প্রধান চার্ট টাইপ—Polar Area Chart এবং Radar Chart—প্রদান করে, যা ডেটার ভিজ্যুয়ালাইজেশনকে আকর্ষণীয় এবং সহজ করে তোলে। Polar Area Chart একাধিক সেগমেন্টে ডেটা প্রদর্শন করে, যেখানে Radar Chart একাধিক ভেরিয়েবলের মধ্যে তুলনা করার জন্য ব্যবহৃত হয়। Polar Coordinate System-এর এই চার্টগুলি সাধারণত বিভিন্ন বিভাগ বা ভেরিয়েবলের মধ্যে সম্পর্ক এবং পরিমাণ প্রদর্শন করতে ব্যবহৃত হয়।

Radar Chart একটি বিশেষ ধরনের চার্ট যা বিভিন্ন ভেরিয়েবলের মধ্যে তুলনা করতে সাহায্য করে। এটি একটি কেন্দ্রীয় পয়েন্ট থেকে রেডিয়াল আকারে ডেটা প্রদর্শন করে। Chart.js এর মাধ্যমে Radar Chart কাস্টমাইজ করার জন্য আপনি স্টাইল এবং লেবেলস (Labels) কাস্টমাইজ করতে পারবেন। নিচে Radar Chart এর স্টাইলিং এবং লেবেল কাস্টমাইজ করার বিস্তারিত তথ্য দেয়া হলো।

Radar Chart তৈরি করা

প্রথমে একটি সাধারণ Radar Chart তৈরি করা যাক।

কোড উদাহরণ:

const ctx = document.getElementById('radarChart').getContext('2d');

const radarChart = new Chart(ctx, {
    type: 'radar', // Chart type: Radar
    data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'], // Labels for the radar
        datasets: [{
            label: 'Activity Level', // Label for the dataset
            data: [20, 30, 40, 50, 60], // Data for each label
            borderColor: 'rgba(75, 192, 192, 1)', // Border color
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // Background color
            borderWidth: 2, // Border width
            fill: true // Fill the area inside the radar chart
        }]
    },
    options: {
        scales: {
            r: {
                angleLines: {
                    display: true, // Display the angle lines
                    color: 'rgba(0, 0, 0, 0.1)' // Color of the angle lines
                },
                grid: {
                    color: 'rgba(0, 0, 0, 0.1)', // Color of the grid lines
                },
                ticks: {
                    display: true, // Display the ticks on the radar
                    stepSize: 10, // The distance between ticks
                    beginAtZero: true // Start the ticks at zero
                }
            }
        },
        plugins: {
            legend: {
                position: 'top', // Position of the legend
                labels: {
                    font: {
                        size: 14 // Font size of the legend
                    }
                }
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)', // Background color of the tooltip
                bodyFont: {
                    size: 14 // Font size of the tooltip body
                }
            }
        }
    }
});

Radar Chart এর Styling কাস্টমাইজ করা

Chart.js এর মাধ্যমে Radar Chart এর স্টাইলিং অনেক কিছু কাস্টমাইজ করা যায়। কিছু প্রধান স্টাইলিং অপশন নিচে দেওয়া হলো:

১. Grid Lines এবং Angle Lines কাস্টমাইজ করা

Grid Lines এবং Angle Lines চার্টের মধ্যে ডেটার লেবেল এবং পয়েন্টগুলির সাহায্যে সাহায্য করে। আপনি এগুলোর রঙ, দৃশ্যমানতা এবং স্টাইল পরিবর্তন করতে পারেন।

scales: {
    r: {
        angleLines: {
            display: true, // Angle lines visible
            color: 'rgba(0, 0, 0, 0.1)', // Color of the angle lines
            lineWidth: 2 // Line width for the angle lines
        },
        grid: {
            color: 'rgba(0, 0, 0, 0.1)', // Color of the grid lines
            lineWidth: 1 // Line width for the grid lines
        },
        ticks: {
            display: true, // Display ticks
            stepSize: 10, // Space between each tick
            beginAtZero: true // Start ticks at 0
        }
    }
}

২. Labels কাস্টমাইজ করা

আপনার Radar Chart এর labels (লেবেলস) কাস্টমাইজ করতে পারেন, যেমন তাদের রঙ, আকার এবং ফন্ট পরিবর্তন করা। font এবং color এর মাধ্যমে আপনি লেবেলের কাস্টমাইজেশন করতে পারবেন।

scales: {
    r: {
        ticks: {
            font: {
                size: 14, // Font size of the ticks
                family: 'Arial', // Font family
                weight: 'bold' // Font weight
            },
            color: 'rgba(0, 0, 0, 0.7)' // Tick label color
        }
    }
}

৩. Dataset এর Border এবং Fill কাস্টমাইজ করা

আপনার Radar Chart এর dataset এর সীমানা (border) এবং ভরাট (fill) রঙ কাস্টমাইজ করতে পারেন। এটি চার্টের দৃশ্যমানতাকে আরও আকর্ষণীয় করে তোলে।

datasets: [{
    label: 'Activity Level',
    data: [20, 30, 40, 50, 60],
    borderColor: 'rgba(75, 192, 192, 1)', // Border color of the radar chart
    backgroundColor: 'rgba(75, 192, 192, 0.2)', // Background color inside the radar chart
    borderWidth: 2, // Border width
    fill: true // Whether to fill the area inside the chart
}]

৪. Legend এবং Tooltip কাস্টমাইজ করা

Chart.js এ legend এবং tooltip কাস্টমাইজ করার জন্য আপনি plugins অপশন ব্যবহার করতে পারেন। এটি চার্টের ডেটা পয়েন্টের বর্ণনা এবং টুলটিপ স্টাইলিং নিয়ন্ত্রণ করে।

plugins: {
    legend: {
        position: 'top', // Legend position: 'top', 'bottom', 'left', 'right'
        labels: {
            font: {
                size: 14, // Font size of the legend labels
                family: 'Verdana' // Font family of the legend
            },
            color: 'rgba(0, 0, 0, 0.8)' // Legend label color
        }
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)', // Tooltip background color
        bodyFont: {
            size: 14, // Tooltip body font size
            family: 'Arial' // Tooltip font family
        },
        bodyColor: '#fff' // Tooltip body text color
    }
}

সারাংশ

Chart.js এর Radar Chart কাস্টমাইজ করা খুবই সহজ এবং এটি বিভিন্ন ধরনের স্টাইলিং অপশন প্রদান করে। আপনি Grid lines, Angle lines, Labels, Dataset border, Tooltip এবং Legend এর রং, আকার, অবস্থান ইত্যাদি কাস্টমাইজ করে আপনার চার্টটি সুন্দর এবং কার্যকরী করে তুলতে পারেন। কাস্টমাইজেশন এর মাধ্যমে আপনি আপনার ডেটা আরও আকর্ষণীয় এবং পরিষ্কারভাবে উপস্থাপন করতে পারবেন।

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

Polar Area Chart এর ব্যবহার

Polar Area Chart সাধারণত ব্যবহার করা হয়:

• বিভিন্ন আঞ্চলিক বা ভৌগোলিক এলাকার তুলনা।
• একটি নির্দিষ্ট বিষয় বা বিভাগের মধ্যে বিভিন্ন অংশের তুলনা।
• কাস্টমার সেগমেন্টেশন বা মার্কেট শেয়ার বিশ্লেষণ।

Polar Area Chart এর বেসিক কনফিগারেশন

Chart.js এর মাধ্যমে Polar Area Chart তৈরি করার জন্য কিছু নির্দিষ্ট কনফিগারেশন প্রয়োজন হয়। এতে চার্টের ধরন, ডেটাসেট, এবং কাস্টমাইজেশন অপশন দেওয়া থাকে। নিচে একটি সাধারণ Polar Area Chart কনফিগারেশন দেওয়া হলো।

কোড উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polar Area Chart Example</title>
</head>
<body>
    <h1>Market Share Comparison (Polar Area Chart)</h1>
    <!-- Chart.js Canvas -->
    <canvas id="myPolarAreaChart" width="400" height="200"></canvas>

    <!-- Chart.js Library -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Custom Script for Polar Area Chart -->
    <script>
        const ctx = document.getElementById('myPolarAreaChart').getContext('2d');
        
        const myPolarAreaChart = new Chart(ctx, {
            type: 'polarArea', // Chart type: Polar Area
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Labels for each segment
                datasets: [{
                    label: 'Market Share', // Label for the dataset
                    data: [50, 40, 30, 20, 10], // Data points for each segment
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1 // Border width of the segments
                }]
            },
            options: {
                responsive: true, // Make the chart responsive
                plugins: {
                    legend: {
                        position: 'top', // Position of the legend (top, bottom, left, right)
                    },
                    tooltip: {
                        enabled: true // Show tooltips on hover
                    }
                }
            }
        });
    </script>
</body>
</html>

Polar Area Chart কনফিগারেশন বিশ্লেষণ

1. type: 'polarArea': এটি চার্টের ধরন নির্ধারণ করে। এখানে আমরা 'polarArea' টাইপ ব্যবহার করেছি, যা Polar Area Chart তৈরি করবে।
2. data: ডেটা এবং লেবেলসেটিং:
   • labels: চার্টের জন্য লেবেল তৈরি করা হয় (যেমন, বিভিন্ন রঙ বা ক্যাটেগরি: Red, Blue, Yellow)।
   • datasets: এক বা একাধিক ডেটাসেট থাকতে পারে, যেখানে ডেটা পয়েন্ট (যেমন মার্কেট শেয়ার) এবং আঙ্গুলের রঙ নির্ধারণ করা হয়।
     • data: এই অংশে প্রতিটি সেগমেন্টের মান (যেমন মার্কেট শেয়ার বা অন্যান্য ডেটা) প্রদান করা হয়।
     • backgroundColor: প্রতিটি সেগমেন্টের ব্যাকগ্রাউন্ড কালার।
     • borderColor: সেগমেন্টগুলোর বর্ডার কালার।
     • borderWidth: সেগমেন্টের বর্ডারের প্রস্থ।
3. options: চার্টের কাস্টমাইজেশন অপশন:
   • responsive: true: চার্টটি স্ক্রীনের আকার অনুযায়ী রেসপন্সিভ হবে।
   • plugins: এটি লেজেন্ড এবং টুলটিপ কনফিগার করতে ব্যবহৃত হয়:
     • legend: লেজেন্ডটি কিভাবে প্রদর্শিত হবে তা কনফিগার করা হয়।
     • tooltip: টুলটিপগুলো হোভার করার সময় প্রদর্শিত হবে।

Polar Area Chart এর কাস্টমাইজেশন

Chart.js এর Polar Area Chart অনেকটা কাস্টমাইজ করা যায়। নিচে কিছু কাস্টমাইজেশন উপায় দেওয়া হলো:

1. আঙ্গুলের আকার পরিবর্তন: Polar Area Chart এর আঙ্গুলগুলোর আকার ডেটার মান অনুসারে পরিবর্তিত হয়। যদি আপনি আঙ্গুলের আকার নিয়ন্ত্রণ করতে চান, তবে scale অপশন ব্যবহার করতে পারেন।
2. রঙ পরিবর্তন: প্রতিটি সেগমেন্টের ব্যাকগ্রাউন্ড ও বর্ডার রঙ পরিবর্তন করা যেতে পারে।
3. লেজেন্ড পজিশন পরিবর্তন: লেজেন্ডের অবস্থান উপরের, নীচের বা ডানদিকে পরিবর্তন করা যায়।
4. অ্যানিমেশন সেটিংস: চার্টের অ্যানিমেশন সময়কাল এবং এর ধরন কাস্টমাইজ করা যায়।

Polar Area Chart ব্যবহার কেস

Polar Area Chart সাধারণত তখন ব্যবহার করা হয় যখন ডেটার বিভিন্ন ভাগ বা সেগমেন্টের তুলনা করতে হয়। এটি বিশেষ করে মার্কেট শেয়ার, জনসংখ্যা বিতরণ, এবং বিভিন্ন বিভাগের তুলনায় উপকারী হতে পারে।

উদাহরণ ব্যবহার:

• মার্কেট শেয়ার: বিভিন্ন কোম্পানির মার্কেট শেয়ার তুলনা।
• জনসংখ্যার বিভাজন: একটি দেশের জনগণের বিভাজন (পুরুষ, নারী, শিশু, প্রাপ্তবয়স্ক ইত্যাদি)।
• কাস্টমার সেগমেন্টেশন: কাস্টমারদের বিভিন্ন বিভাগে বিভক্ত করে তাদের শেয়ার দেখতে।

সারাংশ

Polar Area Chart Chart.js এর একটি শক্তিশালী চার্ট টাইপ, যা ডেটাকে রেডিয়াল আকারে দেখাতে সাহায্য করে। এটি বিভাগ বা সেগমেন্টের তুলনা এবং বিশ্লেষণের জন্য খুবই কার্যকর। আপনিও সহজেই Chart.js দিয়ে Polar Area Chart তৈরি করতে পারেন এবং প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন।

Polar Area Chart একটি বিশেষ ধরনের চার্ট যা ডেটাকে পোলার কোঅর্ডিনেট সিস্টেমে প্রদর্শন করে। এটি সাধারণত ব্যবহৃত হয় যখন আপনি একাধিক ভিন্ন ভিন্ন মানের পার্থক্য দেখাতে চান, যেখানে প্রতিটি সেগমেন্ট একটি নির্দিষ্ট ডেটা পয়েন্টের প্রতিনিধিত্ব করে। Polar Area Chart সাধারণত সেগমেন্টের আকারের মাধ্যমে ডেটার পরিমাণ বোঝায়।

Polar Area Chart এর গঠন

Polar Area Chart এর প্রতিটি সেগমেন্ট একটি ভিন্ন ভিন্ন ডেটা পয়েন্টকে প্রতিনিধিত্ব করে। এটি রাডার চার্ট এর মতো, তবে এতে কেন্দ্র থেকে সেগমেন্টগুলি প্রতিস্থাপিত হয়। Polar Area Chart সাধারণত শূন্য থেকে একটি সর্বোচ্চ মানের মধ্যে বিশ্লেষণ করার জন্য ব্যবহৃত হয়।

Polar Area Chart তৈরি করার উদাহরণ

এখানে একটি উদাহরণ দেয়া হলো যেখানে Polar Area Chart ব্যবহার করে বিভিন্ন রঙের ডেটা সেগমেন্টের মাধ্যমে ভোটের ফলাফল ভিজ্যুয়ালাইজ করা হয়েছে।

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polar Area Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Polar Area Chart Example</h1>
    <canvas id="polarAreaChart" width="400" height="200"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// Get the context of the canvas element
const ctx = document.getElementById('polarAreaChart').getContext('2d');

// Create the Polar Area Chart
const polarAreaChart = new Chart(ctx, {
    type: 'polarArea', // Chart type
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Labels for each segment
        datasets: [{
            label: 'Votes', // Label for the dataset
            data: [15, 25, 10, 30, 20], // Data for each segment (percentage or count)
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', // Red
                'rgba(54, 162, 235, 0.2)', // Blue
                'rgba(255, 206, 86, 0.2)', // Yellow
                'rgba(75, 192, 192, 0.2)', // Green
                'rgba(153, 102, 255, 0.2)' // Purple
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)', // Red border
                'rgba(54, 162, 235, 1)', // Blue border
                'rgba(255, 206, 86, 1)', // Yellow border
                'rgba(75, 192, 192, 1)', // Green border
                'rgba(153, 102, 255, 1)' // Purple border
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        plugins: {
            legend: {
                position: 'top', // Legend position
                display: true // Display the legend
            }
        }
    }
});

বর্ণনা:

1. type: 'polarArea': এটি Polar Area Chart তৈরি করার জন্য Chart.js এর মধ্যে একটি চার্ট টাইপ। polarArea চার্টে, প্রতিটি সেগমেন্টের আকার তার ডেটা ভ্যালু অনুযায়ী পরিবর্তিত হয়।
2. labels: এই অ্যারেটি X-অক্ষের লেবেল হিসেবে কাজ করে, প্রতিটি সেগমেন্টের নাম প্রদান করে। এখানে, ‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, এবং ‘Purple’ নির্বাচিত হয়েছে।
3. data: এখানে প্রতিটি সেগমেন্টের মানের জন্য ডেটা প্রদান করা হয়েছে, যেমন 15, 25, 10, 30, এবং 20, যা সেগমেন্টের আকার নির্ধারণ করবে।
4. backgroundColor: প্রতিটি সেগমেন্টের পটভূমি রঙ নির্ধারণ করা হয়। প্রতিটি সেগমেন্টের জন্য একটি আলাদা রঙ দেওয়া হয়েছে।
5. borderColor: সেগমেন্টের বর্ডারের রঙ নির্ধারণ করা হয়েছে। এটি সেগমেন্টের আউটার বর্ডারকে উপস্থাপন করবে।
6. borderWidth: সেগমেন্টের বর্ডারের প্রস্থ। এখানে প্রস্থ ১ পিক্সেল নির্ধারণ করা হয়েছে।
7. options:
   • responsive: এটিকে true করা হলে, চার্টটি স্ক্রিন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে রিসাইজ হবে।
   • plugins.legend: লেজেন্ড (Legend) কাস্টমাইজেশন করা হয়, যেখানে লেজেন্ডটি চার্টের উপরের দিকে প্রদর্শিত হবে।

Polar Area Chart এর ব্যবহার

Polar Area Chart সাধারণত ব্যবহৃত হয়:

• ভোটের ফলাফল: নির্বাচন বা ভোটের ফলাফল ভিজ্যুয়ালাইজ করার জন্য।
• বাজার শেয়ার বিশ্লেষণ: বিভিন্ন কোম্পানির বাজার শেয়ার তুলনা করতে।
• পরিসংখ্যান বিশ্লেষণ: কোন কোন অংশে কতটুকু অবদান রয়েছে তা প্রকাশ করতে।

সারাংশ

Polar Area Chart Chart.js এর একটি বিশেষ ধরনের চার্ট যা বিভিন্ন ডেটা পয়েন্টের পার্থক্য দেখতে সাহায্য করে। এটি অনেক ক্ষেত্রেই ডেটার মধ্যে অংশবিশেষ তুলে ধরতে কার্যকর, বিশেষ করে যখন আপনি প্রতিটি অংশের অনুপাত বা পরিমাণ দেখতে চান। Chart.js এর সাহায্যে Polar Area Chart তৈরি করা খুবই সহজ এবং ডেটা ভিজ্যুয়ালাইজেশনের জন্য এটি একটি চমৎকার টুল।

Bubble Chart একটি বিশেষ ধরনের স্ক্যাটার প্লট যা ডেটার তিনটি ভিন্ন ভেরিয়েবল (X, Y, এবং Z) প্রদর্শন করতে ব্যবহৃত হয়। এখানে X এবং Y অক্ষ ডেটার অবস্থান বা মানের প্রতিনিধিত্ব করে, এবং Z অক্ষ বুদবুদটির আকার নির্ধারণ করে। এই চার্টটি ডেটার মধ্যে সম্পর্ক এবং আকারের পার্থক্যকে সহজে বোঝাতে সাহায্য করে।

Bubble Chart এর ব্যবহৃত ক্ষেত্র

• মার্কেট রিসার্চ: এখানে X এবং Y অক্ষ দুটি ভেরিয়েবল (যেমন মুল্য এবং পরিমাণ) এবং Z ভেরিয়েবল আকারের পার্থক্য নির্দেশ করতে পারে।
• অর্থনৈতিক বিশ্লেষণ: বিভিন্ন দেশের আর্থিক অবস্থা, যেখানে আকার (Z) নির্ধারণ করতে পারে দেশটির মোট অর্থনৈতিক আকার।
• বিশ্ববিদ্যালয়ের র‍্যাঙ্কিং: X এবং Y অক্ষ বিশ্ববিদ্যালয়ের বিভিন্ন ডেটা নির্ধারণ করতে পারে এবং আকার (Z) নির্ধারণ করতে পারে ছাত্রসংখ্যা।

Bubble Chart কনফিগারেশন

Chart.js-এ Bubble Chart তৈরি করতে কিছু গুরুত্বপূর্ণ কনফিগারেশন ও ডেটা প্রপার্টি ব্যবহার করতে হয়।

1. X এবং Y অক্ষ: ডেটা পয়েন্টের অবস্থান।
2. R (Radius): বুদবুদটির আকার, যা Z ভেরিয়েবল দ্বারা নিয়ন্ত্রিত হয়।

উদাহরণ: Basic Bubble Chart

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bubble',  // Chart Type: Bubble
    data: {
        datasets: [{
            label: 'My First Dataset',
            data: [
                { x: 10, y: 20, r: 15 }, // X, Y, এবং রেডিয়াস
                { x: 15, y: 25, r: 10 },
                { x: 20, y: 30, r: 20 },
                { x: 25, y: 35, r: 5 }
            ],
            backgroundColor: 'rgba(255, 99, 132, 0.2)', // বুদবুদটির রঙ
            borderColor: 'rgba(255, 99, 132, 1)', // বর্ডারের রঙ
            borderWidth: 1 // বর্ডারের প্রস্থ
        }]
    },
    options: {
        responsive: true, // চার্ট রেসপন্সিভ হবে
        scales: {
            x: {
                min: 0,  // X অক্ষের ন্যূনতম মান
                max: 30  // X অক্ষের সর্বোচ্চ মান
            },
            y: {
                min: 0,  // Y অক্ষের ন্যূনতম মান
                max: 40  // Y অক্ষের সর্বোচ্চ মান
            }
        }
    }
});

কনফিগারেশন বিবরণ:

1. type: 'bubble': চার্ট টাইপটি 'bubble' হতে হবে।
2. data.datasets: ডেটা সেটের মধ্যে বুদবুদগুলির জন্য ডেটা প্রদান করা হয়। প্রতিটি বুদবুদ X, Y, এবং R (radius) দিয়ে নির্ধারিত হয়।
   • x: বুদবুদটির অবস্থান X অক্ষের উপর।
   • y: বুদবুদটির অবস্থান Y অক্ষের উপর।
   • r: বুদবুদটির আকার (radius)।
3. backgroundColor: বুদবুদটির অভ্যন্তরের রঙ।
4. borderColor: বর্ডার রঙ।
5. borderWidth: বর্ডারের প্রস্থ।

Bubble Chart কাস্টমাইজেশন

1. বুদবুদ আকার (Size)

Bubble chart এ বুদবুদগুলির আকার r প্রপার্টির মাধ্যমে নির্ধারিত হয়। আপনি ডেটার আকার বা পরিমাণের ভিত্তিতে বুদবুদ আকার কাস্টমাইজ করতে পারেন।

উদাহরণ: বুদবুদ আকারের কাস্টমাইজেশন

data: [
    { x: 10, y: 20, r: 25 }, // Larger bubble
    { x: 15, y: 25, r: 10 },
    { x: 20, y: 30, r: 5 } // Smaller bubble
]

2. বুদবুদ রঙ কাস্টমাইজেশন (Color)

Bubble এর backgroundColor এবং borderColor প্রপার্টি দিয়ে আপনি বুদবুদগুলির রঙ কাস্টমাইজ করতে পারেন।

উদাহরণ: বুদবুদ রঙ কাস্টমাইজেশন

backgroundColor: [
    'rgba(255, 99, 132, 0.2)', // Red
    'rgba(54, 162, 235, 0.2)', // Blue
    'rgba(75, 192, 192, 0.2)'  // Green
],
borderColor: [
    'rgba(255, 99, 132, 1)',
    'rgba(54, 162, 235, 1)',
    'rgba(75, 192, 192, 1)'
]

3. অ্যানিমেশন কাস্টমাইজেশন (Animation)

Chart.js এ Bubble Chart এর অ্যানিমেশন কাস্টমাইজ করা যায়। animation অপশনের মাধ্যমে আপনি অ্যানিমেশনের সময়কাল, ইফেক্ট ইত্যাদি নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: অ্যানিমেশন কাস্টমাইজেশন

options: {
    responsive: true,
    animation: {
        duration: 2000, // অ্যানিমেশন সময়কাল
        easing: 'easeOutBounce' // অ্যানিমেশন ইফেক্ট
    }
}

4. Tooltips কাস্টমাইজেশন

Chart.js এর tooltips অপশনের মাধ্যমে আপনি বুদবুদগুলোর উপর মাউস হভার করলে যে তথ্য দেখানো হবে তা কাস্টমাইজ করতে পারেন।

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

options: {
    responsive: true,
    plugins: {
        tooltip: {
            callbacks: {
                label: function(tooltipItem) {
                    return `X: ${tooltipItem.raw.x}, Y: ${tooltipItem.raw.y}, Size: ${tooltipItem.raw.r}`;
                }
            }
        }
    }
}

Bubble Chart ব্যবহারকারীর জন্য সুবিধা

• তিনটি ভেরিয়েবল: X, Y এবং Z অক্ষের মাধ্যমে ডেটার সম্পর্ক ও আকার বিশ্লেষণ করা যায়।
• বেশি তথ্য উপস্থাপন: একাধিক ডেটা সিরিজ একসাথে দেখানো সম্ভব।
• দৃষ্টিনন্দন এবং স্পষ্ট: বুদবুদগুলোর আকার, রঙ ও অবস্থান সহজে ডেটার পার্থক্য বুঝতে সহায়ক।

সারাংশ

Chart.js দিয়ে Bubble Chart তৈরি করতে X, Y এবং R (radius) তিনটি ভেরিয়েবল ব্যবহার করা হয়। আপনি এই চার্টে বুদবুদগুলির আকার, রঙ, এবং অন্যান্য কাস্টমাইজেশন যেমন অ্যানিমেশন, টুলটিপস ইত্যাদি পরিবর্তন করতে পারেন। এটি একটি শক্তিশালী ভিজ্যুয়াল টুল, যা ডেটার মধ্যে সম্পর্ক এবং আকারের পার্থক্য তুলে ধরতে সহায়তা করে।

Bubble Chart (বাবল চার্ট) Chart.js-এর একটি শক্তিশালী টুল, যা এক্স, ওয়াই এবং জেড অক্ষের মধ্যে সম্পর্ক প্রদর্শন করে। এটি একটি স্ক্যাটার প্লট যেখানে প্রতিটি বুদবুদ ডেটার তিনটি ভেরিয়েবলকে প্রতিনিধিত্ব করে—একটি এক্স-অক্ষের মান, একটি ওয়াই-অক্ষের মান এবং একটি তৃতীয় ভেরিয়েবল যেটি বুদবুদটির আকারের মাধ্যমে প্রদর্শিত হয়। এটি জটিল ডেটা বিশ্লেষণের জন্য খুবই কার্যকর, যেখানে আপনি একাধিক ভেরিয়েবলকে তুলনা করতে চান।

Bubble Chart এর বৈশিষ্ট্য

1. এক্স, ওয়াই এবং আকার: বাবল চার্ট তিনটি ভেরিয়েবল প্রদর্শন করে—একটি এক্স অক্ষের (X-axis) মান, একটি ওয়াই অক্ষের (Y-axis) মান এবং বুদবুদটির আকার (Z-axis)।
2. ডেটার তুলনা: এটি বিভিন্ন ক্যাটাগরির তুলনা করতে সহায়ক, যেমন একাধিক পণ্যের বিক্রয়, অঞ্চল ভিত্তিক ডেটা বিশ্লেষণ বা মেট্রিক্স তুলনা।
3. ভিজ্যুয়ালাইজেশন: জটিল ডেটাকে সোজাসুজি এবং ভিজ্যুয়ালি বোঝার জন্য অত্যন্ত সহায়ক।

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

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

HTML ফাইল:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble Chart Example</title>
</head>
<body>
    <h1>Bubble Chart Example: Sales, Profit, and Stock</h1>
    <canvas id="myBubbleChart" width="600" height="400"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript ফাইল (Bubble Chart কনফিগারেশন)

script.js:

const ctx = document.getElementById('myBubbleChart').getContext('2d');

// Bubble Chart কনফিগারেশন
const myBubbleChart = new Chart(ctx, {
    type: 'bubble',  // Chart type: Bubble Chart
    data: {
        datasets: [{
            label: 'Products',
            data: [{
                x: 10,  // X-অক্ষ: Sales in $1000
                y: 15,  // Y-অক্ষ: Profit in $
                r: 20   // Z-অক্ষ: Stock (radius size)
            }, {
                x: 20,
                y: 25,
                r: 10
            }, {
                x: 30,
                y: 40,
                r: 30
            }, {
                x: 40,
                y: 45,
                r: 25
            }],
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                min: 0,  // Minimum value for X-axis
                max: 50, // Maximum value for X-axis
                title: {
                    display: true,
                    text: 'Sales in $1000'
                }
            },
            y: {
                min: 0,  // Minimum value for Y-axis
                max: 50, // Maximum value for Y-axis
                title: {
                    display: true,
                    text: 'Profit in $'
                }
            }
        }
    }
});

Bubble Chart এর কনফিগারেশন এবং ব্যাখ্যা

1. type: 'bubble': এই লাইনটি চার্টের ধরন নির্ধারণ করে। এখানে, 'bubble' টাইপ ব্যবহার করা হয়েছে, যা বাবল চার্ট তৈরি করবে।
2. data.datasets: এটি একাধিক ডেটাসেটকে সমর্থন করে। এক্ষেত্রে একটি ডেটাসেট ব্যবহার করা হয়েছে, যেখানে প্রতিটি বুদবুদ একটি নির্দিষ্ট পণ্যের বিক্রয়, লাভ এবং স্টক সাইজের প্রতিনিধিত্ব করছে।
3. data: [{ x, y, r }]:
   • x: এক্স অক্ষের মান, যা পণ্যের বিক্রয় প্রতিনিধিত্ব করে।
   • y: ওয়াই অক্ষের মান, যা লাভ বা প্রফিট প্রতিনিধিত্ব করে।
   • r: বুদবুদটির আকার, যা স্টকের পরিমাণ নির্দেশ করে।
4. backgroundColor এবং borderColor: বুদবুদগুলির রং এবং বর্ডার রং কাস্টমাইজ করার জন্য ব্যবহার করা হয়।
5. scales: এক্স এবং ওয়াই অক্ষের স্কেল কাস্টমাইজ করা হয়েছে যাতে ডেটা সুন্দরভাবে প্রদর্শিত হয়।

Bubble Chart কাস্টমাইজেশন

1. বুদবুদ রঙের পরিবর্তন: backgroundColor এবং borderColor এর মাধ্যমে বুদবুদগুলির রং পরিবর্তন করা যেতে পারে।
2. অক্ষের স্কেল পরিবর্তন: x এবং y অক্ষের জন্য min, max এবং title সেটিংস ব্যবহার করে স্কেল কাস্টমাইজ করা যায়।
3. অ্যানিমেশন: বুদবুদগুলির সাথে একটি অ্যানিমেশন যুক্ত করতে options.animation ব্যবহার করা যেতে পারে।

অ্যানিমেশন উদাহরণ:

options: {
    animation: {
        duration: 1000, // অ্যানিমেশনের সময়কাল
        easing: 'easeOutBounce' // অ্যানিমেশন ইফেক্ট
    }
}

ব্যবহারিক প্রয়োগ

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

• ব্যবসায়ের বিক্রয় ও লাভের বিশ্লেষণ: পণ্যের বিক্রয় এবং লাভের মধ্যে সম্পর্ক দেখানো।
• স্টক বিশ্লেষণ: পণ্যের স্টক এবং বিক্রয়ের ভিত্তিতে লাভ বা ক্ষতি বিশ্লেষণ।

সারাংশ

Bubble Chart Chart.js এর একটি শক্তিশালী টুল, যা এক্স, ওয়াই এবং জেড ভেরিয়েবলকে একত্রে ভিজ্যুয়ালাইজ করতে সহায়তা করে। এটি জটিল ডেটাকে তুলনা এবং বিশ্লেষণ করার জন্য অত্যন্ত কার্যকর, বিশেষত যখন একাধিক ডেটা পয়েন্টের মধ্যে সম্পর্ক প্রকাশ করতে হয়।

Chart.js এর বাবল চার্ট (Bubble Chart) ব্যবহার করে আপনি ডেটার পয়েন্টগুলিকে X, Y, এবং Size অনুযায়ী প্লট করতে পারেন। এখানে, বাবল চার্টের প্রতিটি পয়েন্টের আকার এবং রঙ কাস্টমাইজ করা যেতে পারে। বাবল চার্টে Z ভ্যালু প্রতিটি বুদবুদ (Bubble) এর আকার নির্ধারণ করে, এবং backgroundColor এর মাধ্যমে বুদবুদগুলোর রঙ নির্ধারণ করা হয়।

এখানে Chart.js ব্যবহার করে Bubbles এর Size এবং Color কাস্টমাইজ করার ধাপগুলো আলোচনা করা হলো।

বাবল চার্টের কনফিগারেশন

বাবল চার্টে, প্রতি ডেটা পয়েন্টের জন্য ৩টি ভ্যালু ব্যবহৃত হয়:

1. X-অক্ষের মান (x)
2. Y-অক্ষের মান (y)
3. Bubbles এর আকার (r) - এটি প্রতিটি বুদবুদের আকার নির্ধারণ করে।

Chart.js এর মাধ্যমে আপনি সহজেই বুদবুদ (Bubble) এর আকার এবং রঙ কাস্টমাইজ করতে পারেন।

১. বাবল চার্ট কনফিগারেশন তৈরি করা

প্রথমে একটি HTML ফাইল তৈরি করুন, যেখানে <canvas> এলিমেন্ট থাকবে, এবং তারপর জাভাস্ক্রিপ্ট ফাইলে চার্টের কনফিগারেশন তৈরি করুন।

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble Chart Example</title>
</head>
<body>
    <h1>Bubble Chart with Custom Size and Color</h1>
    <canvas id="myBubbleChart" width="400" height="400"></canvas>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>

২. JavaScript: বাবল চার্ট তৈরি এবং কাস্টমাইজেশন

এখন JavaScript ফাইলে বাবল চার্টের কনফিগারেশন তৈরি করুন। এখানে আমরা Bubble Size এবং Color কাস্টমাইজ করবো।

script.js:

const ctx = document.getElementById('myBubbleChart').getContext('2d');

const myBubbleChart = new Chart(ctx, {
    type: 'bubble', // Chart type: Bubble
    data: {
        datasets: [{
            label: 'My Bubble Chart', // Dataset label
            data: [
                {x: 10, y: 20, r: 15},  // Bubble 1 (X: 10, Y: 20, Radius: 15)
                {x: 20, y: 25, r: 25},  // Bubble 2 (X: 20, Y: 25, Radius: 25)
                {x: 30, y: 40, r: 10},  // Bubble 3 (X: 30, Y: 40, Radius: 10)
                {x: 40, y: 35, r: 30},  // Bubble 4 (X: 40, Y: 35, Radius: 30)
                {x: 50, y: 50, r: 20}   // Bubble 5 (X: 50, Y: 50, Radius: 20)
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)', // Red
                'rgba(54, 162, 235, 0.6)', // Blue
                'rgba(255, 206, 86, 0.6)', // Yellow
                'rgba(75, 192, 192, 0.6)', // Green
                'rgba(153, 102, 255, 0.6)' // Purple
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)', // Red
                'rgba(54, 162, 235, 1)', // Blue
                'rgba(255, 206, 86, 1)', // Yellow
                'rgba(75, 192, 192, 1)', // Green
                'rgba(153, 102, 255, 1)' // Purple
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true, // Make the chart responsive
        scales: {
            x: {
                min: 0, // Set minimum X value
                max: 60, // Set maximum X value
            },
            y: {
                min: 0, // Set minimum Y value
                max: 60, // Set maximum Y value
            }
        }
    }
});

ব্যাখ্যা:

• data:
  • এখানে আমরা X, Y, এবং r (radius) দিয়ে পাঁচটি বুদবুদ ডেটা পয়েন্ট তৈরি করেছি।
  • X এবং Y হল বুদবুদের অবস্থান এবং r হল বুদবুদের আকার (radius)।
  • backgroundColor এবং borderColor এর মাধ্যমে প্রতিটি বুদবুদের রঙ কাস্টমাইজ করা হয়েছে।
• scales:
  • X এবং Y অক্ষের স্কেল কাস্টমাইজ করা হয়েছে। এখানে min এবং max মান সেট করা হয়েছে, যার মাধ্যমে চার্টের এক্স এবং ওয়াই অক্ষের সীমা নির্ধারণ করা হয়েছে।
• borderWidth: বুদবুদের বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহার করা হয়েছে।

৩. বাবল চার্টের কাস্টমাইজেশন:

1. Bubble Size (r):
   • r ভ্যালুর মাধ্যমে আপনি বুদবুদের আকার পরিবর্তন করতে পারেন। উচ্চ মানের জন্য বড় বুদবুদ এবং কম মানের জন্য ছোট বুদবুদ তৈরি হয়।
2. Bubble Color (backgroundColor):
   • backgroundColor প্রোপার্টি ব্যবহার করে আপনি প্রতিটি বুদবুদের রঙ কাস্টমাইজ করতে পারেন। আপনি rgba() রঙের মাধ্যমে স্বচ্ছতার সাথেও রঙ নির্ধারণ করতে পারেন।

৪. বাবল চার্টে আরও কাস্টমাইজেশন:

এছাড়াও আপনি বাবল চার্টে আরও কাস্টমাইজেশন করতে পারেন যেমন:

• Bubble Border Width: বুদবুদের বর্ডার প্রস্থ পরিবর্তন করতে।
• Hover Effects: ব্যবহারকারীর হোভার করার সময় বুদবুদের আকার বা রঙ পরিবর্তন করতে।

Hover Effects উদাহরণ:

options: {
    responsive: true,
    plugins: {
        tooltip: {
            enabled: true
        }
    },
    hover: {
        mode: 'nearest',
        intersect: true,
        onHover: function(event, chartElement) {
            chartElement[0]._model.radius = 30;  // Hover effect: increase radius
        }
    },
    scales: {
        x: {
            min: 0,
            max: 60
        },
        y: {
            min: 0,
            max: 60
        }
    }
}

সারাংশ

Chart.js দিয়ে বাবল চার্ট তৈরি করা খুবই সহজ এবং এর মাধ্যমে আপনি ডেটার ভিজ্যুয়ালাইজেশন খুবই কার্যকরভাবে করতে পারেন। Bubble Size এবং Color কাস্টমাইজেশন দ্বারা আপনি আপনার ডেটার ভিজ্যুয়াল আউটপুটকে আরও আকর্ষণীয় এবং বোধগম্য করতে পারবেন।

Scatter Plot বা স্ক্যাটার চার্ট হলো এমন একটি চার্ট যা এক্স এবং ওয়াই অক্ষের উপর ডেটার পয়েন্টগুলো প্লট করে। এটি ডেটার মধ্যে সম্পর্ক বা ট্রেন্ড বোঝাতে সহায়ক, যেমন দুইটি ভেরিয়েবলের মধ্যে সম্পর্ক (Correlation) বা বিভিন্ন ডেটা পয়েন্টের বিচ্যুতি। Chart.js-এ স্ক্যাটার চার্ট ব্যবহার করে এই ধরনের ডেটা ভিজ্যুয়ালাইজ করা যায়।

Scatter Plot এর ব্যবহার

• বৈজ্ঞানিক গবেষণা: এক্স এবং ওয়াই অক্ষের ওপর বৈজ্ঞানিক ডেটার পয়েন্টের সম্পর্ক বোঝাতে।
• ইঞ্জিনিয়ারিং ও পরিমাপ: কোন প্রক্রিয়ার বিভিন্ন পরামিতির সম্পর্ক দেখাতে।
• মার্কেট রিসার্চ: দুইটি পরিসংখ্যানের মধ্যে সম্পর্ক বোঝাতে, যেমন বিজ্ঞাপনের খরচ এবং বিক্রয়।

Scatter Plot এর গঠন

একটি স্ক্যাটার চার্টে, প্রতিটি ডেটা পয়েন্ট সাধারণত দুটি ভেরিয়েবলের মানকে প্রতিফলিত করে:

• x: এক্স-অক্ষের মান।
• y: ওয়াই-অক্ষের মান।
• r (অপশনাল): বুদবুদ চার্টের জন্য আকার (radius)।

উদাহরণ: Scatter Plot Chart

Chart.js-এ স্ক্যাটার চার্ট তৈরি করার জন্য, প্রথমে ডেটা পয়েন্টের x এবং y মানগুলো নির্দিষ্ট করতে হয়। নিচে একটি সাধারণ স্ক্যাটার প্লট উদাহরণ দেওয়া হলো:

const ctx = document.getElementById('myChart').getContext('2d');

const scatterChart = new Chart(ctx, {
    type: 'scatter', // চার্টের ধরন: স্ক্যাটার
    data: {
        datasets: [{
            label: 'My Dataset',
            data: [
                { x: 10, y: 20 },
                { x: 15, y: 25 },
                { x: 30, y: 40 },
                { x: 45, y: 60 },
                { x: 60, y: 80 },
                { x: 70, y: 90 }
            ],
            backgroundColor: 'rgba(75, 192, 192, 1)', // পয়েন্টের রঙ
            borderColor: 'rgba(75, 192, 192, 1)', // বর্ডার রঙ
            borderWidth: 1, // বর্ডারের প্রস্থ
            pointRadius: 5 // পয়েন্টের আকার
        }]
    },
    options: {
        responsive: true, // রেসপন্সিভ ডিজাইন
        scales: {
            x: {
                type: 'linear', // এক্স-অক্ষের টাইপ (লাইন)
                position: 'bottom' // এক্স-অক্ষ নিচে থাকবে
            },
            y: {
                type: 'linear', // ওয়াই-অক্ষের টাইপ (লাইন)
                beginAtZero: true // ওয়াই-অক্ষ শূন্য থেকে শুরু হবে
            }
        }
    }
});

Code Breakdown:

1. type: 'scatter': এটি চার্টের ধরন নির্দেশ করে, এখানে এটি স্ক্যাটার চার্ট।
2. data: ডেটাসেটের তথ্য।
   • datasets: এখানে একটি ডেটাসেট ব্যবহৃত হয়েছে, কিন্তু আপনি একাধিক ডেটাসেটও ব্যবহার করতে পারেন।
   • data: এটি একটি অ্যারে যা ডেটা পয়েন্টগুলোর এক্স এবং ওয়াই মান ধারণ করে। প্রতিটি ডেটা পয়েন্ট {x: value, y: value} আকারে থাকে।
   • backgroundColor: পয়েন্টের রঙ।
   • pointRadius: পয়েন্টের আকার।
   • borderColor এবং borderWidth: পয়েন্টের বর্ডার রঙ এবং প্রস্থ কাস্টমাইজ করা যায়।
3. options: এই অংশে চার্টের কাস্টমাইজেশন অপশন আছে।
   • scales: এক্স এবং ওয়াই অক্ষের স্কেল কনফিগারেশন।
     • x এবং y এর জন্য type: 'linear' ব্যবহার করা হয়েছে, যেহেতু স্ক্যাটার চার্টে এক্স এবং ওয়াই মান গাণিতিক।

Scatter Plot Chart Styling

১. ডেটা পয়েন্টের আকার পরিবর্তন

pointRadius: 10, // পয়েন্টের আকার বড় বা ছোট করা যায়

২. বর্ডার এবং রঙ পরিবর্তন

borderColor: 'rgba(255, 99, 132, 1)', // পয়েন্টের বর্ডারের রঙ পরিবর্তন
backgroundColor: 'rgba(75, 192, 192, 1)', // পয়েন্টের অভ্যন্তরীণ রঙ পরিবর্তন

৩. একাধিক ডেটাসেট ব্যবহার

একাধিক ডেটাসেট যোগ করলে আপনি একাধিক গ্রুপের পয়েন্ট দেখতে পারবেন। উদাহরণ:

datasets: [
    {
        label: 'Dataset 1',
        data: [{x: 10, y: 20}, {x: 30, y: 50}],
        backgroundColor: 'rgba(75, 192, 192, 1)'
    },
    {
        label: 'Dataset 2',
        data: [{x: 15, y: 25}, {x: 40, y: 60}],
        backgroundColor: 'rgba(153, 102, 255, 1)'
    }
]

Scatter Plot এর উন্নত কাস্টমাইজেশন

1. Tooltips: আপনি যখন পয়েন্টে মাউস হোভার করবেন, তখন টুলটিপ প্রদর্শন করতে পারেন।

plugins: {
    tooltip: {
        enabled: true, // টুলটিপ সক্রিয়
        mode: 'index', // টুলটিপ প্রদর্শন করার উপায়
    }
}

2. Legends: ডেটাসেটের লেবেল (Legends) কাস্টমাইজ করা:

plugins: {
    legend: {
        display: true, // লেজেন্ড প্রদর্শন
        position: 'top' // লেজেন্ডের অবস্থান
    }
}

3. Gridlines এবং Ticks: এক্স এবং ওয়াই অক্ষের গ্রিডলাইন এবং টিকস কাস্টমাইজ করা:

scales: {
    x: {
        grid: {
            display: true, // গ্রিডলাইন প্রদর্শন
            color: 'rgba(0, 0, 0, 0.1)' // গ্রিডলাইন রঙ
        }
    },
    y: {
        grid: {
            display: true, // গ্রিডলাইন প্রদর্শন
            color: 'rgba(0, 0, 0, 0.1)' // গ্রিডলাইন রঙ
        }
    }
}

সারাংশ

Chart.js এর scatter plot চার্ট বিভিন্ন ডেটা পয়েন্টের সম্পর্ক বা বিভিন্ন ভেরিয়েবলের মধ্যে সম্পর্ক বুঝতে সাহায্য করে। এটি সহজে কাস্টমাইজ করা যায়, যেমন পয়েন্টের আকার, রঙ, এবং বর্ডার, এবং একাধিক ডেটাসেট যোগ করে আপনি আরো বেশি ভিজ্যুয়াল তথ্য প্রদর্শন করতে পারেন। এই চার্টটি বিশেষভাবে ডেটার মধ্যে সম্পর্ক বা ট্রেন্ড বিশ্লেষণে উপকারী।

Scatter Plot (স্ক্যাটার চার্ট) হল একটি গ্রাফ যেখানে এক্স এবং ওয়াই অক্ষের উপর ডেটা পয়েন্টগুলি প্লট করা হয়। এটি দুইটি ভ্যারিয়েবলের মধ্যে সম্পর্ক এবং তাদের মধ্যে যে কোনো প্যাটার্ন বা ট্রেন্ড আছে কিনা তা বিশ্লেষণ করতে ব্যবহৃত হয়।

Chart.js এ Scatter Plot তৈরি করার জন্য সহজেই ডেটা পয়েন্টগুলিকে প্লট করা যায়, যা আপনাকে দুই ভ্যারিয়েবলের সম্পর্ক প্রদর্শন করতে সহায়তা করে। উদাহরণস্বরূপ, আপনি যদি দুটি ভ্যারিয়েবলের (যেমন, তাপমাত্রা এবং আর্দ্রতা) সম্পর্ক বিশ্লেষণ করতে চান, তাহলে Scatter Plot ব্যবহার করতে পারেন।

Scatter Plot এর জন্য Chart.js কনফিগারেশন

প্রথমে, Chart.js এর মাধ্যমে একটি scatter চার্ট তৈরি করতে হবে। এখানে আমরা একটি সাধারণ উদাহরণ দেখাবো, যেখানে এক্স-অক্ষ এবং ওয়াই-অক্ষের মানের ভিত্তিতে ডেটা পয়েন্ট প্লট করা হবে।

উদাহরণ কোড: Scatter Plot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Scatter Plot</title>
</head>
<body>
    <h1>Scatter Plot - Two Variables Relationship</h1>
    <canvas id="myScatterChart" width="400" height="200"></canvas>

    <!-- Chart.js Library -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const ctx = document.getElementById('myScatterChart').getContext('2d');
        const scatterChart = new Chart(ctx, {
            type: 'scatter', // Scatter chart type
            data: {
                datasets: [{
                    label: 'Temperature vs Humidity',
                    data: [
                        {x: 10, y: 20}, // X and Y coordinates
                        {x: 20, y: 30},
                        {x: 30, y: 40},
                        {x: 40, y: 50},
                        {x: 50, y: 60},
                        {x: 60, y: 70},
                        {x: 70, y: 80},
                        {x: 80, y: 90}
                    ],
                    backgroundColor: 'rgba(75, 192, 192, 1)', // Point color
                    borderColor: 'rgba(75, 192, 192, 1)', // Border color of points
                    borderWidth: 2 // Border width
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        type: 'linear', // X-axis type is linear
                        position: 'bottom',
                        title: {
                            display: true,
                            text: 'Temperature (°C)' // X-axis label
                        }
                    },
                    y: {
                        type: 'linear', // Y-axis type is linear
                        title: {
                            display: true,
                            text: 'Humidity (%)' // Y-axis label
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

কোড বিশ্লেষণ

1. HTML Canvas: <canvas id="myScatterChart" width="400" height="200"></canvas> – এখানে একটি <canvas> ট্যাগ ব্যবহার করা হয়েছে, যেখানে Scatter Plot চার্ট রেন্ডার হবে।
2. Chart.js লাইব্রেরি: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> – Chart.js লাইব্রেরি লোড করা হয়েছে।
3. Scatter Plot কনফিগারেশন:
   • type: 'scatter': এটি নির্ধারণ করে যে চার্টটি একটি Scatter Plot হবে।
   • data: এখানে datasets এর মধ্যে ডেটা পয়েন্টগুলো x এবং y এর মান হিসেবে প্রদান করা হয়েছে।
   • backgroundColor এবং borderColor: প্রতিটি ডেটা পয়েন্টের জন্য পটভূমি এবং বর্ডার রঙ নির্ধারণ করা হয়েছে।
   • scales: এক্স এবং ওয়াই অক্ষের জন্য স্কেল কনফিগারেশন, যেখানে type: 'linear' ব্যবহার করা হয়েছে, কারণ আমরা দুইটি সিংহভাগ ভ্যারিয়েবলের মধ্যে সম্পর্ক দেখাচ্ছি।
4. Axes Titles: এক্স এবং ওয়াই অক্ষের শিরোনাম কাস্টমাইজ করা হয়েছে, যেমন "Temperature (°C)" এবং "Humidity (%)"।

Scatter Plot কাস্টমাইজেশন

Scatter Plot কাস্টমাইজ করতে আপনি কয়েকটি পরিবর্তন করতে পারেন:

1. Data Point Customization:
   • size: প্রতিটি পয়েন্টের আকার পরিবর্তন করতে পারেন।
   • shape: বিভিন্ন আকৃতির পয়েন্ট ব্যবহার করতে পারেন (যেমন গোল, আয়তক্ষেত্র, ট্রায়াঙ্গেল)।
2. Gridlines এবং Ticks:
   • আপনি এক্স এবং ওয়াই অক্ষের gridlines এবং ticks কাস্টমাইজ করতে পারেন, যাতে ডেটা পয়েন্টগুলির মধ্যে সঠিক সম্পর্ক বোঝা যায়।
3. Tooltips:
   • tooltip অপশন দিয়ে আপনি প্রতিটি ডেটা পয়েন্টের উপর ক্লিক করলে অতিরিক্ত তথ্য দেখাতে পারেন।

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

options: {
    responsive: true,
    plugins: {
        tooltip: {
            callbacks: {
                label: function(tooltipItem) {
                    return `Temperature: ${tooltipItem.raw.x}°C, Humidity: ${tooltipItem.raw.y}%`;
                }
            }
        }
    }
}

এখানে, টুলটিপে Temperature এবং Humidity মান কাস্টমাইজ করা হয়েছে।

Scatter Plot এর ব্যবহার

Scatter Plot ব্যবহার করে আপনি বিভিন্ন ক্ষেত্রের মধ্যে সম্পর্ক বিশ্লেষণ করতে পারেন। উদাহরণস্বরূপ:

• বিজ্ঞান ও প্রকৌশল: দুইটি ভ্যারিয়েবলের সম্পর্ক বিশ্লেষণ যেমন তাপমাত্রা ও আর্দ্রতা, চাপ ও গতি ইত্যাদি।
• অর্থনীতি: স্টক মার্কেটের দাম এবং সময়ের মধ্যে সম্পর্ক।
• সমাজবিজ্ঞান: শিক্ষা এবং আয়ের মধ্যে সম্পর্ক।

সারাংশ

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

Chart.js-এ পয়েন্ট সাইজ এবং রঙ কাস্টমাইজেশন করা খুবই সহজ এবং এটি ডেটার ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং বোধগম্য করতে সাহায্য করে। বিশেষ করে যখন আপনি স্ক্যাটার বা বাবল চার্ট ব্যবহার করছেন, তখন প্রতিটি পয়েন্টের সাইজ এবং রঙ কাস্টমাইজ করে ডেটা পয়েন্টগুলিকে আলাদা করতে পারেন।

এখানে Point Size এবং Color কাস্টমাইজেশন করার প্রক্রিয়া নিয়ে আলোচনা করা হয়েছে।

১. Point Size কাস্টমাইজেশন

Chart.js-এ, পয়েন্টের সাইজ পরিবর্তন করতে হয় dataset এর মধ্যে pointRadius অপশন ব্যবহার করে। পয়েন্টের আকার পরিবর্তন করে আপনি প্রতিটি ডেটা পয়েন্টের দৃশ্যমানতা বাড়াতে বা কমাতে পারেন।

উদাহরণ: স্ক্যাটার চার্টে Point Size কাস্টমাইজেশন

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: 10,
                y: 20
            }, {
                x: 15,
                y: 30
            }, {
                x: 20,
                y: 40
            }],
            pointRadius: 10, // Point size নির্ধারণ
            backgroundColor: 'rgba(75, 192, 192, 1)', // পয়েন্টের রঙ
        }]
    }
});

কাস্টমাইজেশন:

• pointRadius: এটি পয়েন্টের আকার (radius) নিয়ন্ত্রণ করে। এর মান বৃদ্ধি করলে পয়েন্ট বড় হবে, এবং কমালে ছোট হবে।

২. Point Color কাস্টমাইজেশন

Chart.js-এ, পয়েন্টের রঙ পরিবর্তন করতে backgroundColor এবং borderColor ব্যবহার করা হয়।

• backgroundColor: পয়েন্টের ভিতরের রঙ পরিবর্তন করে।
• borderColor: পয়েন্টের বর্ডারের রঙ পরিবর্তন করে।

উদাহরণ: স্ক্যাটার চার্টে Point Color কাস্টমাইজেশন

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Custom Point Color Dataset',
            data: [{
                x: 10,
                y: 20
            }, {
                x: 15,
                y: 30
            }, {
                x: 20,
                y: 40
            }],
            pointRadius: 8,
            backgroundColor: 'rgba(255, 99, 132, 1)', // পয়েন্টের ভিতরের রঙ
            borderColor: 'rgba(54, 162, 235, 1)', // পয়েন্টের বর্ডারের রঙ
            borderWidth: 3 // বর্ডারের প্রস্থ
        }]
    }
});

কাস্টমাইজেশন:

• backgroundColor: পয়েন্টের ভিতরের রঙ নির্ধারণ করতে এটি ব্যবহার করুন।
• borderColor: পয়েন্টের চারপাশের বর্ডারের রঙ নির্ধারণ করতে এটি ব্যবহার করুন।
• borderWidth: পয়েন্টের বর্ডারের প্রস্থ পরিবর্তন করতে এটি ব্যবহার করুন।

৩. একাধিক পয়েন্টের সাইজ এবং রঙ কাস্টমাইজেশন

Chart.js-এ, আপনি প্রতিটি ডেটা পয়েন্টের জন্য আলাদা সাইজ এবং রঙ সেট করতে পারেন। এর জন্য, আপনি dataset এর মধ্যে একটি অ্যারে ব্যবহার করে pointRadius এবং backgroundColor কাস্টমাইজ করতে পারবেন।

উদাহরণ: স্ক্যাটার চার্টে একাধিক পয়েন্টের সাইজ এবং রঙ কাস্টমাইজেশন

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Variable Size and Color Dataset',
            data: [{
                x: 10,
                y: 20,
                radius: 5, // বিশেষ পয়েন্টের আকার
                backgroundColor: 'rgba(255, 99, 132, 1)' // বিশেষ পয়েন্টের রঙ
            }, {
                x: 15,
                y: 30,
                radius: 10, // অন্য একটি পয়েন্টের আকার
                backgroundColor: 'rgba(54, 162, 235, 1)' // অন্য একটি পয়েন্টের রঙ
            }, {
                x: 20,
                y: 40,
                radius: 15, // আরও বড় পয়েন্ট
                backgroundColor: 'rgba(75, 192, 192, 1)' // অন্য রঙ
            }],
            borderColor: 'rgba(0, 0, 0, 1)', // সব পয়েন্টের বর্ডার রঙ
            borderWidth: 1
        }]
    }
});

কাস্টমাইজেশন:

• radius: আপনি প্রতিটি ডেটা পয়েন্টের জন্য আলাদা সাইজ নির্ধারণ করতে পারেন।
• backgroundColor: প্রতিটি পয়েন্টের জন্য আলাদা রঙ নির্ধারণ করতে পারেন।

৪. কাস্টম পয়েন্ট স্টাইল (Custom Point Style)

Chart.js-এ, পয়েন্টের স্টাইল কাস্টমাইজ করতে pointStyle ব্যবহার করা হয়, যেখানে আপনি পয়েন্টকে সেল, ট্রায়াঙ্গল, স্কোয়ার, স্টার ইত্যাদিতে পরিবর্তন করতে পারেন।

উদাহরণ: কাস্টম পয়েন্ট স্টাইল

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Custom Point Style Dataset',
            data: [{
                x: 10,
                y: 20
            }, {
                x: 15,
                y: 30
            }, {
                x: 20,
                y: 40
            }],
            pointRadius: 10,
            pointStyle: 'star', // পয়েন্টকে 'স্টার' আকারে প্রদর্শন
            backgroundColor: 'rgba(153, 102, 255, 1)',
            borderColor: 'rgba(255, 159, 64, 1)',
            borderWidth: 2
        }]
    }
});

কাস্টমাইজেশন:

• pointStyle: এখানে পয়েন্টের স্টাইল হিসেবে 'star' ব্যবহৃত হয়েছে, তবে আপনি অন্যান্য স্টাইল যেমন 'circle', 'triangle', 'rect' ইত্যাদি ব্যবহার করতে পারেন।

সারাংশ

Chart.js-এ Point Size এবং Color কাস্টমাইজেশন করার মাধ্যমে আপনি আপনার চার্টের ডেটা পয়েন্টগুলিকে আলাদা এবং আরও আকর্ষণীয়ভাবে উপস্থাপন করতে পারেন। এই কাস্টমাইজেশনগুলো খুবই শক্তিশালী, কারণ এগুলো আপনার চার্টের ভিজ্যুয়াল প্রেজেন্টেশনকে উন্নত করে, যেমন:

• pointRadius: পয়েন্টের আকার নির্ধারণ করে।
• backgroundColor: পয়েন্টের রঙ নির্ধারণ করে।
• borderColor: পয়েন্টের বর্ডারের রঙ নির্ধারণ করে।
• pointStyle: পয়েন্টের স্টাইল পরিবর্তন করে।

এগুলি ব্যবহারের মাধ্যমে আপনি একটি আরও ইন্টার‌্যাকটিভ এবং ব্যবহারকারীর দৃষ্টি আকর্ষণকারী চার্ট তৈরি করতে পারবেন।