চার্টের ধরন (Chart Types) এর পরিচিতি

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)

স্ক্যাটার চার্ট ডেটার পয়েন্টগুলিকে এক্স এবং ওয়াই অক্ষের উপর প্লট করে। এটি ডেটার মধ্যে সম্পর্ক বা বৈচিত্র্য প্রদর্শনের জন্য উপযুক্ত।

ব্যবহার:

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

কোড উদাহরণ:

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

সারাংশ

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