একাধিক চার্ট তৈরি এবং পরিচালনা

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

এখানে, আমরা দেখব কীভাবে GWT এবং Google Charts ব্যবহার করে একাধিক চার্ট তৈরি এবং সেগুলিকে পরিচালনা করা যায়।

একাধিক চার্ট তৈরি করা

১. Google Charts API লোড করা

প্রথমে, Google Charts API লোড করতে হবে, যা আপনার GWT অ্যাপ্লিকেশনে চার্ট তৈরি এবং প্রদর্শন করতে সক্ষম হবে। নিচের কোডটি আপনার JavaScript Native Interface (JSNI) মাধ্যমে Google Charts API লোড করার জন্য ব্যবহার করতে হবে।

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

এখানে, packages: ['corechart', 'bar', 'line', 'pie'] কোডের মাধ্যমে আমরা বার, লাইন, পাই, এবং কোর চার্ট প্যাকেজ লোড করছি।

২. একাধিক চার্ট তৈরি করা

একাধিক চার্ট তৈরি করার জন্য, আপনি GWT UI তে একাধিক div এলিমেন্ট তৈরি করতে পারেন, যেখানে প্রতিটি চার্ট পৃথকভাবে রেন্ডার হবে।

উদাহরণ:

public class MultipleCharts {
    public native void drawMultipleCharts() /*-{
        var data1 = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2018', 1000],
            ['2019', 1500],
            ['2020', 2000]
        ]);

        var options1 = {
            title: 'Sales Performance',
            hAxis: { title: 'Year' },
            vAxis: { title: 'Sales' }
        };

        var chart1 = new $wnd.google.visualization.BarChart($doc.getElementById('chart_div_1'));
        chart1.draw(data1, options1);

        var data2 = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Profit'],
            ['2018', 800],
            ['2019', 1200],
            ['2020', 1600]
        ]);

        var options2 = {
            title: 'Profit Performance',
            hAxis: { title: 'Year' },
            vAxis: { title: 'Profit' }
        };

        var chart2 = new $wnd.google.visualization.LineChart($doc.getElementById('chart_div_2'));
        chart2.draw(data2, options2);
    }-*/;
}

এখানে:

• chart_div_1: প্রথম চার্টের জন্য div এলিমেন্ট।
• chart_div_2: দ্বিতীয় চার্টের জন্য div এলিমেন্ট।
• দুইটি ভিন্ন চার্ট: একটি বার চার্ট এবং অন্যটি লাইন চার্ট তৈরি করা হয়েছে।

৩. HTML টেমপ্লেট

GWT অ্যাপ্লিকেশনে একাধিক চার্ট রেন্ডার করার জন্য HTML পেজে একাধিক div এলিমেন্ট তৈরি করতে হবে, যেগুলোর মধ্যে প্রতিটি চার্ট রেন্ডার হবে।

উদাহরণ:

<div id="chart_div_1" style="width: 600px; height: 400px;"></div>
<div id="chart_div_2" style="width: 600px; height: 400px;"></div>

এখানে দুটি div এলিমেন্ট তৈরি করা হয়েছে, যেখানে একাধিক চার্ট রেন্ডার হবে।

একাধিক চার্ট পরিচালনা করা

১. চার্টের রিফ্রেশ

একাধিক চার্ট পরিচালনার সময়, আপনি চাইলে একাধিক চার্টকে রিফ্রেশ করতে পারেন, বা নতুন ডেটা দিয়ে আপডেট করতে পারেন। GWT এর মাধ্যমে আপনি নতুন ডেটা সেট লোড করে এবং চার্ট রেন্ডার করে এটি করতে পারেন।

উদাহরণ:

public class MultipleChartUpdater {
    public native void refreshCharts() /*-{
        var data1 = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2021', 3000],
            ['2022', 3500],
            ['2023', 4000]
        ]);

        var chart1 = new $wnd.google.visualization.BarChart($doc.getElementById('chart_div_1'));
        chart1.draw(data1, {title: 'Sales Performance'});

        var data2 = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Profit'],
            ['2021', 2000],
            ['2022', 2500],
            ['2023', 3000]
        ]);

        var chart2 = new $wnd.google.visualization.LineChart($doc.getElementById('chart_div_2'));
        chart2.draw(data2, {title: 'Profit Performance'});
    }-*/;
}

এখানে:

• দুটি চার্ট (একটি বার চার্ট এবং একটি লাইন চার্ট) রিফ্রেশ করা হচ্ছে নতুন ডেটা দিয়ে।
• প্রতিটি চার্টের জন্য নতুন ডেটা লোড এবং রেন্ডার করা হচ্ছে।

২. চার্টের অপশন পরিবর্তন

আপনি চাইলে চার্টের কাস্টম অপশনও পরিবর্তন করতে পারেন, যেমন রঙ, ফন্ট, শিরোনাম ইত্যাদি। GWT এর মাধ্যমে আপনি সহজে এই কাস্টম অপশনগুলো পরিবর্তন করতে পারেন।

উদাহরণ:

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

    var options = {
        title: 'Updated Sales Performance',
        hAxis: {
            title: 'Year',
            textStyle: { color: 'blue', fontSize: 14 }
        },
        vAxis: { title: 'Sales' },
        colors: ['#FF5733']  // চিহ্নিত রঙ পরিবর্তন
    };

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

এখানে:

• hAxis.textStyle: X-axis এর টেক্সট স্টাইল কাস্টমাইজ করা হয়েছে।
• colors: চার্টের রঙ পরিবর্তন করা হয়েছে।

একাধিক চার্টের ইন্টারঅ্যাকশন

১. চার্টের ডেটা পরিবর্তন

GWT এবং Google Charts ব্যবহার করে আপনি একাধিক চার্টের ডেটা ইন্টারঅ্যাক্টিভভাবে পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, এক চার্টের ডেটা পরিবর্তন হলে অন্য চার্টে স্বয়ংক্রিয়ভাবে সেই পরিবর্তন প্রতিফলিত হতে পারে।

২. একাধিক চার্টের সমন্বিত আপডেট

একাধিক চার্টকে একত্রে পরিচালনা করতে GWT ব্যবহারকারীদের জন্য একাধিক চার্টের ডেটা আপডেট করার জন্য একটি ইন্টারফেস তৈরি করতে পারে, যেখানে ব্যবহারকারী একত্রে বা নির্দিষ্টভাবে প্রতিটি চার্টের ডেটা পরিবর্তন করতে পারে।

সারাংশ

GWT Google Charts এর মাধ্যমে একাধিক চার্ট তৈরি এবং পরিচালনা করা সহজ এবং কার্যকরী। আপনি বিভিন্ন চার্ট ধরনের (যেমন বার, লাইন, পাই) তৈরি করতে পারেন এবং সেগুলিকে আলাদা আলাদা কন্টেইনারে রেন্ডার করতে পারেন। GWT এর মাধ্যমে একাধিক চার্ট পরিচালনা করা, যেমন চার্ট রিফ্রেশ করা, অপশন পরিবর্তন করা, ডেটা আপডেট করা ইত্যাদি, আরও কার্যকরী এবং ডাইনামিক অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।