Color, Font, এবং Chart Size কাস্টমাইজ করা

GWT (Google Web Toolkit) এবং Google Charts API ব্যবহার করে আপনি আপনার চার্টগুলির রঙ, ফন্ট, এবং সাইজ কাস্টমাইজ করতে পারেন। কাস্টমাইজেশন অপশনগুলি আপনার চার্টের ভিজ্যুয়াল উপস্থিতি এবং ইউজার এক্সপিরিয়েন্সকে উন্নত করতে সহায়ক। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে GWT-এ Google Charts ব্যবহার করে Color, Font, এবং Chart Size কাস্টমাইজ করা যায়।

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

১. Chart Colors কাস্টমাইজ করা

Google Charts API এর মাধ্যমে আপনি আপনার চার্টের বিভিন্ন উপাদানের জন্য রঙ কাস্টমাইজ করতে পারেন, যেমন বার, লাইন, পটভূমি ইত্যাদি। options অবজেক্টের মধ্যে colors প্রপার্টি ব্যবহার করে আপনি চার্টের রঙ পরিবর্তন করতে পারেন।

কোড উদাহরণ:

public class GoogleChartsIntegration {
    public native void drawBarChartWithCustomColors() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2018', 1000, 400],
            ['2019', 1500, 600],
            ['2020', 2000, 800],
            ['2021', 2500, 1000]
        ]);

        var options = {
            title: 'Company Performance',
            colors: ['#FF5733', '#33FF57'],  // Custom colors for bars
            chartArea: {width: '50%'},
            hAxis: {title: 'Sales'},
            vAxis: {title: 'Year'}
        };

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

এখানে, colors প্রপার্টি ব্যবহার করে Sales এবং Expenses বারগুলোর জন্য কাস্টম রঙ দেয়া হয়েছে। #FF5733 এবং #33FF57 হেক্সাডেসিমেল রঙ কোডগুলো Sales এবং Expenses-এর জন্য কাস্টম রঙ নির্ধারণ করে।

২. Pie Chart এর রঙ কাস্টমাইজ করা

পাই চার্টে প্রতিটি স্লাইসের জন্য আলাদা রঙ দেয়া যায়। slices অপশনের মাধ্যমে আপনি বিভিন্ন স্লাইসের রঙ পরিবর্তন করতে পারবেন।

কোড উদাহরণ:

public native void drawPieChartWithCustomColors() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Category', 'Value'],
        ['Sales', 500],
        ['Marketing', 300],
        ['Development', 200],
        ['Support', 100]
    ]);

    var options = {
        title: 'Department Spending',
        slices: {
            0: {offset: 0.1, color: '#FF5733'},  // Custom color for 'Sales' slice
            1: {offset: 0.1, color: '#33FF57'}   // Custom color for 'Marketing' slice
        },
        is3D: true
    };

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

এখানে, Sales এবং Marketing স্লাইসের জন্য কাস্টম রঙ নির্ধারণ করা হয়েছে।

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

১. Chart Title এবং Axis Titles এর Font কাস্টমাইজ করা

আপনি Chart Title এবং Axis Titles এর ফন্ট পরিবর্তন করতে পারেন, যা চার্টটির লুক এবং অনুভূতিকে আরও কাস্টমাইজড করে তোলে। fontName, fontSize, এবং textStyle প্রপার্টি ব্যবহার করে আপনি ফন্ট পরিবর্তন করতে পারবেন।

কোড উদাহরণ:

public native void drawChartWithCustomFont() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2018', 1000, 400],
        ['2019', 1500, 600],
        ['2020', 2000, 800],
        ['2021', 2500, 1000]
    ]);

    var options = {
        title: 'Company Performance',
        titleTextStyle: {
            fontSize: 24,
            bold: true,
            italic: true,
            color: '#FF5733'
        },
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                fontSize: 18,
                bold: true,
                color: '#333333'
            }
        },
        vAxis: {
            title: 'Sales',
            titleTextStyle: {
                fontSize: 18,
                bold: true,
                color: '#333333'
            }
        }
    };

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

এখানে, titleTextStyle এবং titleTextStyle এর মাধ্যমে চার্টের শিরোনাম এবং অক্ষের শিরোনাম ফন্ট কাস্টমাইজ করা হয়েছে। fontSize, bold, italic, এবং color ব্যবহার করে ফন্টের স্টাইল নির্ধারণ করা হয়েছে।

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

১. Chart এর Size পরিবর্তন করা

Google Charts এ আপনি width এবং height অপশন দিয়ে চার্টের আকার কাস্টমাইজ করতে পারেন।

কোড উদাহরণ:

public native void drawChartWithCustomSize() /*-{
    var data = new $wnd.google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2018', 1000],
        ['2019', 1500],
        ['2020', 2000],
        ['2021', 2500]
    ]);

    var options = {
        title: 'Company Performance',
        width: 800,   // Custom width
        height: 500,  // Custom height
        chartArea: {width: '60%', height: '70%'},
        hAxis: {title: 'Year'},
        vAxis: {title: 'Sales'}
    };

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

এখানে, width এবং height ব্যবহার করে চার্টের আকার নির্ধারণ করা হয়েছে। chartArea ব্যবহার করে চার্টের প্রদর্শন এলাকার আকারও কাস্টমাইজ করা হয়েছে।

সারাংশ

Google Charts API এবং GWT এর মাধ্যমে চার্টের রঙ, ফন্ট এবং সাইজ কাস্টমাইজ করা সম্ভব। এর মাধ্যমে আপনি আপনার চার্টগুলোকে আরও প্রাসঙ্গিক, সুন্দর এবং ব্যবহারকারী-বান্ধব করতে পারবেন। রঙের কাস্টমাইজেশন আপনাকে ডেটা ভিজ্যুয়ালাইজেশনে সহায়তা করে, ফন্ট কাস্টমাইজেশন আপনার চার্টের পাঠযোগ্যতা উন্নত করে, এবং সাইজ কাস্টমাইজেশন চার্টের সঠিক প্রদর্শন নিশ্চিত করে। GWT এবং Google Charts ব্যবহার করে আপনি এই কাস্টমাইজেশনগুলো খুব সহজেই কার্যকর করতে পারেন।