Highcharts ব্যবহার করে বেসিক চার্ট তৈরি করা খুবই সহজ এবং এটি বিভিন্ন ধরনের গ্রাফিকাল রিপ্রেজেন্টেশন প্রদান করতে সহায়ক। এখানে আমরা লাইন চার্ট (Line Chart), বার চার্ট (Bar Chart), কলাম চার্ট (Column Chart) এবং পাই চার্ট (Pie Chart) তৈরি করার পদ্ধতি দেখবো।
লাইন চার্ট (Line Chart)
লাইন চার্ট সময়ের সাথে সাথে ডেটার পরিবর্তন দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত টাইম সিরিজ ডেটা বা ট্রেন্ডলাইন দেখানোর জন্য উপযুক্ত।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Line Chart Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="lineChart" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('lineChart', {
chart: {
type: 'line'
},
title: {
text: 'লাইন চার্ট উদাহরণ'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'মূল্য'
}
},
series: [{
name: 'বিক্রয়',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এই কোডে একটি লাইন চার্ট তৈরি করা হয়েছে, যা মাস ভিত্তিক বিক্রয় ডেটা দেখাচ্ছে।
বার চার্ট (Bar Chart)
বার চার্ট ব্যবহার করে বিভিন্ন ক্যাটাগরির মধ্যে তুলনা করা হয়। এটি সাধারণত ক্যাটেগরিকাল ডেটা দেখানোর জন্য উপযুক্ত।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="barChart" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('barChart', {
chart: {
type: 'bar'
},
title: {
text: 'বার চার্ট উদাহরণ'
},
xAxis: {
categories: ['সামান্থা', 'জন', 'মাইকেল', 'এমিলি', 'হেনরি']
},
yAxis: {
title: {
text: 'স্কোর'
}
},
series: [{
name: 'স্কোর',
data: [5, 10, 15, 20, 25]
}]
});
</script>
</body>
</html>
এটি একটি বার চার্ট যা পাঁচজন ছাত্রের স্কোর প্রদর্শন করছে।
কলাম চার্ট (Column Chart)
কলাম চার্টও বার চার্টের মতো, তবে এটি উল্লম্বভাবে প্রদর্শিত হয়। এটি ভেরিয়েবল পরিমাণ দেখানোর জন্য ব্যবহার করা হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Column Chart Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="columnChart" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('columnChart', {
chart: {
type: 'column'
},
title: {
text: 'কলাম চার্ট উদাহরণ'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'মোট বিক্রয়'
}
},
series: [{
name: 'বিক্রয়',
data: [30, 40, 50, 60, 70]
}]
});
</script>
</body>
</html>
এটি একটি কলাম চার্ট, যা মাস অনুযায়ী বিক্রয়ের পরিমাণ প্রদর্শন করছে।
পাই চার্ট (Pie Chart)
পাই চার্ট ডেটার অনুপাত বা ভাগ দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত পোর্টফোলিও বিশ্লেষণ, বাজারের শেয়ার ইত্যাদি দেখাতে ব্যবহার হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Pie Chart Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="pieChart" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('pieChart', {
chart: {
type: 'pie'
},
title: {
text: 'পাই চার্ট উদাহরণ'
},
series: [{
name: 'শেয়ার',
colorByPoint: true,
data: [{
name: 'Category A',
y: 40
}, {
name: 'Category B',
y: 30
}, {
name: 'Category C',
y: 20
}, {
name: 'Category D',
y: 10
}]
}]
});
</script>
</body>
</html>
এই কোডে একটি পাই চার্ট তৈরি করা হয়েছে, যা চারটি ক্যাটাগরির মধ্যে শেয়ার ভাগ প্রদর্শন করছে।
উপসংহার
Highcharts একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য লাইব্রেরি যা লাইন, বার, কলাম এবং পাই চার্টসহ বিভিন্ন ধরনের চার্ট তৈরি করতে সাহায্য করে। এটি ডেটা ভিজুয়ালাইজেশনের জন্য অত্যন্ত কার্যকরী, এবং এর কাস্টমাইজেশন সুবিধা এবং ইন্টারঅ্যাকটিভ ফিচারগুলো ব্যবহারকারীদের জন্য একটি দুর্দান্ত অভিজ্ঞতা প্রদান করে।
Read more
