Timeline এবং Gantt Chart তৈরি

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

Timeline Chart

Timeline Chart একটি ধরনের চার্ট যা সময়ের সাথে সম্পর্কিত ডেটাকে প্রদর্শন করে। এটি প্রজেক্টের সময়সীমা, ইভেন্ট, বা কার্যক্রমের একটি দৃশ্যমান প্রদর্শনী হিসেবে কাজ করে। GWT Google Charts ব্যবহার করে Timeline Chart তৈরি করতে গেলে Timeline প্যাকেজ এবং DataTable ব্যবহার করা হয়।

১. Timeline Chart তৈরি করার জন্য JavaScript কোড

প্রথমে Timeline Chart তৈরি করার জন্য Google Charts API লোড করতে হবে এবং একটি DataTable তৈরি করতে হবে, যেখানে আমরা সময় সম্পর্কিত ডেটা ইনপুট দেব।

কোড উদাহরণ:

public class TimelineChartExample {
    public native void drawTimelineChart() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('string', 'Position');
        data.addColumn('string', 'Name');
        data.addColumn('date', 'Start');
        data.addColumn('date', 'End');

        // Adding rows to the timeline
        data.addRow(['Engineer', 'John Doe', new Date(2024, 0, 1), new Date(2024, 0, 15)]);
        data.addRow(['Manager', 'Jane Smith', new Date(2024, 0, 5), new Date(2024, 0, 20)]);
        data.addRow(['Director', 'Michael Johnson', new Date(2024, 0, 10), new Date(2024, 0, 25)]);

        var options = {
            title: 'Project Timeline',
            timeline: { colorByRowLabel: true }
        };

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

এখানে, Timeline চার্টের জন্য একটি DataTable তৈরি করা হয়েছে যেখানে বিভিন্ন পদ এবং ব্যক্তির নামসহ সময়কাল (start এবং end) নির্ধারণ করা হয়েছে। new Date(year, month, day) ব্যবহার করে তারিখ সেট করা হয়। Timeline চার্টে colorByRowLabel: true অপশন ব্যবহার করা হয়েছে যাতে প্রতিটি রো আলাদা রঙে প্রদর্শিত হয়।

২. Timeline Chart কাস্টমাইজ করা

Timeline Chart কাস্টমাইজ করতে গেলে আপনি বিভিন্ন অপশন যেমন রঙ, শিরোনাম, এবং অক্ষের লেবেল কাস্টমাইজ করতে পারবেন।

কোড উদাহরণ:

var options = {
    title: 'Project Timeline',
    timeline: {
        colorByRowLabel: true,
        showRowLabels: true,  // Show position labels
        rowLabelStyle: { fontSize: 16, color: 'blue' }
    },
    height: 400
};

এখানে showRowLabels ব্যবহার করে রো লেবেলগুলো প্রদর্শিত হবে এবং rowLabelStyle এর মাধ্যমে রঙ এবং ফন্ট সাইজ কাস্টমাইজ করা যাবে।

Gantt Chart

Gantt Chart একটি জনপ্রিয় চার্ট যা প্রকল্পের কাজগুলির সময়সীমা এবং তাদের ক্রম প্রদর্শন করে। এটি সাধারণত প্রকল্প ব্যবস্থাপনা, টাস্ক পরিকল্পনা, এবং কার্যক্রম ট্র্যাকিং এর জন্য ব্যবহৃত হয়। GWT Google Charts API তে Gantt Chart তৈরি করার জন্য Gantt Chart প্যাকেজ ব্যবহার করা হয়।

১. Gantt Chart তৈরি করার জন্য JavaScript কোড

GWT ব্যবহার করে Gantt Chart তৈরি করতে হলে, Google Charts API লোড করতে হবে এবং DataTable তৈরি করে গাণিতিক ডেটা ইনপুট দিতে হবে।

কোড উদাহরণ:

public class GanttChartExample {
    public native void drawGanttChart() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('string', 'Task ID');
        data.addColumn('string', 'Task Name');
        data.addColumn('date', 'Start Date');
        data.addColumn('date', 'End Date');
        data.addColumn('string', 'Resource');

        // Adding rows for tasks
        data.addRow(['1', 'Task 1', new Date(2024, 0, 1), new Date(2024, 0, 10), 'Resource A']);
        data.addRow(['2', 'Task 2', new Date(2024, 0, 5), new Date(2024, 0, 15), 'Resource B']);
        data.addRow(['3', 'Task 3', new Date(2024, 0, 10), new Date(2024, 0, 20), 'Resource C']);

        var options = {
            title: 'Project Gantt Chart',
            gantt: {
                trackHeight: 30,
                barHeight: 20
            }
        };

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

এখানে, Gantt Chart এর জন্য DataTable তৈরি করা হয়েছে, যেখানে Task ID, Task Name, Start Date, End Date, এবং Resource কলাম যুক্ত করা হয়েছে। প্রতিটি কাজের জন্য Start Date এবং End Date নির্ধারণ করা হয়েছে এবং বিভিন্ন resource এর জন্য আলাদা আলাদা তথ্য রাখা হয়েছে।

২. Gantt Chart কাস্টমাইজ করা

Gantt Chart কাস্টমাইজ করার জন্য বিভিন্ন অপশন ব্যবহার করা যেতে পারে, যেমন বার হাইট, ট্র্যাক হাইট, এবং রঙ কাস্টমাইজেশন।

কোড উদাহরণ:

var options = {
    title: 'Project Gantt Chart',
    gantt: {
        trackHeight: 30,  // Height of each task row
        barHeight: 20,    // Height of task bars
        colorByTask: true,  // Color bars by task
        arrow: {
            width: 2,
            color: 'blue',
            radius: 0.5
        }
    }
};

এখানে, trackHeight এবং barHeight দিয়ে টাস্ক এবং বারের উচ্চতা কাস্টমাইজ করা হয়েছে, এবং colorByTask ব্যবহার করে টাস্কের উপর ভিত্তি করে বারের রঙ পরিবর্তন করা হয়েছে।

সারাংশ

Timeline এবং Gantt Chart গুলি প্রজেক্ট ম্যানেজমেন্ট এবং সময়ভিত্তিক ডেটা ভিজ্যুয়ালাইজেশনের জন্য অত্যন্ত কার্যকর। GWT এবং Google Charts API ব্যবহার করে আপনি সহজেই এই ধরনের চার্ট তৈরি করতে পারেন। Timeline Chart মূলত ইভেন্ট এবং কাজের সময়সীমা প্রদর্শন করে, যেখানে Gantt Chart প্রকল্পের কাজ এবং তাদের সমাপ্তির তারিখ প্রদর্শন করে। এই চার্টগুলির মাধ্যমে ডেটাকে আরও বিস্তারিত এবং ইন্টারেকটিভভাবে বিশ্লেষণ করা সম্ভব।