Data Chunking এবং Pagination

Highcharts হল একটি অত্যন্ত শক্তিশালী লাইব্রেরি যা ডেটা ভিজুয়ালাইজেশন এবং চার্টিংয়ের জন্য ব্যবহৃত হয়। তবে, যখন চার্টের ডেটার পরিমাণ খুব বেশি হয়, তখন পুরো ডেটা একসাথে লোড করা এবং প্রদর্শন করা অনেক সময় ধীরগতির এবং অদক্ষ হতে পারে। এই সমস্যার সমাধান হিসেবে Data Chunking এবং Pagination পদ্ধতি ব্যবহার করা যায়। এই পদ্ধতিগুলোর মাধ্যমে আপনি ডেটার একটি অংশ একবারে প্রদর্শন করতে পারেন, যাতে চার্ট দ্রুত লোড হয় এবং ব্যবহারকারী অভিজ্ঞতা উন্নত হয়।

GWT (Google Web Toolkit) ব্যবহার করে আপনি Highcharts-এ Data Chunking এবং Pagination প্রয়োগ করতে পারেন।

১. Data Chunking (ডেটা চাঙ্কিং)

Data Chunking হল একটি পদ্ধতি যেখানে ডেটার বৃহৎ সেটটি ছোট ছোট অংশে বিভক্ত করা হয় এবং একে একে লোড করা হয়। এটি ডেটা লোডিং এবং প্রদর্শনের গতি বাড়ায়, বিশেষ করে যখন চার্টে বড় ডেটা সেট থাকে।

Highcharts-এ আপনি data chunking প্রয়োগ করতে পারেন যেখানে ডেটার ছোট ছোট অংশ প্রদর্শিত হবে এবং ব্যবহারকারী স্ক্রল করলে নতুন ডেটা লোড হবে।

উদাহরণ: Data Chunking

var chart = Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Chunking Data Example'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: [{
        name: 'Series 1',
        data: []  // Initial empty data array
    }]
});

// Function to load data in chunks
function loadDataInChunks(chunkSize) {
    var chunk = generateDataChunk(chunkSize); // Generate a chunk of data
    chart.series[0].addData(chunk, true, true); // Add data chunk to the chart
}

function generateDataChunk(chunkSize) {
    var chunk = [];
    for (var i = 0; i < chunkSize; i++) {
        chunk.push(Math.random() * 100); // Generate random data for example
    }
    return chunk;
}

// Load the data in chunks
loadDataInChunks(50);  // Load first 50 data points
setInterval(function() {
    loadDataInChunks(50);  // Load next 50 data points every 2 seconds
}, 2000);

এখানে:

• generateDataChunk ফাংশনটি একটি নির্দিষ্ট সাইজের ডেটার অংশ (chunk) তৈরি করে।
• addData মেথডটি নতুন ডেটা অংশটি চার্টে অ্যাড করে।

২. Pagination (পেজিনেশন)

Pagination হল আরেকটি পদ্ধতি যা ডেটার বড় সেটকে ছোট ছোট পৃষ্ঠায় বিভক্ত করে। ব্যবহারকারী পৃষ্ঠার মধ্যে সুইচ করতে পারেন এবং পরবর্তী বা পূর্ববর্তী পৃষ্ঠাগুলি দেখতে পারেন। Highcharts-এ আপনি pagination প্রয়োগ করে ডেটার নির্দিষ্ট পরিমাণ একসাথে প্রদর্শন করতে পারেন।

উদাহরণ: Pagination

var chart = Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Pagination Example'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: [{
        name: 'Series 1',
        data: []  // Empty array for initial data
    }]
});

var currentPage = 0;
var dataPerPage = 50;
var totalData = 500;  // Total number of data points

// Function to load specific page data
function loadPageData(page) {
    var chunk = generateDataForPage(page, dataPerPage);
    chart.series[0].setData(chunk, false); // Set new data for the chart
}

function generateDataForPage(page, dataPerPage) {
    var start = page * dataPerPage;
    var end = start + dataPerPage;
    var chunk = [];
    for (var i = start; i < end; i++) {
        chunk.push(Math.random() * 100); // Generate random data for example
    }
    return chunk;
}

// Load initial data (first page)
loadPageData(currentPage);

// Function to navigate to the next page
function nextPage() {
    if (currentPage * dataPerPage < totalData) {
        currentPage++;
        loadPageData(currentPage);
    }
}

// Function to navigate to the previous page
function previousPage() {
    if (currentPage > 0) {
        currentPage--;
        loadPageData(currentPage);
    }
}

// Next and Previous buttons to control pagination
document.getElementById('nextButton').addEventListener('click', nextPage);
document.getElementById('previousButton').addEventListener('click', previousPage);

এখানে:

• generateDataForPage ফাংশনটি পেজের জন্য নির্দিষ্ট পরিমাণ ডেটা তৈরি করে।
• setData মেথডটি নতুন ডেটা চার্টে সেট করে।
• nextPage এবং previousPage ফাংশন ব্যবহার করে পৃষ্ঠাগুলি নেভিগেট করা যায়।

৩. GWT এ Data Chunking এবং Pagination

GWT ব্যবহার করে Highcharts-এর data chunking এবং pagination ইমপ্লিমেন্ট করতে হলে আপনাকে JSNI (JavaScript Native Interface) ব্যবহার করতে হবে। নিচে একটি উদাহরণ দেয়া হলো যেখানে GWT দিয়ে Highcharts-এ pagination এবং chunking প্রয়োগ করা হয়েছে।

GWT কোডে Data Chunking এবং Pagination

public native void createChartWithPagination(JavaScriptObject chartData) /*-{
    var chart = $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Pagination Example'
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'Values'
            }
        },
        series: [{
            name: 'Series 1',
            data: chartData
        }]
    });

    var currentPage = 0;
    var dataPerPage = 50;
    var totalData = 500;

    function loadPageData(page) {
        var chunk = $wnd.generateDataForPage(page, dataPerPage);
        chart.series[0].setData(chunk, false); 
    }

    function nextPage() {
        if (currentPage * dataPerPage < totalData) {
            currentPage++;
            loadPageData(currentPage);
        }
    }

    function previousPage() {
        if (currentPage > 0) {
            currentPage--;
            loadPageData(currentPage);
        }
    }

    $wnd.document.getElementById('nextButton').addEventListener('click', nextPage);
    $wnd.document.getElementById('previousButton').addEventListener('click', previousPage);
}-*/;

public native JsArrayNumber generateDataForPage(int page, int dataPerPage) /*-{
    var start = page * dataPerPage;
    var end = start + dataPerPage;
    var chunk = [];
    for (var i = start; i < end; i++) {
        chunk.push(Math.random() * 100); // Example of generating random data
    }
    return chunk;
}-*/;

এখানে:

• generateDataForPage JavaScript ফাংশনটি পেজের জন্য নির্দিষ্ট পরিমাণ ডেটা তৈরি করে।
• GWT কোডের মাধ্যমে pagination এবং chunking ব্যবস্থাপনা করা হয়।

সারাংশ

Data Chunking এবং Pagination হল দুটি গুরুত্বপূর্ণ পদ্ধতি যা বিশাল ডেটা সেটের ক্ষেত্রে Highcharts এর কার্যকারিতা বৃদ্ধি করতে সহায়তা করে। GWT ব্যবহার করে আপনি এই ফিচারগুলো Highcharts-এ ইন্টিগ্রেট করতে পারেন, যা ডেটা লোডিং এবং প্রদর্শন করার গতি বাড়ায়। ডেটার একটি অংশ একবারে লোড করে এবং পরে পরবর্তী ডেটা লোড করা, এই পদ্ধতিগুলি ব্যবহারকারী অভিজ্ঞতা উন্নত করে এবং ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ায়।