Chart Options কনফিগার করা

GWT Google Charts ব্যবহার করে চার্ট তৈরি করা সহজ এবং বিভিন্ন কাস্টমাইজেশন অপশন দিয়ে এগুলিকে আরও ইন্টারেকটিভ ও অ্যাট্র্যাকটিভ করা যায়। যখন আপনি Google Charts ব্যবহার করেন, তখন আপনি বিভিন্ন Chart Options কনফিগার করতে পারেন। এগুলি চার্টের রূপ এবং কার্যকারিতা কাস্টমাইজ করার জন্য ব্যবহৃত হয়।

এই টিউটোরিয়ালে, আমরা দেখব কীভাবে GWT ব্যবহার করে Google Charts এর বিভিন্ন চার্টের অপশন কনফিগার করা যায়।

Google Charts এর সাধারণ Chart Options

Google Charts API বিভিন্ন ধরনের চার্ট তৈরির জন্য একটি নির্দিষ্ট সেট অপশন প্রদান করে। প্রতিটি চার্টের জন্য কিছু সাধারণ কনফিগারেশন অপশন থাকে, যেগুলি চার্টের ভিজ্যুয়াল এবং আচরণ কাস্টমাইজ করতে সহায়ক।

১. Chart Title (শিরোনাম)

Chart Title অপশনটি ব্যবহার করে আপনি চার্টের শিরোনাম কনফিগার করতে পারেন। শিরোনাম সাধারণত চার্টের উপরে প্রদর্শিত হয়।

var options = {
    title: 'Company Performance'
};

২. Chart Area (চার্ট এরিয়া)

Chart Area অপশনটি চার্টের মধ্যে কাজ করার স্থান নিয়ন্ত্রণ করে। আপনি এর মাধ্যমে চার্টের ভেতরের জায়গা এবং চার্টের মধ্যে ডাটা প্রদর্শনের কক্ষ সীমাবদ্ধ করতে পারেন।

var options = {
    chartArea: { width: '50%', height: '70%' }
};

৩. Axis Titles (অক্ষের শিরোনাম)

X-axis এবং Y-axis এর শিরোনাম কনফিগার করতে hAxis (horizontal axis) এবং vAxis (vertical axis) অপশন ব্যবহার করা হয়।

var options = {
    hAxis: {title: 'Year', minValue: 0},
    vAxis: {title: 'Sales'}
};

৪. Colors and Styling (রঙ এবং স্টাইলিং)

চার্টের ডাটা পয়েন্টের রঙ এবং স্টাইল কাস্টমাইজ করার জন্য colors অপশন ব্যবহার করা যায়। এতে আপনি বিভিন্ন রঙ প্রদান করতে পারেন যাতে চার্টটি আরও আকর্ষণীয় হয়।

var options = {
    colors: ['#ff5733', '#33ff57']
};

এছাড়া, চার্টের বার বা সেগমেন্টের শেপ, আকার এবং স্টাইলও কাস্টমাইজ করা যায়।

৫. Legend (লেজেন্ড)

Legend বা চিহ্নিতকরণের জন্য legend অপশন ব্যবহার করা হয়। এটি চার্টের নিচে বা পাশে থাকা বিভিন্ন ডাটা সিরিজের নাম প্রদর্শন করে।

var options = {
    legend: { position: 'top' }
};

৬. Gridlines (গ্রিডলাইনস)

Gridlines অপশনটি ব্যবহার করে চার্টের পিছনে গ্রিডলাইন কনফিগার করা যায়, যা সাধারণত অক্ষের মান বুঝতে সহায়ক হয়।

var options = {
    hAxis: {
        gridlines: { count: 4 }
    }
};

Google Charts API ব্যবহার করে GWT এর মাধ্যমে Chart Options কনফিগার করা

GWT Google Charts ব্যবহার করে আপনি সহজেই Google Charts API এর এই অপশনগুলো কনফিগার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে একটি Bar Chart তৈরি করা হয়েছে এবং তার বিভিন্ন কাস্টমাইজেশন অপশন প্রয়োগ করা হয়েছে।

উদাহরণ: GWT Google Charts - Bar Chart কনফিগারেশন

public class GwtGoogleChartExample {
    public native void drawChart() /*-{
        google.charts.load('current', {
            packages: ['corechart', 'bar']
        });
        google.charts.setOnLoadCallback(function () {
            var data = google.visualization.arrayToDataTable([
                ['Year', 'Sales', 'Expenses'],
                ['2013', 1000, 400],
                ['2014', 1170, 460],
                ['2015', 660, 1120],
                ['2016', 1030, 540]
            ]);

            var options = {
                title: 'Company Performance',
                chartArea: {width: '50%'},
                hAxis: {
                    title: 'Total Revenue',
                    minValue: 0
                },
                vAxis: {
                    title: 'Year'
                },
                colors: ['#ff5733', '#33ff57'],
                legend: { position: 'top' }
            };

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

এই কোডে যে অপশনগুলো কনফিগার করা হয়েছে:

• title: 'Company Performance' শিরোনাম।
• chartArea: চার্টের আকার ৫০% প্রস্থ এবং ৭০% উচ্চতা।
• hAxis এবং vAxis: অক্ষের শিরোনাম এবং মিনিমাম মান।
• colors: ডাটা পয়েন্টের জন্য দুটি রঙ (red এবং green)।
• legend: লেজেন্ডের অবস্থান উপরে।

সারাংশ

Chart Options কনফিগার করার মাধ্যমে আপনি আপনার Google Charts এর কাস্টমাইজেশন এবং ভিজ্যুয়াল উপস্থাপন আরও আকর্ষণীয় করতে পারেন। GWT এর মাধ্যমে Google Charts API ব্যবহার করে এই অপশনগুলো কনফিগার করা সহজ, যা আপনার অ্যাপ্লিকেশনে ডাটা ভিজ্যুয়ালাইজেশনকে আরও কার্যকর ও ইন্টারেকটিভ করে তোলে।