Static ডেটা ব্যবহার করে চার্ট তৈরি করা

Highcharts-এর মাধ্যমে Static (স্থির) ডেটা ব্যবহার করে চার্ট তৈরি করা খুব সহজ। Static ডেটা বলতে এমন ডেটা বোঝায়, যা পরিবর্তনশীল নয় এবং যেটি শুরুতেই নির্দিষ্ট হয়ে থাকে। GWT (Google Web Toolkit) প্রজেক্টে Static ডেটা দিয়ে Highcharts চার্ট তৈরি করার জন্য প্রথমে Highcharts লাইব্রেরি ইন্টিগ্রেট করতে হবে এবং পরে সেই ডেটা দিয়ে চার্ট তৈরি করতে হবে।

এখানে Static ডেটা ব্যবহার করে GWT এ Highcharts চার্ট তৈরি করার পদক্ষেপগুলো দেওয়া হলো:

Static ডেটা ব্যবহার করে Highcharts চার্ট তৈরি করার পদক্ষেপ

১. Highcharts লাইব্রেরি GWT প্রজেক্টে যুক্ত করা

প্রথমে, Highcharts লাইব্রেরি আপনার GWT প্রজেক্টে অন্তর্ভুক্ত করতে হবে। Highcharts একটি JavaScript লাইব্রেরি, তাই আপনাকে highcharts.js ফাইলটি আপনার GWT প্রকল্পে অন্তর্ভুক্ত করতে হবে।

1. Highcharts লাইব্রেরি ডাউনলোড করতে, Highcharts অফিসিয়াল সাইট থেকে ডাউনলোড করুন।
2. তারপর highcharts.js ফাইলটি war/js/ ফোল্ডারে রাখুন।

২. Static ডেটা দিয়ে Highcharts চার্ট তৈরি করা

এখন, Static ডেটা দিয়ে Highcharts চার্ট তৈরি করার জন্য GWT এ JavaScriptOverlay ব্যবহার করা হবে। নিচে একটি উদাহরণ দেওয়া হলো:

package com.mycompany.myproject.client;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;

public class HighchartsIntegration {

    // JavaScriptOverlay ক্লাস তৈরি করা
    public static native void createChart(String containerId, JsArray<Data> data) /*-{
        $wnd.Highcharts.chart(containerId, {
            chart: {
                type: 'line'  // এখানে চার্টের টাইপ নির্বাচন করা
            },
            title: {
                text: 'Static Data Example'  // চার্টের টাইটেল
            },
            series: [{
                name: 'Static Data',
                data: data  // ডেটা সেট করা
            }]
        });
    }-*/;

    // Static ডেটা স্টোর করার জন্য Data ক্লাস
    public static class Data extends JavaScriptObject {
        protected Data() {}

        public final native int getX() /*-{
            return this.x;
        }-*/;

        public final native int getY() /*-{
            return this.y;
        }-*/;
    }
}

এখানে:

• createChart মেথডে Highcharts.chart ফাংশন ব্যবহার করা হয়েছে, যা নির্দিষ্ট containerId তে চার্ট তৈরি করবে।
• data হলো Static ডেটা, যা Highcharts এ ব্যবহৃত হবে।
• Data ক্লাসটি JavaScriptObject এক্সটেন্ড করে তৈরি করা হয়েছে, যা x এবং y ভ্যালু দিয়ে Static ডেটা ধারণ করে।

৩. Static ডেটা তৈরি করা

Static ডেটা তৈরি করার জন্য, JsArray ব্যবহার করে কিছু পূর্বনির্ধারিত ডেটা পয়েন্ট তৈরি করা হয়। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে Static ডেটা দিয়ে লাইন চার্ট তৈরি করা হচ্ছে:

package com.mycompany.myproject.client;

import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.ui.RootPanel;

public class HighchartsExample {

    public void loadChart() {
        // Static ডেটা তৈরি করা
        JsArray<HighchartsIntegration.Data> data = createStaticData();
        
        // Highcharts chart তৈরি করা
        HighchartsIntegration.createChart("chart-container", data);
    }

    // Static ডেটা তৈরি করার জন্য মেথড
    private JsArray<HighchartsIntegration.Data> createStaticData() {
        JsArray<HighchartsIntegration.Data> data = JsArray.createArray().cast();
        
        HighchartsIntegration.Data dataPoint1 = createDataPoint(1, 10);
        HighchartsIntegration.Data dataPoint2 = createDataPoint(2, 20);
        HighchartsIntegration.Data dataPoint3 = createDataPoint(3, 30);
        HighchartsIntegration.Data dataPoint4 = createDataPoint(4, 40);
        HighchartsIntegration.Data dataPoint5 = createDataPoint(5, 50);

        // Static ডেটা পয়েন্টগুলো অ্যারে তে পুশ করা
        data.push(dataPoint1);
        data.push(dataPoint2);
        data.push(dataPoint3);
        data.push(dataPoint4);
        data.push(dataPoint5);

        return data;
    }

    // Static ডেটা পয়েন্ট তৈরি করার জন্য মেথড
    private HighchartsIntegration.Data createDataPoint(int x, int y) {
        HighchartsIntegration.Data dataPoint = JavaScriptObject.createObject().cast();
        dataPoint.setX(x);
        dataPoint.setY(y);
        return dataPoint;
    }
}

এই কোডে:

• createStaticData() মেথডে কিছু Static ডেটা তৈরি করা হয়েছে যা Highcharts এ প্রদর্শিত হবে।
• createDataPoint() মেথডটি x এবং y ভ্যালু নিয়ে একটি ডেটা পয়েন্ট তৈরি করে এবং সেটি JsArray তে পুশ করে।

৪. HTML ফাইলে Static চার্ট প্রদর্শন করা

এখন, GWT অ্যাপ্লিকেশন থেকে HTML ফাইলে চার্ট প্রদর্শন করার জন্য আপনাকে একটি HTML ডিভ তৈরি করতে হবে, যেখানে Highcharts এর চার্টটি রেন্ডার হবে।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highcharts Static Data Example</title>
    <script src="js/highcharts.js"></script>
</head>
<body>
    <div id="chart-container" style="width: 100%; height: 400px;"></div>
</body>
</html>

সারাংশ

Static ডেটা ব্যবহার করে Highcharts চার্ট তৈরি করা খুবই সহজ এবং কার্যকরী। GWT এবং Highcharts একত্রিত করার মাধ্যমে আপনি Static ডেটা ব্যবহার করে ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য চার্ট তৈরি করতে পারেন। JavaScriptOverlay ব্যবহার করে GWT অ্যাপ্লিকেশন থেকে Highcharts লাইব্রেরির ফাংশনালিটি অ্যাক্সেস করা হয় এবং Static ডেটা দিয়ে চার্ট তৈরি করা হয়।