Responsive এবং Mobile-friendly চার্ট তৈরি

Google Charts হল একটি শক্তিশালী টুল যা ওয়েব অ্যাপ্লিকেশনে ইন্টারেকটিভ এবং কাস্টমাইজযোগ্য চার্ট তৈরি করতে সাহায্য করে। GWT (Google Web Toolkit) ব্যবহার করে Google Charts এর মাধ্যমে আপনি খুব সহজে ওয়েব অ্যাপ্লিকেশনে Responsive এবং Mobile-friendly চার্ট তৈরি করতে পারেন। এটি এমন একটি বৈশিষ্ট্য যা নিশ্চিত করে যে চার্টটি বিভিন্ন স্ক্রীন সাইজে (ডেস্কটপ, ট্যাবলেট, মোবাইল) সঠিকভাবে প্রদর্শিত হয়।

এই টিউটোরিয়ালে আমরা আলোচনা করব কিভাবে Responsive চার্ট তৈরি করা যায় এবং তা Mobile-friendly হয় কিনা তা নিশ্চিত করা যায়।

Responsive এবং Mobile-friendly চার্ট তৈরি করার পদ্ধতি

১. Google Charts API লোড করা

প্রথমে Google Charts API লোড করতে হবে। এটি JSNI (JavaScript Native Interface) ব্যবহার করে GWT অ্যাপ্লিকেশনে ইন্টিগ্রেট করা হয়।

public class ResponsiveChartExample {
    public native void loadGoogleCharts() /*-{
        google.charts.load('current', {
            packages: ['corechart', 'bar']
        });
    }-*/;
}

এখানে corechart এবং bar প্যাকেজটি লোড করা হয়েছে, কারণ আমরা একটি বার চার্ট তৈরি করব।

২. Responsive চার্টের জন্য কাস্টম সাইজ সেট করা

Responsive Design নিশ্চিত করতে, আমরা Google Charts API এর মধ্যে width এবং height এর সাইজ কাস্টমাইজ করতে পারি। তবে, Responsive থাকার জন্য সাইজটি হার্ডকোড না করে Percentage-based width ব্যবহার করা উত্তম। এটি স্ক্রীনের আকার অনুযায়ী চার্টের আকারকে সমন্বয় করতে সাহায্য করবে।

উদাহরণ:

public class ResponsiveChartExample {
    public native void drawResponsiveChart() /*-{
        var data = new $wnd.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' },
            width: '100%',   // Responsive width
            height: '100%'   // Responsive height
        };

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

এখানে, width: '100%' এবং height: '100%' সেট করা হয়েছে, যা নিশ্চিত করে যে চার্টটি যে কন্টেইনারে থাকবে, সেটির আকার অনুযায়ী চার্টের আকার পরিবর্তিত হবে।

৩. CSS ব্যবহার করে Responsiveness বৃদ্ধি

কোনো ওয়েব পেজে Responsive চার্ট যোগ করতে হলে CSS ফ্লেক্সিবিলিটি এবং মিডিয়া কুয়েরি ব্যবহার করা প্রয়োজন। আপনাকে চার্টের কন্টেইনারের জন্য CSS স্টাইল কাস্টমাইজ করতে হবে, যাতে তা বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়।

উদাহরণ:

#chart_div {
    width: 100%;
    height: 500px;
}
@media (max-width: 768px) {
    #chart_div {
        height: 300px;
    }
}

এখানে, #chart_div (যেখানে চার্ট রেন্ডার হবে) এর জন্য width: 100% এবং height এর জন্য মিডিয়া কুয়েরি ব্যবহার করা হয়েছে। যেহেতু মোবাইল স্ক্রীনে চার্ট ছোট হবে, তাই height কমানো হয়েছে।

৪. মোবাইল-ফ্রেন্ডলি চার্ট তৈরি করা

Mobile-friendly চার্ট তৈরি করতে হলে আপনাকে চার্টের কন্টেইনারের আকার এবং চার্টের প্যারামিটারগুলো সঠিকভাবে কাস্টমাইজ করতে হবে যাতে ছোট স্ক্রীনে চার্টটি পরিষ্কারভাবে প্রদর্শিত হয়।

উদাহরণ:

public class MobileFriendlyChartExample {
    public native void drawMobileFriendlyChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Month', 'Sales'],
            ['Jan', 1000],
            ['Feb', 1200],
            ['Mar', 1300],
            ['Apr', 1400],
        ]);

        var options = {
            title: 'Monthly Sales',
            width: '100%',  // Full width for responsiveness
            height: '400',  // Fixed height
            legend: 'none',
            hAxis: {title: 'Month'},
            vAxis: {title: 'Sales'}
        };

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

এখানে width: '100%' ব্যবহার করা হয়েছে, যাতে চার্টের আকার স্ক্রীনের আকার অনুযায়ী পরিবর্তিত হয়। মোবাইল এবং ট্যাবলেট ব্যবহারকারীদের জন্য height নির্দিষ্ট করা হয়েছে।

৫. চার্টের রিসাইজিং সক্ষমতা

Responsive চার্টের আরেকটি গুরুত্বপূর্ণ বৈশিষ্ট্য হল চার্টের রিসাইজিং সক্ষমতা। এর মাধ্যমে চার্টটি পেজের আকার পরিবর্তনের সাথে সাথে স্বয়ংক্রিয়ভাবে রিসাইজ হয়ে যাবে।

এটি Google Charts এর chart.draw() ফাংশনের মাধ্যমে করা যায়, যেখানে প্রতিবার পেজ রিসাইজ হওয়ার পর চার্টটি আবার ড্র করা হয়।

উদাহরণ:

public class ResizableChartExample {
    public native void drawResizableChart() /*-{
        var data = new $wnd.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' },
        };

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

        // Redraw the chart on window resize
        $wnd.addEventListener('resize', function () {
            chart.draw(data, options);
        });
    }-*/;
}

এখানে resize ইভেন্ট ব্যবহার করে চার্ট রিসাইজ করার সময় সেটি স্বয়ংক্রিয়ভাবে নতুন সাইজ অনুযায়ী আবার ড্র করা হচ্ছে।

সারাংশ

Responsive এবং Mobile-friendly চার্ট তৈরি করার জন্য GWT এবং Google Charts একটি শক্তিশালী সমাধান। Responsive Design নিশ্চিত করতে, আমরা CSS এবং JavaScript ব্যবহার করে চার্টের সাইজ এবং কন্টেইনারের আকার সঠিকভাবে কাস্টমাইজ করি। এর ফলে চার্টটি বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়। মোবাইল-ফ্রেন্ডলি চার্ট তৈরির জন্য আপনার চার্টের কন্টেইনার, সাইজ এবং প্যারামিটার সঠিকভাবে কাস্টমাইজ করা প্রয়োজন, যাতে মোবাইল স্ক্রীনে এটি পরিষ্কারভাবে প্রদর্শিত হয়।