Highcharts লাইব্রেরি ব্যবহার করার জন্য কিছু প্রয়োজনীয় স্ক্রিপ্ট এবং লাইব্রেরি আপনার ওয়েব পেজে যুক্ত করতে হয়। যদি আপনি GWT (Google Web Toolkit) ব্যবহার করেন, তবে আপনাকে এই লাইব্রেরিগুলো GWT প্রজেক্টে সঠিকভাবে ইনটিগ্রেট করতে হবে। নিচে Highcharts এর জন্য প্রয়োজনীয় স্ক্রিপ্ট এবং লাইব্রেরি যোগ করার বিস্তারিত পদক্ষেপ দেওয়া হলো।
Highcharts লাইব্রেরি যুক্ত করা
Highcharts লাইব্রেরি যুক্ত করতে, আপনাকে প্রথমে Highcharts-এর JavaScript ফাইলটি আপনার HTML পেজে যোগ করতে হবে। সাধারণভাবে, Highcharts লাইব্রেরি দুইটি পদ্ধতিতে যোগ করা যায়:
1. CDN ব্যবহার করে
এটি সবচেয়ে সহজ উপায়। আপনি সরাসরি Highcharts লাইব্রেরিটি CDN (Content Delivery Network) থেকে লোড করতে পারেন।
<script src="https://code.highcharts.com/highcharts.js"></script>
এই স্ক্রিপ্টটি আপনার HTML ফাইলে <head> ট্যাগের মধ্যে বা <body> ট্যাগের শেষে যুক্ত করতে হবে। উদাহরণস্বরূপ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
2. লাইব্রেরি ডাউনলোড করে ব্যবহার করা
আপনি যদি CDN ব্যবহার করতে না চান, তবে Highcharts লাইব্রেরি আপনার কম্পিউটারে ডাউনলোড করে সেখান থেকে লোড করতে পারেন।
- Highcharts অফিসিয়াল ওয়েবসাইট থেকে লাইব্রেরি ডাউনলোড করুন।
- ডাউনলোড করা ফাইলটি আপনার প্রজেক্ট ফোল্ডারে রাখুন এবং HTML ফাইলে উল্লেখ করুন:
<script src="path/to/highcharts.js"></script>
এখানে "path/to/" আপনার ফাইলটির সঠিক পাথ হবে।
GWT প্রজেক্টে Highcharts ইনটিগ্রেশন
যেহেতু আপনি GWT ব্যবহার করছেন, আপনাকে Highcharts লাইব্রেরি GWT প্রজেক্টে ইনটিগ্রেট করতে হবে। GWT-তে JavaScript লাইব্রেরি ব্যবহার করতে হলে সাধারণত JSNI (JavaScript Native Interface) ব্যবহার করা হয়। নিচে GWT প্রজেক্টে Highcharts ইনটিগ্রেট করার একটি সাধারণ উদাহরণ দেওয়া হলো:
1. GWT প্রজেক্টে Highcharts JavaScript লাইব্রেরি যোগ করা
প্রথমে GWT প্রজেক্টে Highcharts লাইব্রেরি যোগ করতে হবে। আপনি GWT এর public ফোল্ডারে Highcharts লাইব্রেরিটি রাখতে পারেন এবং HTML ফাইলের মধ্যে সঠিকভাবে রেফারেন্স যোগ করতে হবে।
2. GWT-এ JavaScript কোড ব্যবহার (JSNI)
GWT-তে Highcharts ব্যবহার করার জন্য JavaScript কোডকে Java কোডের সাথে সংযুক্ত করতে হবে। GWT এর মাধ্যমে JSNI ব্যবহার করে আপনি JavaScript কোড লিখতে পারেন।
public class HighchartsExample {
// Highcharts JavaScript ফাংশন কল করা হচ্ছে
public native void createChart() /*-{
$wnd.Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
series: [{
name: 'Tokyo',
data: [7, 6, 9, 14, 18, 22]
}]
});
}-*/;
}
এখানে createChart ফাংশনটি Highcharts লাইব্রেরি ব্যবহার করে একটি লাইন চার্ট তৈরি করে, এবং JSNI মাধ্যমে JavaScript কোডটি GWT প্রজেক্টে সংযুক্ত করা হয়।
3. HTML ফাইলে Highcharts লাইব্রেরি এবং ডিভ যোগ করা
আপনি যে HTML ফাইলটিতে GWT অ্যাপ্লিকেশন ডিপ্লয় করবেন, সেখানে Highcharts স্ক্রিপ্ট এবং চার্ট প্রদর্শনের জন্য একটি div ট্যাগ যুক্ত করতে হবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts GWT Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<!-- GWT অ্যাপ্লিকেশন স্ক্রিপ্ট -->
<script type="text/javascript" src="your-gwt-app.js"></script>
</body>
</html>
সারাংশ
Highcharts ব্যবহার করতে হলে প্রথমে লাইব্রেরি যোগ করতে হয়, যা CDN অথবা লোকাল ফাইল থেকে করা যায়। GWT প্রজেক্টে Highcharts যোগ করার জন্য JavaScript কোড ব্যবহার করতে হয়, যা GWT-এর JSNI ফিচার দ্বারা Java কোডে অন্তর্ভুক্ত করা হয়। এইভাবে আপনি GWT প্রজেক্টে ইন্টারঅ্যাকটিভ এবং কাস্টমাইজেবল চার্ট সহজেই যুক্ত করতে পারেন।
Read more
