Highcharts লাইব্রেরি ব্যবহার করে সহজে বিভিন্ন ধরনের বেসিক চার্ট তৈরি করা যায়। এই চার্টগুলি আপনাকে ডেটাকে ভিজ্যুয়ালি উপস্থাপন করতে সাহায্য করে। এখানে আমরা কিভাবে সাধারণ লাইন চার্ট (Line Chart), বার চার্ট (Bar Chart) এবং পাই চার্ট (Pie Chart) তৈরি করতে পারি, তা দেখব।
Highcharts এর মাধ্যমে Basic Charts তৈরি করা
লাইন চার্ট (Line Chart)
লাইন চার্ট (Line Chart) ডেটার ট্রেন্ড বা প্রবণতা দেখাতে ব্যবহৃত হয়, যেখানে x-axis (অক্ষ) সময় বা ক্যাটাগরি নির্দেশ করে এবং y-axis (অক্ষ) মান প্রদর্শন করে।
লাইন চার্ট তৈরি করার উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Line Chart 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]
}]
});
</script>
</body>
</html>
এই কোডে একটি লাইন চার্ট তৈরি করা হয়েছে যা বিক্রয় (Sales) এর ট্রেন্ড প্রদর্শন করছে। x-axis এ মাসগুলি এবং y-axis এ বিক্রয় পরিমাণ দেখা যাবে।
বার চার্ট (Bar Chart)
বার চার্ট (Bar Chart) তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এই চার্টে, প্রতিটি বার একটি ক্যাটাগরি বা ডেটা পয়েন্টের প্রতিনিধিত্ব করে এবং এটি ডেটার তুলনা সহজ করে।
বার চার্ট তৈরি করার উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Bar Chart 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: 'bar'
},
title: {
text: 'বিক্রয়ের তুলনা'
},
xAxis: {
categories: ['Product A', 'Product B', 'Product C', 'Product D']
},
yAxis: {
title: {
text: 'বিক্রয় পরিমাণ'
}
},
series: [{
name: 'বিক্রয়',
data: [150, 200, 250, 300]
}]
});
</script>
</body>
</html>
এখানে একটি বার চার্ট তৈরি করা হয়েছে যা চারটি পণ্য বিক্রয়ের তুলনা প্রদর্শন করছে।
পাই চার্ট (Pie Chart)
পাই চার্ট (Pie Chart) প্রায়ই ব্যবহার করা হয় ডেটার বিভিন্ন অংশের অনুপাত বা শতাংশ দেখাতে। এটি একটি সম্পূর্ণ বৃত্তের মধ্যে ভাগ করা অংশগুলির মাধ্যমে ডেটা উপস্থাপন করে।
পাই চার্ট তৈরি করার উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Pie Chart 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: 'pie'
},
title: {
text: 'পণ্যের বাজার শেয়ার'
},
series: [{
name: 'বাজার শেয়ার',
data: [
['Product A', 45],
['Product B', 25],
['Product C', 20],
['Product D', 10]
]
}]
});
</script>
</body>
</html>
এই কোডের মাধ্যমে একটি পাই চার্ট তৈরি হয়েছে যা বিভিন্ন পণ্যের বাজার শেয়ার প্রদর্শন করছে।
উপসংহার
Highcharts ব্যবহার করে সহজেই বিভিন্ন ধরনের বেসিক চার্ট তৈরি করা যায়। আপনি লাইন চার্ট, বার চার্ট, এবং পাই চার্ট এর মাধ্যমে ডেটার ভিজুয়ালাইজেশন করতে পারেন, যা ডেটা বিশ্লেষণে সহায়ক। Highcharts এর ব্যবহার খুবই সহজ এবং কাস্টমাইজেশন অপশনগুলি আপনাকে আরও অনেক উন্নত চার্ট তৈরি করার সুযোগ দেয়।
লাইন চার্ট (Line Chart) হলো এমন একটি চার্ট যা সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা (Trend) দেখাতে ব্যবহৃত হয়। এটি ডেটার ধারাবাহিকতা বা প্রবণতাকে প্রদর্শন করার জন্য একটি গ্রাফে পয়েন্টগুলিকে একসাথে যুক্ত করে একটি সোজা রেখা তৈরি করে। Highcharts ব্যবহার করে সহজেই লাইন চার্ট তৈরি করা যায়, যা ব্যবসায়িক বিশ্লেষণ, গবেষণা, এবং অন্যান্য ক্ষেত্রে ব্যবহৃত হয়।
লাইন চার্ট কী এবং কেন ব্যবহার করা হয়?
সময়ের সাথে পরিবর্তন প্রদর্শন
লাইন চার্ট প্রধানত সময়ের সাথে বিভিন্ন ধরনের ডেটার পরিবর্তন বা প্রবণতা দেখানোর জন্য ব্যবহৃত হয়। এটি যেমন মাসের বিক্রয়, তিন মাসের তাপমাত্রা রেকর্ড, অথবা ডিএজির মূল্য পরিবর্তন ইত্যাদি প্রদর্শন করতে ব্যবহার করা হয়।
ডেটার সম্পর্ক বিশ্লেষণ
লাইন চার্ট বিভিন্ন ডেটাসেটের মধ্যে সম্পর্ক দেখাতে সাহায্য করে, যেমন একাধিক ভেরিয়েবল বা সময়সীমার মধ্যে তুলনা। এটি দুটি বা তার বেশি সিরিজের তথ্যের মধ্যে সম্পর্ক সহজে উপলব্ধি করতে সাহায্য করে।
সহজে পাঠযোগ্য
লাইন চার্টের একটি বড় সুবিধা হলো এটি অত্যন্ত পরিষ্কার এবং সহজে পাঠযোগ্য। এটি ব্যবহারকারীদের সময়সীমার মধ্যে ডেটার যে কোনো ওঠানামা বা পরিবর্তন স্পষ্টভাবে দেখাতে সক্ষম।
Highcharts এর মাধ্যমে লাইন চার্ট তৈরি করা
Highcharts ব্যবহার করে লাইন চার্ট তৈরি করা খুবই সহজ। নিচে একটি সাধারণ লাইন চার্টের কোড উদাহরণ দেওয়া হল:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Line Chart 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] // ডেটা পয়েন্টগুলি
}]
});
</script>
</body>
</html>
উপরের কোডে একটি লাইন চার্ট তৈরি করা হয়েছে, যেখানে মাসিক বিক্রয়ের তথ্য প্রদর্শিত হচ্ছে।
লাইন চার্টের বৈশিষ্ট্য
প্রবণতা বিশ্লেষণ
লাইন চার্ট সহজেই ডেটার প্রবণতা বিশ্লেষণ করতে সহায়ক। এটি দীর্ঘ সময়কালের ডেটা বিশ্লেষণ করতে খুবই কার্যকর, যেমন বিক্রয় বা মুনাফার দীর্ঘমেয়াদী পরিবর্তন।
ডেটার তুলনা
একাধিক লাইন একসাথে প্রদর্শন করলে, লাইন চার্টের মাধ্যমে বিভিন্ন ভেরিয়েবলের মধ্যে সম্পর্ক বা তুলনা করা যায়। উদাহরণস্বরূপ, আপনি একাধিক অঞ্চলের বিক্রয় একসাথে তুলনা করতে পারেন।
পরিষ্কার এবং সহজ
লাইন চার্টের ডিজাইন সাধারণত পরিষ্কার এবং সহজে বোঝা যায়। এটি কোনো অতিরিক্ত জটিলতা ছাড়াই ডেটা বিশ্লেষণ এবং তুলনা করা সম্ভব করে তোলে।
কাস্টমাইজেশন সুবিধা
Highcharts এর মাধ্যমে আপনি লাইন চার্টের রঙ, লাইন স্টাইল, টুলটিপ এবং অন্যান্য কাস্টমাইজেশন অপশন খুব সহজেই পরিবর্তন করতে পারেন, যা চার্টটিকে আরও উপযোগী এবং আকর্ষণীয় করে তোলে।
উপসংহার
লাইন চার্ট Highcharts এর একটি অন্যতম জনপ্রিয় চার্ট টাইপ, যা সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা দেখাতে সাহায্য করে। এর সাহায্যে সহজে ডেটার বিশ্লেষণ এবং তুলনা করা যায়, বিশেষ করে যখন ডেটার একটি ধারাবাহিক প্রবণতা বা পরিবর্তন তুলে ধরা প্রয়োজন। Highcharts লাইব্রেরি ব্যবহার করে লাইন চার্ট তৈরি করা সহজ এবং কাস্টমাইজেশন করা যায়, যা ডেটা বিশ্লেষণের কাজকে আরো কার্যকর করে তোলে।
Highcharts ব্যবহার করে Column এবং Bar চার্ট তৈরি করা অত্যন্ত সহজ এবং ইন্টারঅ্যাকটিভ। এই ধরনের চার্ট ডেটার তুলনা করার জন্য উপযুক্ত, যেখানে Column Chart সাধারণত ভার্টিকাল বার (উল্লম্ব বার) এবং Bar Chart সাধারণত হরাইজেন্টাল বার (অবনমন বার) প্রদর্শন করে।
Column Chart তৈরি করা
Column Chart ব্যবহারকারীদের সময় বা বিভিন্ন ক্যাটাগরি অনুযায়ী ডেটার তুলনা করতে সহায়ক। এটি মূলত ভার্টিকাল বার আকারে ডেটা প্রদর্শন করে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Column Chart</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: 'column' // Column chart টাইপ নির্বাচন
},
title: {
text: 'সেলস ডেটা - Column Chart'
},
xAxis: {
categories: ['জানুয়ারি', 'ফেব্রুয়ারি', 'মার্চ', 'এপ্রিল', 'মে']
},
yAxis: {
title: {
text: 'বিক্রয় (Sales)'
}
},
series: [{
name: 'বিক্রয়',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এই উদাহরণে, একটি সাধারণ Column Chart তৈরি করা হয়েছে যেখানে সেলস ডেটা প্রদর্শিত হচ্ছে।
Bar Chart তৈরি করা
Bar Chart একটি হরাইজেন্টাল চার্ট যা ডেটার তুলনা বা পার্থক্য বোঝাতে খুব উপকারী। এটি সাধারণত বর্ননা বা কেটাগরি অনুযায়ী তুলনা দেখানোর জন্য ব্যবহৃত হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Bar Chart</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: 'bar' // Bar chart টাইপ নির্বাচন
},
title: {
text: 'বিক্রয় ডেটা - Bar Chart'
},
xAxis: {
categories: ['জানুয়ারি', 'ফেব্রুয়ারি', 'মার্চ', 'এপ্রিল', 'মে']
},
yAxis: {
title: {
text: 'বিক্রয় (Sales)'
}
},
series: [{
name: 'বিক্রয়',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, Bar Chart ব্যবহার করে সেলস ডেটা হরাইজেন্টালি প্রদর্শন করা হয়েছে।
Column এবং Bar Charts এর মধ্যে পার্থক্য
- Column Chart: ডেটা সাধারণত উল্লম্ব বার (Vertical Bars) আকারে প্রদর্শিত হয়। এটি যখন সময়ের সাথে পরিবর্তন বা কোন ক্যাটাগরির মধ্যে তুলনা করতে হয়, তখন ব্যবহার করা হয়।
- Bar Chart: ডেটা হরাইজেন্টাল বার (Horizontal Bars) আকারে প্রদর্শিত হয়। এটি তখন উপযোগী যখন তুলনা করার জন্য ক্যাটাগরির নাম বা অন্যান্য মান বড় থাকে এবং Column Chart এর তুলনায় স্পেসের জন্য বেশি জায়গা প্রয়োজন।
উপসংহার
Highcharts এর মাধ্যমে Column এবং Bar Charts তৈরি করা অত্যন্ত সহজ এবং সাশ্রয়ী। এই চার্টগুলো ডেটার তুলনা বা পার্থক্য চিত্রায়িত করতে সহায়ক এবং ব্যবহারকারী-বান্ধব। ভার্টিকাল এবং হরাইজেন্টাল আকারে ডেটা প্রদর্শন করার সুবিধা পাওয়া যায়, যা বিভিন্ন ধরনের ডেটা বিশ্লেষণে সহায়ক।
Pie Chart এবং Donut Chart হল দুটি জনপ্রিয় ডেটা ভিজুয়ালাইজেশন চার্ট, যা Highcharts লাইব্রেরি ব্যবহার করে সহজেই তৈরি করা যায়। এই চার্টগুলো সাধারণত ডেটার বিভিন্ন অংশের অনুপাত প্রদর্শন করতে ব্যবহৃত হয়, যেমন বিক্রির অংশ, মার্কেট শেয়ার, বা কোনো নির্দিষ্ট সময়ে বিভিন্ন ক্যাটাগরির ডেটা ভাগ।
Pie Chart তৈরি
Pie Chart একটি গোলাকার চার্ট যা একটি পূর্ণ চক্রে বিভিন্ন অংশের অনুপাত বা শতাংশ প্রদর্শন করে। এখানে একটি সাধারণ Pie Chart তৈরির উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Pie Chart 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: 'pie'
},
title: {
text: 'বিক্রির ভাগ'
},
series: [{
name: 'বিক্রির ভাগ',
data: [
['প্রোডাক্ট A', 45],
['প্রোডাক্ট B', 30],
['প্রোডাক্ট C', 25]
]
}]
});
</script>
</body>
</html>
এই কোডে একটি Pie Chart তৈরি করা হয়েছে যা তিনটি প্রোডাক্টের বিক্রির অনুপাত প্রদর্শন করে।
Donut Chart তৈরি
Donut Chart আসলে একটি Pie Chart এরই উন্নত সংস্করণ, যা কেন্দ্রে একটি ফাঁকা অংশ রেখে থাকে। এই চার্টটি একইভাবে কাজ করে, তবে এটি দেখতে আরও আধুনিক এবং visually appealing। নিচে একটি Donut Chart তৈরির উদাহরণ দেয়া হলো:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Donut Chart 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: 'pie'
},
title: {
text: 'বিক্রির অংশ (Donut)'
},
plotOptions: {
pie: {
innerSize: '50%' // Donut shape
}
},
series: [{
name: 'বিক্রির অংশ',
data: [
['প্রোডাক্ট A', 45],
['প্রোডাক্ট B', 30],
['প্রোডাক্ট C', 25]
]
}]
});
</script>
</body>
</html>
এখানে innerSize প্রপার্টি ব্যবহার করা হয়েছে, যা চার্টটির কেন্দ্রে একটি ফাঁকা অংশ তৈরি করে, এটি একটি Donut Chart এ পরিণত করে।
Pie এবং Donut Chart এর কাস্টমাইজেশন
Highcharts এর Pie এবং Donut Chart কাস্টমাইজ করার জন্য অনেক অপশন রয়েছে। নিচে কিছু সাধারণ কাস্টমাইজেশন অপশন আলোচনা করা হলো:
১. রঙ কাস্টমাইজেশন
আপনি আপনার চাহিদা অনুযায়ী চার্টের বিভিন্ন অংশের রঙ পরিবর্তন করতে পারেন।
colors: ['#ff0000', '#00ff00', '#0000ff']
২. টুলটিপ কাস্টমাইজেশন
টুলটিপের মেসেজ বা আউটপুট কাস্টমাইজ করতে পারেন।
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
৩. ডেটা লেবেল কাস্টমাইজেশন
আপনি প্রতিটি পিসের উপর লেবেল যোগ করতে পারেন, যা ডেটার শতাংশ বা মান দেখায়।
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f}%' // percentage display
}
৪. অ্যানিমেশন
Highcharts এ চার্ট তৈরির সময় আপনি অ্যানিমেশন প্রয়োগ করতে পারেন।
plotOptions: {
pie: {
animation: {
duration: 1000
}
}
}
৫. লিজেন্ড কাস্টমাইজেশন
চার্টের লিজেন্ড কাস্টমাইজ করতে পারেন।
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
}
উপসংহার
Highcharts এর মাধ্যমে Pie এবং Donut Chart তৈরি এবং কাস্টমাইজেশন খুবই সহজ। আপনি সহজেই ডেটার অনুপাত বা অংশ প্রদর্শন করতে পারেন এবং বিভিন্ন রঙ, টুলটিপ, ডেটা লেবেল, এবং অ্যানিমেশন ইত্যাদি কাস্টমাইজ করতে পারেন। Highcharts এর এই ক্ষমতাগুলি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও বেশি ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
Highcharts লাইব্রেরি বিভিন্ন ধরনের চার্ট তৈরি করার সুবিধা দেয়, যার মধ্যে Scatter Chart এবং Area Chart অন্যতম। এই দুই ধরনের চার্ট ডেটা ভিজুয়ালাইজেশনকে আরও স্পষ্ট এবং গভীরভাবে বিশ্লেষণ করতে সাহায্য করে। চলুন, আমরা এই দুই ধরনের চার্টের ব্যবহার এবং তাদের বিভিন্ন বৈশিষ্ট্যগুলো সম্পর্কে আলোচনা করি।
Scatter Chart এর ব্যবহার
Scatter Chart কী?
Scatter Chart বা Scatter Plot হল একটি চার্ট টাইপ যা দুইটি পরিবর্তনশীলের মধ্যে সম্পর্ক প্রদর্শন করে। প্রতিটি পয়েন্ট একটি নির্দিষ্ট x এবং y মানের প্রতিনিধিত্ব করে এবং এটি ডেটার মধ্যে কোনো ট্রেন্ড বা সম্পর্ক চিহ্নিত করতে ব্যবহৃত হয়।
Scatter Chart এর ব্যবহার
Scatter Chart মূলত রিলেশনশিপ বা কোরিলেশন বুঝতে ব্যবহৃত হয়, যেখানে দুইটি ভিন্ন ডেটা সিরিজের মধ্যে সম্পর্ক খোঁজা হয়। যেমন, কোনো কোম্পানির বিক্রির পরিমাণ এবং বিজ্ঞাপন খরচের মধ্যে সম্পর্ক দেখানোর জন্য এটি ব্যবহার করা যায়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Scatter Chart Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="scatter-chart" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('scatter-chart', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'বিক্রি এবং বিজ্ঞাপন খরচের সম্পর্ক'
},
xAxis: {
title: {
enabled: true,
text: 'বিজ্ঞাপন খরচ (Ad Spend)'
}
},
yAxis: {
title: {
enabled: true,
text: 'বিক্রি (Sales)'
}
},
series: [{
name: 'ডেটা',
data: [
[1, 5],
[2, 6],
[3, 10],
[4, 12],
[5, 15]
]
}]
});
</script>
</body>
</html>
এখানে, scatter-chart নামক ডিভে একটি scatter chart তৈরি করা হয়েছে, যেখানে বিক্রি এবং বিজ্ঞাপন খরচ এর সম্পর্ক দেখানো হয়েছে।
Area Chart এর ব্যবহার
Area Chart কী?
Area Chart হল একটি চার্ট টাইপ যা ডেটা পয়েন্টের মধ্যে একটি অঞ্চল বা এলাকা পূর্ণ করে। এটি মূলত লাইন চার্ট এর একটি উন্নত সংস্করণ, যেখানে লাইনটির নিচের অংশ একটি রঙ দ্বারা পূর্ণ থাকে, এবং এটি ট্রেন্ড বা পরিবর্তনগুলো আরও স্পষ্টভাবে দেখায়।
Area Chart এর ব্যবহার
Area Chart ডেটার পরিবর্তনশীলতার মাত্রা বুঝতে এবং টাইম সিরিজ ডেটা অথবা ট্রেন্ড বিশ্লেষণ করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদেরকে ডেটার একটি নির্দিষ্ট সময়ের মধ্যে পরিবর্তন দেখাতে সাহায্য করে। উদাহরণস্বরূপ, কোনো কোম্পানির বিক্রির পরিমাণ বা শেয়ার মার্কেটের স্টক প্রাইস ট্র্যাক করা।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Area Chart Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="area-chart" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('area-chart', {
chart: {
type: 'area'
},
title: {
text: 'বিক্রির পরিমাণ পরিবর্তন'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
title: {
text: 'মাস'
}
},
yAxis: {
title: {
text: 'বিক্রি (Sales)'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে area-chart নামক ডিভে একটি area chart তৈরি করা হয়েছে, যেখানে বিক্রির পরিমাণের পরিবর্তন মাসের হিসাবে দেখানো হয়েছে।
Scatter এবং Area Chart এর মধ্যে পার্থক্য
- Scatter Chart সাধারণত ডেটার মধ্যে সম্পর্ক চিহ্নিত করতে ব্যবহৃত হয়, যেখানে প্রতিটি পয়েন্ট একটি নির্দিষ্ট x এবং y মানের প্রতিনিধিত্ব করে।
- Area Chart সাধারণত টাইম সিরিজ ডেটা বা ট্রেন্ড বুঝতে ব্যবহৃত হয়, যেখানে একাধিক ডেটা পয়েন্টের মধ্যে একটি অঞ্চলের পরিবর্তন চিত্রিত করা হয়।
উপসংহার
Scatter Chart এবং Area Chart উভয়ই ডেটা ভিজুয়ালাইজেশন এর শক্তিশালী টুল। Scatter Chart সম্পর্ক এবং কোরিলেশন বিশ্লেষণ করতে সাহায্য করে, যেখানে Area Chart ডেটার টাইম সিরিজ বা ট্রেন্ড দেখাতে সহায়ক। Highcharts এ এই দুটি চার্ট অত্যন্ত কাস্টমাইজেবল এবং সহজে ব্যবহারযোগ্য, যা আপনার ডেটাকে আরও ভালোভাবে বিশ্লেষণ এবং উপস্থাপন করতে সাহায্য করবে।
Read more
