চার্টের Title, Labels, এবং Legends কাস্টমাইজ করা

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

Title কাস্টমাইজ করা

Title হল চার্টের শিরোনাম যা চার্টের মধ্যে ডেটা বা উপস্থাপনার উদ্দেশ্য ব্যাখ্যা করে। Google Charts এ আপনি Title কাস্টমাইজ করতে পারেন এবং এটি চার্টের উপরে প্রদর্শিত হয়।

Title কাস্টমাইজ করার উদাহরণ

var options = {
    title: 'Sales Performance for 2023',
    titleTextStyle: {
        color: '#1c4d7f',  // Title color
        fontSize: 20,      // Title font size
        bold: true         // Title font weight
    }
};

এখানে titleTextStyle ব্যবহার করে Title এর রঙ, আকার এবং স্টাইল কাস্টমাইজ করা হয়েছে। আপনি চাইলে আরও অতিরিক্ত স্টাইল অপশন ব্যবহার করতে পারেন, যেমন ফন্ট ফ্যামিলি, ইটালিক ইত্যাদি।

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

Labels হল অক্ষের নাম, যেমন X-axis এবং Y-axis এর নাম, যা ডেটার ধরনের ব্যাখ্যা করে। এগুলি ডেটার শ্রেণী এবং পরিসীমা স্পষ্টভাবে প্রদর্শন করতে সহায়ক।

X-axis এবং Y-axis Labels কাস্টমাইজ করার উদাহরণ

var options = {
    hAxis: {
        title: 'Year',           // X-axis label
        titleTextStyle: {
            color: '#0277bd',    // X-axis label color
            fontSize: 16,        // X-axis label font size
            bold: true           // X-axis label font weight
        }
    },
    vAxis: {
        title: 'Sales ($)',      // Y-axis label
        titleTextStyle: {
            color: '#0277bd',    // Y-axis label color
            fontSize: 16,        // Y-axis label font size
            bold: true           // Y-axis label font weight
        }
    }
};

এখানে, hAxis.title এবং vAxis.title এর মাধ্যমে X এবং Y অক্ষের নাম দেওয়া হয়েছে। এছাড়া, titleTextStyle ব্যবহার করে তাদের রঙ, আকার এবং স্টাইল কাস্টমাইজ করা হয়েছে।

Legends কাস্টমাইজ করা

Legends হল চার্টের জন্য একটি গাইড যা দেখায় প্রতিটি ডাটা সিরিজ বা কেটাগরির অর্থ কী। সাধারণত লেজেন্ড ডেটার ব্যাখ্যা দিতে সহায়ক হয় এবং এটি গ্রাফের বাইরে ডেটার সঠিক অর্থ বুঝতে সাহায্য করে।

Legends কাস্টমাইজ করার উদাহরণ

var options = {
    legend: {
        position: 'top',         // Legend position (top, bottom, left, right)
        alignment: 'center',     // Legend alignment
        textStyle: {
            color: '#0277bd',    // Legend text color
            fontSize: 14,        // Legend font size
            bold: true           // Legend font weight
        }
    }
};

এখানে, legend.position ব্যবহার করে লেজেন্ডের অবস্থান নির্ধারণ করা হয়েছে, যা চার্টের উপরে, নিচে, বামে বা ডান পাশে হতে পারে। textStyle ব্যবহার করে লেজেন্ডের টেক্সটের রঙ, আকার এবং স্টাইল কাস্টমাইজ করা হয়েছে।

চার্টের Title, Labels, এবং Legends একসাথে কাস্টমাইজ করা

এখন আমরা একটি উদাহরণ দেখব যেখানে Title, Labels, এবং Legends সবকিছু একসাথে কাস্টমাইজ করা হয়েছে:

public class ChartExample {
    public native void drawChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2018', 1000, 400],
            ['2019', 1200, 460],
            ['2020', 1500, 500],
            ['2021', 1800, 600]
        ]);

        var options = {
            title: 'Company Performance',
            titleTextStyle: {
                color: '#1c4d7f',
                fontSize: 24,
                bold: true
            },
            hAxis: {
                title: 'Year',
                titleTextStyle: {
                    color: '#0277bd',
                    fontSize: 16,
                    bold: true
                }
            },
            vAxis: {
                title: 'Amount ($)',
                titleTextStyle: {
                    color: '#0277bd',
                    fontSize: 16,
                    bold: true
                }
            },
            legend: {
                position: 'top',
                alignment: 'center',
                textStyle: {
                    color: '#0277bd',
                    fontSize: 14,
                    bold: true
                }
            }
        };

        var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
        chart.draw(data, options);
    }-*/;
}

এখানে আমরা একটি Column Chart তৈরি করেছি এবং এর Title, Labels, এবং Legends সবকিছু কাস্টমাইজ করা হয়েছে। hAxis এবং vAxis এর মাধ্যমে অক্ষের নাম কাস্টমাইজ করা হয়েছে এবং legend.position এর মাধ্যমে লেজেন্ডের অবস্থান নির্ধারণ করা হয়েছে।

সারাংশ

Title, Labels, এবং Legends কাস্টমাইজেশন Google Charts এ আপনার চার্টের উপস্থাপনা অনেকটা উন্নত করতে সাহায্য করে। GWT ব্যবহার করে Google Charts API ইন্টিগ্রেট করার মাধ্যমে আপনি আপনার চার্টে এই কাস্টমাইজেশনগুলো সহজেই করতে পারেন, যা ডেটার দৃশ্যমানতা এবং ব্যাখ্যা সহজ করে তোলে। Title চার্টের মূল উদ্দেশ্য ব্যাখ্যা করে, Labels ডেটার শ্রেণী স্পষ্ট করে, এবং Legends ডেটার ব্যাখ্যা প্রদান করে।