Highcharts ব্যবহার করার সময় Data Series এবং Data Format খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি নিশ্চিত করে যে ডেটা সঠিকভাবে প্রদর্শিত হচ্ছে এবং চার্টে রেন্ডার হচ্ছে। এখানে আমরা Data Series এবং Data Format সম্পর্কে বিস্তারিত আলোচনা করব।
Data Series
Data Series হলো সেই তথ্যের সংগ্রহ যা একটি চার্টে প্রদর্শিত হয়। প্রতিটি Series চার্টে আলাদা একটি ডেটা পয়েন্ট বা ভ্যালু প্রদর্শন করে। Highcharts এ, series একটি অ্যারে হিসেবে থাকে, যেখানে প্রতিটি সিরিজের জন্য ডেটা পয়েন্ট, নাম, রঙ, এবং অন্যান্য কাস্টমাইজেশন সেট করা হয়।
একটি Data Series তৈরি করার উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Data Series Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'বিক্রয় এবং লাভের তুলনা'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'মূল্য (Value)'
}
},
series: [{
name: 'বিক্রয়',
data: [10, 20, 30, 40, 50]
}, {
name: 'লাভ',
data: [5, 15, 25, 35, 45]
}]
});
</script>
</body>
</html>
উপরের কোডে দুটি Data Series তৈরি করা হয়েছে — একটি বিক্রয় (Sales) এবং আরেকটি লাভ (Profit)। এখানে দুটি সিরিজের জন্য আলাদা ডেটা পয়েন্ট এবং নাম দেওয়া হয়েছে।
Data Format
Data Format Highcharts এ ডেটার উপস্থাপনা এবং বিন্যাসের জন্য ব্যবহৃত হয়। Highcharts সাধারণত ডেটা JSON, CSV, XML, বা JavaScript অ্যারে এর মাধ্যমে গ্রহণ করে। সবচেয়ে সাধারণ ফরম্যাট হলো JSON, যা JavaScript অ্যাপ্লিকেশনের সাথে সহজে ইন্টিগ্রেট করা যায়।
JSON ফরম্যাটে Data Example:
{
"chart": {
"type": "line"
},
"title": {
"text": "বিক্রয় ডেটা"
},
"xAxis": {
"categories": ["Jan", "Feb", "Mar", "Apr", "May"]
},
"yAxis": {
"title": {
"text": "বিক্রয় (Sales)"
}
},
"series": [{
"name": "বিক্রয়",
"data": [10, 20, 30, 40, 50]
}]
}
এই JSON ডেটা ফরম্যাটে xAxis এবং yAxis এর কনফিগারেশন, পাশাপাশি series ডেটা উল্লেখ করা হয়েছে। JSON ফরম্যাটে ডেটা পাঠানো বা গ্রহণ করা অত্যন্ত সহজ।
CSV ফরম্যাটে Data Example:
Highcharts এছাড়াও CSV ফরম্যাটে ডেটা গ্রহণ করতে পারে। একটি সাধারণ CSV ফাইল দেখতে এরকম হতে পারে:
Month, Sales
Jan, 10
Feb, 20
Mar, 30
Apr, 40
May, 50
এই CSV ফাইলটি Highcharts এ CSV-to-Chart ফিচারের মাধ্যমে সহজেই রূপান্তরিত হতে পারে।
Data Series এর কাস্টমাইজেশন
Highcharts এর Data Series কাস্টমাইজ করার জন্য আরও অনেক অপশন উপলব্ধ। কিছু গুরুত্বপূর্ণ কাস্টমাইজেশন হলো:
নাম (name)
প্রতিটি series এর জন্য একটি name নির্ধারণ করা যেতে পারে, যা চার্টে প্রদর্শিত হয়।
রঙ (color)
আপনি প্রতিটি series এর জন্য আলাদা রঙ নির্ধারণ করতে পারেন।
ডেটা পয়েন্ট (data points)
প্রতিটি series এর data একটি অ্যারে হিসেবে থাকতে পারে, যা ডেটা পয়েন্টগুলি ধারণ করে।
স্টাইল (styles)
আপনি line style, markers, dashed lines ইত্যাদি কাস্টমাইজ করতে পারেন।
উপসংহার
Data Series এবং Data Format Highcharts এ চার্ট তৈরির মূল অংশ। Data Series এর মাধ্যমে আপনি ডেটাকে পৃথক পৃথক সিরিজে ভাগ করতে পারেন, এবং Data Format এর মাধ্যমে সঠিক ডেটা বিন্যাস নিশ্চিত করতে পারেন। JSON, CSV, এবং JavaScript অ্যারে ব্যবহার করে ডেটা প্রদান করা যায়, যা Highcharts এর সাথে সহজে ইন্টিগ্রেট করা যায়।
ডেটা সিরিজ (Data Series) হলো একটি Highcharts চার্টের একটি গুরুত্বপূর্ণ উপাদান যা চার্টে প্রদর্শিত ডেটা পয়েন্টগুলিকে একত্রিত করে। প্রতিটি সিরিজ একটি নির্দিষ্ট ডেটার সেটকে উপস্থাপন করে, যা একাধিক ডেটা পয়েন্টের মধ্যে সম্পর্ক বা পরিবর্তন প্রদর্শন করে। সাধারণত, একাধিক সিরিজ একটি চার্টে একইসাথে প্রদর্শিত হতে পারে, যা বিভিন্ন ভেরিয়েবল বা ডেটা ক্যাটাগরি তুলনা করতে সহায়ক।
Data Series কী?
ডেটা সিরিজের মূল ধারণা
ডেটা সিরিজ হল একটি ডেটার একটুকু বা একটি ভেরিয়েবল যা চার্টে একটি গ্রাফের মাধ্যমে প্রদর্শিত হয়। Highcharts এ একটি সিরিজ সাধারণত একটি তালিকা হিসেবে থাকে, যেখানে প্রতিটি ডেটা পয়েন্ট একটি নির্দিষ্ট মান (Value) এবং সম্ভবত একটি সম্পর্কিত ক্যাটাগরি (Category) থাকে।
যেমন, যদি আপনি একটি লাইনের চার্ট (Line Chart) তৈরি করেন, তাহলে একে একাধিক ডেটা সিরিজ ব্যবহার করে বিভিন্ন ভেরিয়েবলের মানকে তুলনা করতে পারেন, যেমন এক্স এবং ওয়াই এর সম্পর্ক।
Data Series কিভাবে কাজ করে?
১. সিরিজের উপাদান
প্রতিটি ডেটা সিরিজ একটি নাম, ডেটা পয়েন্টের তালিকা এবং কিছু কাস্টমাইজেশন বিকল্পের মাধ্যমে সংজ্ঞায়িত হয়। এটি মূলত name, data, color, lineWidth ইত্যাদি বৈশিষ্ট্য দ্বারা কনফিগার করা হয়।
উদাহরণস্বরূপ:
series: [{
name: 'সিরিজ ১',
data: [10, 20, 30, 40, 50]
}]
এখানে name সিরিজের নাম (যেমন ‘সিরিজ ১’), এবং data একটি অ্যারে যা সিরিজের মান (10, 20, 30, 40, 50) ধারণ করে।
২. একাধিক সিরিজ
Highcharts একাধিক সিরিজ একসাথে প্রদর্শন করতে পারে। উদাহরণস্বরূপ, আপনি দুটি বা তার বেশি সিরিজ তৈরি করতে পারেন, যা একসাথে একই চার্টে দেখাবে। এটি তুলনা বা সম্পর্ক বিশ্লেষণ করতে সহায়ক।
series: [{
name: 'সিরিজ ১',
data: [10, 20, 30, 40, 50]
}, {
name: 'সিরিজ ২',
data: [15, 25, 35, 45, 55]
}]
এখানে দুটি সিরিজ একসাথে চার্টে প্রদর্শিত হবে, যেখানে একটির ডেটা পয়েন্টের মান কিছুটা ভিন্ন হবে অন্যটির তুলনায়।
৩. কাস্টমাইজেশন
প্রতিটি সিরিজের জন্য আপনি বিভিন্ন কাস্টমাইজেশন বিকল্প ব্যবহার করতে পারেন, যেমন রঙ, লাইন স্টাইল, মার্কার, এবং আরো অনেক কিছু। উদাহরণস্বরূপ:
series: [{
name: 'সিরিজ ১',
data: [10, 20, 30, 40, 50],
color: '#FF5733',
lineWidth: 3
}]
এখানে color সিরিজের লাইন রঙ নির্ধারণ করে এবং lineWidth সিরিজের লাইনটির প্রস্থ নির্ধারণ করে।
Data Series এর ব্যবহার
ডেটা তুলনা
যখন একাধিক সিরিজ থাকে, তখন আপনি সহজে বিভিন্ন ডেটা সেটের মধ্যে তুলনা করতে পারবেন। উদাহরণস্বরূপ, আপনি একাধিক দেশের বিক্রয় ডেটার মধ্যে তুলনা করতে পারেন বা বিভিন্ন বছরের মধ্যে ফলাফলের পার্থক্য দেখতে পারেন।
ভিজ্যুয়াল ডেটা উপস্থাপনা
Data Series ব্যবহার করে আপনি আপনার ডেটাকে ভিজ্যুয়ালভাবে উপস্থাপন করতে পারেন, যাতে ব্যবহারকারীরা সহজেই ডেটার মুদ্রণ (Trends), পার্থক্য এবং সম্পর্ক দেখতে পায়।
Data Series এর উদাহরণ
এখানে একটি Highcharts চার্টের উদাহরণ দেওয়া হল যেখানে দুটি ডেটা সিরিজ রয়েছে:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Data Series Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line' // চার্ট টাইপ
},
title: {
text: 'বিক্রয় তুলনা' // চার্টের শিরোনাম
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] // এক্স-অ্যাক্সিস ক্যাটাগরি
},
yAxis: {
title: {
text: 'বিক্রয় (Sales)' // ওয়াই-অ্যাক্সিস শিরোনাম
}
},
series: [{
name: 'বিক্রয় ১',
data: [10, 20, 30, 40, 50],
color: '#FF5733'
}, {
name: 'বিক্রয় ২',
data: [15, 25, 35, 45, 55],
color: '#33FF57'
}]
});
</script>
</body>
</html>
এই উদাহরণে দুটি সিরিজ রয়েছে, যেখানে দুটি ভিন্ন রঙে বিক্রয়ের ডেটা তুলনা করা হয়েছে।
উপসংহার
Data Series Highcharts এর একটি গুরুত্বপূর্ণ উপাদান যা চার্টে ডেটার একটি নির্দিষ্ট সেটকে উপস্থাপন করে। এটি একাধিক ডেটা সিরিজের মাধ্যমে সহজে বিভিন্ন ভেরিয়েবল বা ডেটার মধ্যে তুলনা এবং সম্পর্ক বিশ্লেষণ করতে সাহায্য করে। Highcharts এর মাধ্যমে Data Series কাস্টমাইজ এবং কনফিগার করা যায়, যা ডেটা ভিজুয়ালাইজেশন এবং বিশ্লেষণকে আরও কার্যকর করে তোলে।
Highcharts এ Single Data Series এবং Multiple Data Series যোগ করা খুবই সহজ। একটি Single Data Series হল এক ধরনের ডেটা প্রদর্শন, যেমন একটি মাত্র বিক্রয় বা পরিসংখ্যান। অপরদিকে, Multiple Data Series হল একাধিক ভিন্ন ভিন্ন ডেটা প্রদর্শন, যা বিভিন্ন ক্যাটাগরি বা ভিন্ন ভিন্ন ডেটা পয়েন্টের তুলনা প্রদর্শন করতে ব্যবহৃত হয়।
Single Data Series যোগ করা
একটি Single Data Series তৈরি করতে, আপনাকে শুধুমাত্র একটি series অ্যারের মধ্যে একটি একক ডেটা প্রদান করতে হবে। এটি সাধারণত এক ধরনের ডেটা বা একটি মাত্র ট্র্যাকিং প্রদান করতে ব্যবহৃত হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Single Data Series</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line' // Line chart টাইপ নির্বাচন
},
title: {
text: 'Single Data Series - Sales'
},
xAxis: {
categories: ['জানুয়ারি', 'ফেব্রুয়ারি', 'মার্চ', 'এপ্রিল', 'মে']
},
yAxis: {
title: {
text: 'বিক্রয় (Sales)'
}
},
series: [{
name: 'বিক্রয়',
data: [10, 20, 30, 40, 50] // একক Data Series
}]
});
</script>
</body>
</html>
এখানে, একটি সাধারণ Single Data Series তৈরি করা হয়েছে, যেখানে বিক্রয় ডেটা প্রদর্শিত হচ্ছে।
Multiple Data Series যোগ করা
Multiple Data Series যোগ করতে, আপনাকে series অ্যারে মধ্যে একাধিক ডেটা অ্যারে প্রদান করতে হবে। এর মাধ্যমে আপনি একাধিক ডেটা সেট এক সাথে প্রদর্শন করতে পারেন এবং বিভিন্ন সিরিজের মধ্যে তুলনা করতে পারবেন।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Multiple Data Series</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line' // Line chart টাইপ নির্বাচন
},
title: {
text: 'Multiple Data Series - Sales and Expenses'
},
xAxis: {
categories: ['জানুয়ারি', 'ফেব্রুয়ারি', 'মার্চ', 'এপ্রিল', 'মে']
},
yAxis: {
title: {
text: 'মূল্য (Value)'
}
},
series: [{
name: 'বিক্রয়',
data: [10, 20, 30, 40, 50]
}, {
name: 'ব্যয়',
data: [5, 15, 25, 35, 45]
}]
});
</script>
</body>
</html>
এই উদাহরণে দুটি Data Series প্রদর্শিত হয়েছে: একটি বিক্রয় এবং অন্যটি ব্যয় ডেটা। আপনি এই ডেটাগুলোর মধ্যে তুলনা করতে পারেন।
Multiple Data Series এর সুবিধা
1. তুলনামূলক বিশ্লেষণ
Multiple Data Series আপনাকে একাধিক ডেটা সেটের মধ্যে তুলনা করতে সহায়ক। উদাহরণস্বরূপ, বিক্রয় এবং ব্যয়ের তুলনা বা বিভিন্ন প্রোডাক্টের পারফরম্যান্স একসাথে দেখানো।
2. ভিজুয়াল বিশ্লেষণ
একাধিক ডেটা সিরিজ আপনাকে ভিজুয়ালভাবে পার্থক্য বা প্রবণতা বোঝাতে সাহায্য করে। উদাহরণস্বরূপ, আপনি দেখতে পারবেন কিভাবে বিক্রয় এবং ব্যয়ের পরিবর্তন ঘটে।
উপসংহার
Single Data Series এবং Multiple Data Series Highcharts এ সহজেই যোগ করা যায় এবং এটি ডেটার তুলনা বা বিশ্লেষণে সহায়ক। Single Data Series সাধারণত একটি মাত্র ডেটা প্রদর্শন করতে ব্যবহৃত হয়, যেখানে Multiple Data Series একাধিক ডেটা পয়েন্টের তুলনা প্রদর্শনের জন্য উপযুক্ত। Highcharts এর মাধ্যমে এই সিরিজগুলো খুব সহজে এবং ইন্টারঅ্যাকটিভভাবে তৈরি করা যায়।
Highcharts ব্যবহার করার সময় ডেটা ফরম্যাট হিসেবে বেশ কয়েকটি বিকল্প পাওয়া যায়, যার মধ্যে Arrays, JSON, এবং CSV অন্যতম। এই ডেটা ফরম্যাটগুলো ব্যবহার করে আপনি আপনার চার্টের জন্য ডেটা সরবরাহ করতে পারেন। প্রতিটি ফরম্যাটের সুবিধা ও ব্যবহার কিভাবে হয়, তা নিচে বিস্তারিতভাবে আলোচনা করা হলো।
Arrays ডেটা ফরম্যাট
Arrays হল একটি সোজা এবং সহজ ডেটা ফরম্যাট, যা সরাসরি Highcharts এ ব্যবহার করা যায়। এখানে একটি সাধারণ Array ব্যবহার করে লাইন চার্ট তৈরি করা হয়েছে:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Arrays Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'সপ্তাহের বিক্রির ডেটা'
},
xAxis: {
categories: ['সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতিবার', 'শুক্রবার', 'শনিবার', 'রবিবার']
},
series: [{
name: 'বিক্রি',
data: [10, 20, 30, 40, 50, 60, 70]
}]
});
</script>
</body>
</html>
এখানে data এর মান একটি Array হিসেবে প্রদান করা হয়েছে। এই ফরম্যাটটি সহজ এবং দ্রুত ব্যবহারযোগ্য।
JSON ডেটা ফরম্যাট
JSON (JavaScript Object Notation) একটি জনপ্রিয় এবং আরও স্ট্রাকচারড ডেটা ফরম্যাট, যা সাধারণত API বা সার্ভার থেকে ডেটা সংগ্রহ করার সময় ব্যবহৃত হয়। Highcharts-এ JSON ব্যবহার করার সুবিধা হল, এটি বড় ডেটাসেট এবং ভিন্ন ভিন্ন ডেটা পয়েন্টের জন্য আরও উপযুক্ত। নিচে একটি JSON ডেটা ব্যবহার করে লাইন চার্ট তৈরির উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts JSON Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
var chartData = {
chart: {
type: 'line'
},
title: {
text: 'মাসিক বিক্রির ডেটা'
},
xAxis: {
categories: ['জানু', 'ফেব্রু', 'মার্চ', 'এপ্রিল', 'মে', 'জুন']
},
series: [{
name: 'বিক্রি',
data: [45, 50, 60, 70, 80, 90]
}]
};
Highcharts.chart('container', chartData);
</script>
</body>
</html>
এখানে chartData একটি JSON অবজেক্ট হিসেবে ডেটা সংরক্ষণ করা হয়েছে, যা আরও গঠনমূলক এবং স্কেলেবেল। এটি বড় বা ডাইনামিক ডেটা সেটের জন্য উপযুক্ত।
CSV ডেটা ফরম্যাট
CSV (Comma-Separated Values) ফরম্যাটটি সাধারণত স্প্রেডশিট সফটওয়্যার থেকে ডেটা রপ্তানি করার জন্য ব্যবহৃত হয়। Highcharts এ CSV ডেটা ব্যবহার করে ডেটা পয়েন্টগুলো চার্টে রেন্ডার করা যায়। নিচে একটি CSV ডেটা ফরম্যাট ব্যবহার করে কলাম চার্ট তৈরির উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts CSV Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
var csvData = `Month,Sales
January,45
February,50
March,60
April,70
May,80
June,90`;
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'মাসিক বিক্রির পরিসংখ্যান'
},
data: {
csv: csvData
}
});
</script>
</body>
</html>
এখানে CSV ডেটা একটি স্ট্রিং আকারে প্রদান করা হয়েছে, যা Highcharts এর data.csv অপশনের মাধ্যমে লোড করা হয়েছে। CSV ফরম্যাট বড় ডেটা সেটের জন্য সহজে ব্যবহৃত হতে পারে, যেমন এক্সেল ফাইল থেকে ডেটা সরাসরি লোড করা।
কোন ডেটা ফরম্যাট ব্যবহার করবেন?
Arrays
- সাধারণ বা ছোট ডেটা এর জন্য উপযুক্ত।
- দ্রুত সেটআপ এবং সহজ সমন্বয়।
- ছোট পরিসরের ডেটা এক্সচেঞ্জের জন্য আদর্শ।
JSON
- বড় ডেটাসেট এবং ডাইনামিক ডেটা ফরম্যাটের জন্য আদর্শ।
- API বা সার্ভারের সাথে ইন্টিগ্রেশন করার জন্য সহজ।
- ডেটার বিভিন্ন অংশ এবং গঠন পরিষ্কারভাবে প্রকাশ করা সম্ভব।
CSV
- স্প্রেডশিট বা টেবিল ডেটা থেকে রপ্তানি বা ইম্পোর্টের জন্য উপযুক্ত।
- বড় ডেটাসেট বা এক্সেল ফাইল থেকে সরাসরি ডেটা পাঠাতে সহজ।
- সহজে এক্সপোর্ট এবং ইম্পোর্ট করা সম্ভব।
উপসংহার
Highcharts এ Arrays, JSON, এবং CSV ডেটা ফরম্যাটের মাধ্যমে আপনি সহজেই ডেটা প্রেরণ এবং চার্ট তৈরি করতে পারেন। যেকোনো ফরম্যাট ব্যবহার করা আপনার ডেটার আকার, কাঠামো এবং আপনি কোথায় ডেটা সংরক্ষণ করছেন তার উপর নির্ভর করে। JSON সাধারণত বড় বা ডাইনামিক ডেটাসেটের জন্য বেশি উপযুক্ত, আর CSV ফরম্যাট স্প্রেডশিট বা এক্সেল ডেটা এক্সচেঞ্জের জন্য সহজ।
Highcharts লাইব্রেরি একটি অত্যন্ত শক্তিশালী টুল, যা ইন্টারঅ্যাকটিভ এবং ডায়নামিক চার্ট তৈরিতে ব্যবহৃত হয়। মাঝে মাঝে আমাদের প্রয়োজন হয় ডায়নামিক ডেটা আপডেট করতে, অর্থাৎ চার্টে প্রদর্শিত ডেটা পরিবর্তন হতে থাকে। Highcharts এই ধরনের ডেটা আপডেটের জন্য বেশ কিছু টেকনিক প্রদান করে। চলুন, এখানে কিছু সাধারণ টেকনিক নিয়ে আলোচনা করি যা আপনাকে Highcharts-এ ডাইনামিক ডেটা সিরিজ আপডেট করতে সহায়ক হবে।
১. setData() মেথড ব্যবহার করে ডেটা আপডেট
Highcharts এ সবচেয়ে সাধারণ এবং সহজ পদ্ধতি হলো setData() মেথড ব্যবহার করা। এই মেথড ব্যবহার করে আপনি সরাসরি সিরিজের ডেটা পরিবর্তন করতে পারেন এবং চার্টটিকে রেন্ডার করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Dynamic Data Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'ডাইনামিক ডেটা আপডেট উদাহরণ'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// ৫ সেকেন্ড পর ডেটা আপডেট করা হবে
setInterval(function() {
var newData = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100];
chart.series[0].setData(newData);
}, 5000);
</script>
</body>
</html>
এখানে, ৫ সেকেন্ড পর পর setData() মেথড ব্যবহার করে সিরিজের ডেটা আপডেট করা হচ্ছে। এতে করে Sales সিরিজের ডেটা প্রতি ৫ সেকেন্ডে পরিবর্তিত হবে এবং চার্ট তা আপডেট করবে।
২. addPoint() মেথড ব্যবহার করে নতুন পয়েন্ট যোগ করা
কিছু ক্ষেত্রে আপনি নতুন পয়েন্ট যোগ করতে চাইবেন, তবে setData() এর পরিবর্তে addPoint() মেথড ব্যবহার করতে পারেন। এই মেথডটি নির্দিষ্ট সিরিজে নতুন ডেটা পয়েন্ট যোগ করতে ব্যবহৃত হয় এবং ডেটার এক্সিস্টিং পয়েন্টগুলো অপরিবর্তিত থাকে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Dynamic Data Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'নতুন পয়েন্ট যোগ করা'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// ৩ সেকেন্ড পর একটি নতুন পয়েন্ট যোগ করা হবে
setInterval(function() {
var newPoint = Math.random() * 100;
chart.series[0].addPoint(newPoint);
}, 3000);
</script>
</body>
</html>
এখানে, প্রতি ৩ সেকেন্ড পর একটি নতুন পয়েন্ট addPoint() মেথডের মাধ্যমে সিরিজে যোগ করা হচ্ছে। এটি চার্টের ডেটাকে ক্রমাগত সম্প্রসারিত করে।
৩. update() মেথড ব্যবহার করে সিরিজ কাস্টমাইজ করা
update() মেথডের মাধ্যমে আপনি পুরো সিরিজের ডেটা কাস্টমাইজ করতে পারেন, যেমন সিরিজের টাইপ, রঙ, বা টাইটেল পরিবর্তন করা। এটি মূলত সিরিজের প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Series Update Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'সিরিজ কাস্টমাইজেশন'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// ৪ সেকেন্ড পর সিরিজের টাইপ এবং ডেটা আপডেট করা হবে
setInterval(function() {
chart.series[0].update({
type: 'column', // চার্টের টাইপ পরিবর্তন
data: [15, 25, 35, 45, 55] // নতুন ডেটা
});
}, 4000);
</script>
</body>
</html>
এখানে, প্রতি ৪ সেকেন্ড পর সিরিজের টাইপ পরিবর্তন করা হচ্ছে (লাইন থেকে কলাম চার্টে) এবং ডেটাও আপডেট করা হচ্ছে।
৪. removePoint() মেথড ব্যবহার করে পয়েন্ট মুছে ফেলা
আপনি যদি চান যে ডেটা সিরিজের থেকে কিছু পয়েন্ট মুছে ফেলা হোক, তবে removePoint() মেথড ব্যবহার করতে পারেন। এটি নির্দিষ্ট পয়েন্ট মুছে ফেলার জন্য ব্যবহৃত হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Remove Point Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'পয়েন্ট মুছে ফেলা'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// ২ সেকেন্ড পর প্রথম পয়েন্ট মুছে ফেলা হবে
setInterval(function() {
chart.series[0].removePoint(0);
}, 2000);
</script>
</body>
</html>
এখানে প্রতি ২ সেকেন্ড পর প্রথম পয়েন্ট removePoint() মেথডের মাধ্যমে মুছে ফেলা হচ্ছে।
উপসংহার
Highcharts ডায়নামিক ডেটা আপডেটের জন্য বেশ কয়েকটি কার্যকরী টেকনিক প্রদান করে। setData(), addPoint(), update(), এবং removePoint() মেথডগুলি আপনাকে ডেটা সিরিজকে পরিবর্তন, সম্প্রসারণ বা মুছে ফেলার সুযোগ দেয়, যাতে চার্টটি বাস্তব সময়ে আপডেট হতে থাকে। এই টেকনিকগুলো বিভিন্ন প্রকারের ডেটা ভিজুয়ালাইজেশন কাজের জন্য অত্যন্ত সহায়ক।
Read more
