Data Formatting এবং Custom Labels

Google Charts API একটি শক্তিশালী টুল, যা GWT (Google Web Toolkit) এর মাধ্যমে ডাটা ভিজ্যুয়ালাইজেশন সহজ করে তোলে। বিশাল ডাটা সেট প্রদর্শন, ডেটার ফরম্যাটিং এবং কাস্টম লেবেলিং এই API-তে গুরুত্বপূর্ণ ফিচার। এই টিউটোরিয়ালে আমরা দেখব কীভাবে Data Formatting (ডেটা ফরম্যাটিং) এবং Custom Labels (কাস্টম লেবেল) তৈরি করা যায় GWT এবং Google Charts ব্যবহার করে।

Data Formatting (ডেটা ফরম্যাটিং)

Data Formatting (ডেটা ফরম্যাটিং) হল ডেটার প্রদর্শনের ধরন পরিবর্তন করা, যাতে তা আরও সহজে পাঠযোগ্য এবং বোধগম্য হয়। Google Charts API-তে বিভিন্ন ধরনের ডেটা ফরম্যাটিং অপশন আছে, যা আপনি GWT অ্যাপ্লিকেশনে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি ডেটার decimal points, currency symbols, date formats, ইত্যাদি কাস্টমাইজ করতে পারেন।

১. নম্বর ফরম্যাটিং

Number Formatting ব্যবহার করে আপনি ডেটার সংখ্যা ফরম্যাট কাস্টমাইজ করতে পারেন। Google Charts API তে numberFormat ফিচারটি ব্যবহার করে আপনি সংখ্যা প্রেজেন্টেশন ফরম্যাট করতে পারেন।

উদাহরণ: নম্বর ফরম্যাটিং

public class DataFormattingExample {
    public native void drawChartWithFormattedNumbers() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2013', 1000],
            ['2014', 1170],
            ['2015', 1250],
            ['2016', 1530]
        ]);

        var options = {
            title: 'Company Sales Performance',
            hAxis: {title: 'Year'},
            vAxis: {
                title: 'Sales ($)',
                format: 'currency' // Currency format
            }
        };

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

এখানে, vAxis এর format: 'currency' অপশন ব্যবহার করে বিক্রয়ের ডাটা currency ফরম্যাটে প্রদর্শিত হবে।

২. ডেটা ফরম্যাটিং - ডেটা এবং সময়

Date Formatting দিয়ে আপনি সময় সম্পর্কিত ডেটাকে প্রয়োজনীয় ফরম্যাটে রূপান্তর করতে পারেন, যেমন MM/dd/yyyy বা yyyy-MM-dd।

উদাহরণ: ডেটা ফরম্যাটিং

public class DateFormattingExample {
    public native void drawChartWithDateFormatting() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Date', 'Sales'],
            ['2023-01-01', 1000],
            ['2023-02-01', 1170],
            ['2023-03-01', 1250],
            ['2023-04-01', 1530]
        ]);

        var options = {
            title: 'Sales Over Time',
            hAxis: {title: 'Date', format: 'yyyy-MM-dd'},
            vAxis: {title: 'Sales ($)'}
        };

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

এখানে, hAxis এর format: 'yyyy-MM-dd' ব্যবহার করে ডেটাকে yyyy-MM-dd ফরম্যাটে প্রদর্শন করা হয়েছে।

Custom Labels (কাস্টম লেবেল)

Custom Labels (কাস্টম লেবেল) ব্যবহারকারীদের জন্য চার্টে প্রদর্শিত তথ্যকে আরও বোধগম্য করে তোলে। আপনি ডেটা পয়েন্টের সাথে লেবেল যোগ করে, সেটিকে আরও স্পষ্ট এবং সহজে বুঝতে সক্ষম করতে পারেন। Google Charts API তে কাস্টম লেবেল তৈরি করা যায়, যা আপনাকে চাহিদা অনুযায়ী ফন্ট, রঙ এবং কনটেন্ট কাস্টমাইজ করার সুযোগ দেয়।

১. কাস্টম লেবেল তৈরি করা

চার্টের উপরে বা ভিতরে কাস্টম লেবেল প্রদর্শন করতে, আপনি annotations বা textStyle অপশন ব্যবহার করতে পারেন।

উদাহরণ: কাস্টম লেবেল

public class CustomLabelsExample {
    public native void drawChartWithCustomLabels() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2013', 1000],
            ['2014', 1170],
            ['2015', 1250],
            ['2016', 1530]
        ]);

        var options = {
            title: 'Company Sales Performance',
            hAxis: {title: 'Year'},
            vAxis: {title: 'Sales ($)'},
            annotations: {
                style: 'line',  // Custom annotation style
                textStyle: {color: '#ff0000', fontSize: 14}
            }
        };

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

এখানে, annotations এবং textStyle ব্যবহার করে কাস্টম লেবেল তৈরি করা হয়েছে, যাতে লেবেল রঙ এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।

২. কাস্টম টুলটিপ

Custom Tooltip ব্যবহারকারীদের জন্য আরো বিস্তারিত তথ্য প্রদর্শন করতে সহায়ক। আপনি tooltip অপশনে কাস্টম টেক্সট বা HTML কন্টেন্টও প্রদর্শন করতে পারেন।

উদাহরণ: কাস্টম টুলটিপ

public class CustomTooltipExample {
    public native void drawChartWithCustomTooltip() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 1250, 600],
            ['2016', 1530, 700]
        ]);

        var options = {
            title: 'Company Performance',
            hAxis: {title: 'Year'},
            vAxis: {title: 'Amount ($)'},
            tooltip: {isHtml: true, trigger: 'focus'}
        };

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

এখানে, tooltip এর মাধ্যমে কাস্টম HTML কন্টেন্ট এবং trigger: 'focus' ব্যবহার করে টুলটিপের প্রদর্শন কাস্টমাইজ করা হয়েছে।

সারাংশ

Google Charts এবং GWT এর মাধ্যমে Data Formatting এবং Custom Labels তৈরি করা ডেটার ভিজ্যুয়ালাইজেশনকে আরো কার্যকরী এবং বোধগম্য করে তোলে। Number Formatting, Date Formatting, এবং Custom Labels ব্যবহার করে আপনি চার্টের ডেটা এবং লেবেল কাস্টমাইজ করতে পারেন। এটি ব্যবহারকারীদের জন্য ডেটাকে আরও স্পষ্ট এবং আর্কষণীয় করে তোলে। GWT-এ Google Charts ইন্টিগ্রেট করে কাস্টম লেবেল এবং ডেটা ফরম্যাটিং এর মাধ্যমে ডেটা উপস্থাপন করা সহজ এবং কার্যকরী।