Highcharts লাইব্রেরি ব্যবহার করে ডাইনামিক ডেটা প্রদর্শন করতে JavaScript বা JSON ফরম্যাটে ডেটা লোড করা সম্ভব। GWT এর মাধ্যমে আপনি JSON ডেটা বা JavaScript Object থেকে ডেটা লোড করে Highcharts চার্ট তৈরি করতে পারেন। GWT এর মাধ্যমে JavaScript Object বা JSON ডেটা পাঠানো এবং Highcharts এর সাথে ইন্টিগ্রেশন করা খুবই সহজ।
নিচে JSON/JavaScript Object থেকে ডেটা লোড করার পদ্ধতি বর্ণনা করা হলো:
১. JSON ডেটা তৈরি করা
প্রথমে, JSON ফরম্যাটে ডেটা তৈরি করতে হবে। আপনি যদি ডেটা সার্ভার থেকে লোড করতে চান তবে এটি AJAX এর মাধ্যমে আসবে, কিন্তু এখানে আমরা একটি সাধারণ JSON অবজেক্ট ব্যবহার করব যা GWT অ্যাপ্লিকেশন থেকে Highcharts এ পাস করা হবে।
এখানে একটি উদাহরণ দেওয়া হলো যেখানে JSON ডেটা একটি সিরিজ হিসেবে ব্যবহার করা হচ্ছে:
var chartData = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
series: [
{
name: 'Sales',
data: [5, 10, 15, 20, 25]
},
{
name: 'Profit',
data: [2, 4, 6, 8, 10]
}
]
};
এখানে chartData একটি JavaScript Object, যার মধ্যে রয়েছে categories এবং series। categories হলো X-অক্ষের জন্য, আর series হলো বিভিন্ন ডেটা সিরিজ।
২. GWT JSNI ব্যবহার করে Highcharts এ JSON ডেটা পাস করা
GWT এর মাধ্যমে Highcharts এ JSON ডেটা পাস করতে হলে, JSNI (JavaScript Native Interface) ব্যবহার করতে হবে। JSNI ব্যবহারের মাধ্যমে আপনি JavaScript কোডকে GWT অ্যাপ্লিকেশনে সংযুক্ত করতে পারবেন।
package com.mycompany.myproject.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.ui.RootPanel;
public class HighchartsExample implements EntryPoint {
// JSNI ফাংশন ব্যবহার করে Highcharts চার্ট তৈরি
public native void createChartWithJsonData(JavaScriptObject chartData) /*-{
$wnd.Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales and Profit over Time'
},
xAxis: {
categories: chartData.categories
},
yAxis: {
title: {
text: 'Value'
}
},
series: chartData.series
});
}-*/;
@Override
public void onModuleLoad() {
// JSON অবজেক্ট তৈরি করা
JavaScriptObject chartData = createChartData();
// Highcharts এ JSON ডেটা পাস করা
createChartWithJsonData(chartData);
}
// JSON ডেটা তৈরি করার জন্য একটি JavaScriptObject তৈরি করা
private native JavaScriptObject createChartData() /*-{
return {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
series: [
{
name: 'Sales',
data: [5, 10, 15, 20, 25]
},
{
name: 'Profit',
data: [2, 4, 6, 8, 10]
}
]
};
}-*/;
}
কোড ব্যাখ্যা:
createChartData()মেথড:- এই মেথডটি JSON ডেটা তৈরি করে এবং তা একটি
JavaScriptObjectহিসেবে ফেরত দেয়। GWT এরJavaScriptObjectটাইপ ব্যবহার করা হয় যাতে JavaScript Object GWT অ্যাপ্লিকেশনে পাঠানো যায়।
- এই মেথডটি JSON ডেটা তৈরি করে এবং তা একটি
createChartWithJsonData()মেথড:- এখানে JSNI ব্যবহার করে Highcharts এর
chart()ফাংশন কল করা হয়েছে।chartDataপ্যারামিটার হিসেবে JSON ডেটা পাঠানো হয়েছে, যাseriesএবংcategoriesনির্ধারণ করে।
- এখানে JSNI ব্যবহার করে Highcharts এর
onModuleLoad()মেথড:- GWT অ্যাপ্লিকেশনের
onModuleLoad()মেথডে প্রথমেcreateChartData()মেথড কল করা হয় এবং তারপর সেই JSON ডেটা Highcharts এরcreateChartWithJsonData()ফাংশনে পাঠানো হয়।
- GWT অ্যাপ্লিকেশনের
৩. HTML ফাইল তৈরি করা
Highcharts চার্ট রেন্ডার করার জন্য HTML ফাইল তৈরি করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো:
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<title>GWT Highcharts with JSON Data</title>
<script type="text/javascript" src="myproject.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto;"></div>
</body>
</html>
এখানে container ডিভটি হচ্ছে সেই জায়গা যেখানে Highcharts চার্টটি প্রদর্শিত হবে।
সারাংশ
এই উদাহরণে, GWT এবং Highcharts ব্যবহার করে JSON ডেটা থেকে ডাইনামিকভাবে চার্ট তৈরি করার প্রক্রিয়া বর্ণনা করা হয়েছে। GWT-এ JSNI (JavaScript Native Interface) ব্যবহার করে আপনি JSON বা JavaScript Object থেকে ডেটা লোড করতে পারেন এবং তা Highcharts এর chart() ফাংশনে পাঠিয়ে ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। এটি ওয়েব অ্যাপ্লিকেশন বা ড্যাশবোর্ডে ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকর ও ডায়নামিক করে তোলে।
Read more
