Google Charts ব্যবহার করার জন্য প্রাথমিকভাবে লাইব্রেরি লোড করা এবং একটি সাধারণ চার্ট তৈরি করার ধাপগুলো জানতে হবে। এখানে আপনি কীভাবে Google Charts সেটআপ করবেন এবং আপনার প্রথম চার্ট তৈরি করবেন, তা বিস্তারিতভাবে জানানো হলো।
Google Charts সেটআপ
Google Charts ব্যবহার করতে হলে প্রথমে আপনার HTML ডকুমেন্টে Google Charts লাইব্রেরি লোড করতে হবে। এটি করার জন্য নিচের কোডটি ব্যবহার করুন:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
এটি Google Charts লাইব্রেরি লোড করবে এবং আপনি JavaScript API এর মাধ্যমে চার্ট তৈরি করতে পারবেন।
প্রথম চার্ট তৈরি করা
এখানে আমরা একটি লাইন চার্ট (Line Chart) তৈরি করব যা একটি সাধারণ সেলস ডেটা প্রদর্শন করবে।
ধাপ ১: HTML ফাইল তৈরি
প্রথমে একটি HTML ফাইল তৈরি করুন এবং এতে Google Charts লাইব্রেরি লোড করুন। উদাহরণস্বরূপ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Google Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart', 'line']});
// চার্ট তৈরি করার জন্য কলব্যাক ফাংশন সেট করা
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// ডেটা তৈরি
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
// চার্টের জন্য অপশন নির্ধারণ
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
// চার্ট তৈরি করা
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>My First Google Chart</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ধাপ ২: কোড ব্যাখ্যা
- লাইব্রেরি লোড করা:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>এই লাইনটি Google Charts লাইব্রেরি লোড করে। - ডেটা প্রস্তুত করা:
google.visualization.arrayToDataTable()ফাংশন ব্যবহার করে আমরা ডেটা প্রস্তুত করি। এখানে আমরা ২০২০ থেকে ২০২৩ পর্যন্ত সেলস ডেটা দিয়েছি। - চার্টের অপশন সেট করা:
optionsঅবজেক্টে চার্টের শিরোনাম, অক্ষের নাম এবং অন্যান্য কাস্টমাইজেশন সেট করা হয়। - চার্ট ড্র করা:
google.visualization.LineChart()ফাংশন ব্যবহার করে চার্টটি ড্র করা হয় এবং এটি HTML ডকুমেন্টের একটি<div>তে প্রদর্শিত হয়।
Google Charts এর আরও কিছু চার্ট উদাহরণ
১. বার চার্ট (Bar Chart)
<script type="text/javascript">
google.charts.setOnLoadCallback(drawBarChart);
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
chartArea: {width: '50%'},
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'}
};
var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
chart.draw(data, options);
}
</script>
২. পাই চার্ট (Pie Chart)
<script type="text/javascript">
google.charts.setOnLoadCallback(drawPieChart);
function drawPieChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses Distribution',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
উপসংহার
এখন আপনি Google Charts এর সেটআপ এবং প্রথম চার্ট তৈরি করার প্রক্রিয়া জানেন। এই টিউটোরিয়ালটি অনুসরণ করে, আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে সক্ষম হবেন এবং ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং কার্যকরীভাবে উপস্থাপন করতে পারবেন। Google Charts এর মাধ্যমে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে ডেটার বিশ্লেষণ সহজ এবং সুন্দরভাবে উপস্থাপন করা সম্ভব।
Google Charts লাইব্রেরি ব্যবহার করতে হলে প্রথমে সেটি আপনার ওয়েব পেজে ইন্টিগ্রেট করতে হবে। Google Charts একটি JavaScript লাইব্রেরি, যা ডেটাকে সুন্দর ও ইন্টারঅ্যাকটিভ চার্টে রূপান্তরিত করার জন্য ব্যবহৃত হয়। সেটআপের জন্য আপনাকে কিছু সহজ ধাপ অনুসরণ করতে হবে। নিচে বিস্তারিতভাবে ব্যাখ্যা করা হলো কীভাবে Google Charts লাইব্রেরি সেটআপ করবেন।
১. Google Charts লাইব্রেরি লোড করা
Google Charts ব্যবহার করতে হলে প্রথমে Google Charts Loader স্ক্রিপ্ট লোড করতে হবে। এটি আপনার HTML ফাইলের <head> ট্যাগে যুক্ত করতে হবে।
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
এই কোডটি Google Charts লাইব্রেরি লোড করবে, যা পরবর্তীতে আপনি ব্যবহার করবেন চার্ট তৈরি করার জন্য।
২. Google Charts লাইব্রেরি লোডের পরে চার্ট তৈরি করা
Google Charts লাইব্রেরি লোড হওয়ার পরে, আপনি যে চার্টটি তৈরি করতে চান, তার জন্য প্রয়োজনীয় প্যাকেজ লোড করতে হবে। এখানে সাধারণভাবে corechart প্যাকেজ ব্যবহার করা হয়, যা বিভিন্ন ধরনের চার্ট (যেমন, বার চার্ট, লাইন চার্ট, পাই চার্ট) তৈরি করতে সাহায্য করে।
google.charts.load('current', {packages: ['corechart']});
এই কোডটি Google Charts এর corechart প্যাকেজ লোড করবে। আপনি যদি অন্য কোনো প্যাকেজ ব্যবহার করতে চান (যেমন geochart, table, calendar), তবে packages এর মধ্যে সেই প্যাকেজগুলো যোগ করতে হবে।
৩. কলব্যাক ফাংশন সেট করা
Google Charts ব্যবহার করার পর পরবর্তী ধাপে setOnLoadCallback ফাংশন ব্যবহার করে আপনি যখন চার্ট তৈরির কাজ শুরু করবেন, তখন সেটি কলব্যাক হিসেবে কাজ করবে।
google.charts.setOnLoadCallback(drawChart);
এখানে drawChart হল সেই ফাংশন যা চার্টটি বাস্তবায়ন করবে।
৪. চার্ট তৈরি করা
চার্ট তৈরির জন্য একটি সাধারণ ফাংশন লিখতে হবে যেখানে ডেটা প্রস্তুত করা হবে এবং সেই ডেটা দিয়ে চার্টটি প্রদর্শন করা হবে। উদাহরণস্বরূপ, একটি লাইন চার্ট তৈরি করার কোড:
function drawChart() {
// ডেটা তৈরি করা
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
// চার্টের জন্য অপশন সেট করা
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
// চার্ট তৈরি করা এবং প্রদর্শন
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
৫. HTML এ কনটেইনার তৈরি করা
এখন আপনাকে HTML ডকুমেন্টে একটি কনটেইনার তৈরি করতে হবে যেখানে চার্টটি প্রদর্শিত হবে। সাধারণত, <div> ট্যাগ ব্যবহার করা হয়। উদাহরণ:
<div id="line_chart" style="width: 900px; height: 500px;"></div>
এখানে id="line_chart" হল সেই ডিভ, যেখানে চার্টটি প্রদর্শিত হবে।
সম্পূর্ণ কোড উদাহরণ
এখন সমস্ত কোড একত্রে দেখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// চার্ট তৈরি করার ফাংশন
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts Example</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
Google Charts এর লাইব্রেরি সেটআপ করা খুবই সহজ। শুধু লাইব্রেরি লোড করতে হবে, তারপর প্যাকেজ লোড করে ডেটা এবং চার্ট তৈরির ফাংশন লিখলেই আপনার চার্ট তৈরি হয়ে যাবে। এই সেটআপের মাধ্যমে আপনি যে কোনো ধরনের চার্ট তৈরি করতে পারবেন এবং ডেটা ভিজ্যুয়ালাইজেশন করতে পারবেন।
Google Charts একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য ডেটা ভিজ্যুয়ালাইজেশন টুল, যা HTML ফাইলের মধ্যে সহজেই যোগ করা যায়। এটি ব্যবহারের জন্য শুধুমাত্র একটি লাইব্রেরি লোড করতে হয় এবং এরপর JavaScript ব্যবহার করে ডেটা চার্টে রূপান্তর করা যায়। নিচে দেখানো হলো কীভাবে আপনি HTML ফাইলে Google Charts যোগ করবেন এবং সেটি ব্যবহার করে চার্ট তৈরি করবেন।
১. Google Charts লাইব্রেরি লোড করা
প্রথমে আপনাকে আপনার HTML ফাইলে Google Charts লাইব্রেরি লোড করতে হবে। এটি Google এর loader.js ফাইল থেকে করা হয়। এই লাইব্রেরি আপনার পৃষ্ঠায় অন্তর্ভুক্ত করতে হবে।
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
এটি আপনার HTML ফাইলের <head> ট্যাগে রাখতে হবে।
২. Google Charts প্যাকেজ লোড করা
Google Charts বিভিন্ন ধরনের চার্ট তৈরি করতে সাহায্য করে এবং এটি বিভিন্ন প্যাকেজের মাধ্যমে পরিচালিত হয়। আপনি যেই ধরনের চার্ট তৈরি করতে চান, সেই প্যাকেজটি লোড করতে হবে। নিচে corechart প্যাকেজ লোড করার একটি উদাহরণ দেয়া হলো:
google.charts.load('current', {packages: ['corechart']});
এটি আপনার JavaScript কোডে থাকতে হবে, যেখানে আপনি Google Charts লাইব্রেরি লোড করবেন।
৩. কলব্যাক ফাংশন সেট করা
Google Charts লোড করার পরে আপনাকে একটি কলব্যাক ফাংশন ব্যবহার করতে হবে, যা নিশ্চিত করবে যে লাইব্রেরি লোড হওয়ার পরেই চার্টটি তৈরি করা হবে। এটি google.charts.setOnLoadCallback() এর মাধ্যমে করা হয়।
google.charts.setOnLoadCallback(drawChart);
এখানে drawChart হলো সেই ফাংশন যা চার্ট তৈরি করবে।
৪. HTML এ কনটেইনার তৈরি করা
এখন আপনাকে একটি কনটেইনার তৈরি করতে হবে, যেখানে চার্টটি প্রদর্শিত হবে। সাধারণত একটি <div> ট্যাগ ব্যবহার করা হয়। উদাহরণ:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
এটি সেই জায়গা যেখানে আপনার চার্টটি দেখা যাবে।
৫. JavaScript কোড দিয়ে চার্ট তৈরি করা
আপনার চার্ট তৈরি করার জন্য JavaScript কোড লিখতে হবে। এখানে আমরা একটি লাইন চার্ট তৈরি করবো।
function drawChart() {
// ডেটা তৈরি করা
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
// চার্টের অপশন সেট করা
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
// চার্ট তৈরি করা এবং প্রদর্শন
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
এটি JavaScript ফাংশন drawChart() যা ডেটা প্রস্তুত করবে এবং চার্ট প্রদর্শন করবে।
৬. সম্পূর্ণ HTML কোড উদাহরণ
এখন, সমস্ত কোড একত্রে দেখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// চার্ট তৈরি করার ফাংশন
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
এটি ছিল একটি Google Charts লাইব্রেরি সেটআপ করার এবং HTML ফাইলে একটি চার্ট যোগ করার প্রক্রিয়া। Google Charts লাইব্রেরি ব্যবহার করে আপনি খুব সহজেই আপনার ওয়েবসাইটে ডেটা ভিজ্যুয়ালাইজেশন করতে পারবেন। এটি ডেটাকে আরও আকর্ষণীয় এবং বোঝার সহজ উপস্থাপনায় রূপান্তরিত করে, যা ব্যবহারকারীদের জন্য উপকারী হতে পারে।
গুগল চার্ট (Google Charts) ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন, যেমন Bar Chart, Line Chart, এবং Pie Chart। এই চূড়ান্তভাবে ডেটাকে ভিজ্যুয়াল উপস্থাপন করতে সাহায্য করে। নিচে প্রতিটি চার্ট তৈরির বিস্তারিত উদাহরণ দেওয়া হলো।
১. Basic Bar Chart
Bar Chart সাধারণত তুলনা করতে ব্যবহৃত হয়। এটি একাধিক ক্যাটাগরির মধ্যে পরিমাণের তুলনা করার জন্য উপযুক্ত।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBarChart);
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
chartArea: {width: '50%'},
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'}
};
var chart = new google.visualization.BarChart(document.getElementById('bar_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Basic Bar Chart</h2>
<div id="bar_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এটি একটি Bar Chart তৈরি করবে যা বিভিন্ন শহরের জনসংখ্যার তুলনা করবে।
২. Basic Line Chart
Line Chart সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা প্রদর্শনের জন্য ব্যবহার করা হয়, যেমন সেলস, স্টক প্রাইস ইত্যাদি।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Basic Line Chart</h2>
<div id="line_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এই কোডটি একটি Line Chart তৈরি করবে যা একাধিক বছরের সেলস ডেটা প্রদর্শন করবে।
৩. Basic Pie Chart
Pie Chart একটি ভাগ বা অংশের আপেক্ষিক পরিমাণ প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত পণ্য বিক্রির ভাগ, বা ডিস্ট্রিবিউশন দেখানোর জন্য ব্যবহার করা হয়।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawPieChart);
function drawPieChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses Distribution',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Basic Pie Chart</h2>
<div id="pie_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এটি একটি Pie Chart তৈরি করবে, যা মাসিক খরচের বিভিন্ন বিভাগের ভাগ প্রদর্শন করবে।
উপসংহার
এখন আপনি Bar Chart, Line Chart, এবং Pie Chart তৈরির জন্য গুগল চার্ট ব্যবহার করতে জানেন। এই উদাহরণগুলো অনুসরণ করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারবেন এবং আপনার ডেটাকে আরও আকর্ষণীয়ভাবে উপস্থাপন করতে পারবেন। Google Charts একটি শক্তিশালী টুল যা ডেটার ভিজ্যুয়ালাইজেশন সহজ করে তোলে।
গুগল চার্ট (Google Charts) হল একটি ফ্রি এবং ওপেন সোর্স লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য ব্যবহৃত হয়। এটি JavaScript API ব্যবহার করে ইন্টারঅ্যাকটিভ এবং সুন্দর চার্ট তৈরি করতে সাহায্য করে। গুগল চার্টের মাধ্যমে ডেভেলপাররা সহজেই গ্রাফিক্যাল ডেটা উপস্থাপনা তৈরি করতে পারে, যেমন বার চার্ট, পাই চার্ট, লাইন চার্ট ইত্যাদি।
এই টুলটি বিভিন্ন ধরনের ডেটাকে আকর্ষণীয় এবং সহজে বোধগম্যভাবে প্রদর্শন করতে সহায়ক। এটি HTML এবং JavaScript এর মাধ্যমে ডেটা বিশ্লেষণ এবং উপস্থাপনাকে আরও কার্যকর করে তোলে।
Chart API এর মাধ্যমে Google Charts ব্যবহার
Google Charts ব্যবহার করার জন্য Chart API (Application Programming Interface) ব্যবহার করা হয়। এই API দ্বারা ডেভেলপাররা ডেটা লোড, প্রক্রিয়াকরণ এবং চার্টে রেন্ডার করতে পারেন। Google Charts API JavaScript ভিত্তিক, যা ব্রাউজারে রান করে এবং ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ ও কাস্টমাইজেবল করে।
Google Charts এর Chart API এর মৌলিক বৈশিষ্ট্য
- ডেটা ফরম্যাটিং: API ডেটাকে বিভিন্ন ফরম্যাট যেমন JSON, টেবিল, বা গ্রিড আকারে গ্রহণ করতে পারে।
- কাস্টমাইজেশন: চার্টের ডিজাইন, রং, ফন্ট, লেজেন্ড, অক্ষের লেবেল এবং অন্যান্য অংশ কাস্টমাইজ করা যায়।
- ইন্টারঅ্যাকটিভিটি: চার্টের উপরে হোভার, ক্লিক বা জুম ইন/আউট করার মাধ্যমে আরও বিশদ তথ্য দেখা যায়।
- রেসপন্সিভ ডিজাইন: এটি মোবাইল এবং ডেস্কটপ ব্রাউজার উভয়েই সমানভাবে কাজ করে।
- লাইভ ডেটা আপডেট: রিয়েল-টাইম ডেটা আপডেট এবং ডেটার স্রোত দেখানো সম্ভব।
Google Charts API এর মাধ্যমে Chart তৈরি করার ধাপ
ধাপ ১: লাইব্রেরি লোড করা
প্রথমে Google Charts লাইব্রেরি আপনার HTML ফাইলে লোড করতে হবে। এটি করা হয় নিম্নলিখিত কোডের মাধ্যমে:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
ধাপ ২: প্যাকেজ লোড করা
Chart API ব্যবহার করতে হলে আপনি যে ধরনের চার্ট তৈরি করতে চান, তার প্যাকেজটি লোড করতে হবে। উদাহরণস্বরূপ, বার চার্ট বা লাইন চার্টের জন্য আপনাকে corechart প্যাকেজ লোড করতে হবে।
google.charts.load('current', {packages: ['corechart', 'bar']});
ধাপ ৩: ডেটা প্রস্তুত করা
ডেটাকে প্রস্তুত করতে google.visualization.arrayToDataTable ফাংশন ব্যবহার করা হয়, যা ডেটাকে সঠিক ফরম্যাটে রূপান্তরিত করে।
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1200],
['2022', 1500]
]);
ধাপ ৪: চার্ট অপশন সেট করা
চার্টের বিভিন্ন অপশন কাস্টমাইজ করা যায় যেমন শিরোনাম, অক্ষের লেবেল, এবং অন্যান্য ভিজ্যুয়াল উপাদান। এগুলি options অবজেক্টের মাধ্যমে সেট করা হয়।
var options = {
title: 'Sales Growth Over Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'}
};
ধাপ ৫: চার্ট ড্র করা
নির্বাচিত কন্টেইনারে চার্টটি ড্র করার জন্য google.visualization.BarChart বা অন্য চার্ট কনস্ট্রাক্টর ব্যবহার করা হয়।
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
ধাপ ৬: HTML ডকুমেন্টে কন্টেইনার তৈরি করা
শেষে, HTML ডকুমেন্টে চার্ট প্রদর্শনের জন্য একটি div কন্টেইনার তৈরি করতে হয়।
<div id="chart_div" style="width: 900px; height: 500px;"></div>
উদাহরণ: একটি বার চার্ট তৈরি করা
এখানে একটি সহজ বার চার্ট তৈরি করা হয়েছে যা বিভিন্ন বছরের সেলস প্রদর্শন করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1200],
['2022', 1500]
]);
var options = {
title: 'Sales Growth Over Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এই কোডটি একটি Bar Chart তৈরি করবে যা ২০২০, ২০২১, এবং ২০২২ সালের সেলস দেখাবে।
উপসংহার
Google Charts এর Chart API একটি অত্যন্ত শক্তিশালী টুল যা ডেটা ভিজ্যুয়ালাইজেশনকে সহজ, ইন্টারঅ্যাকটিভ এবং কাস্টমাইজেবল করে তোলে। এটি বিভিন্ন ধরনের চার্ট তৈরি করতে সক্ষম এবং ডেটাকে আরও বোধগম্য, কার্যকর এবং আকর্ষণীয়ভাবে উপস্থাপন করতে সহায়ক। API এর মাধ্যমে আপনি আপনার ডেটাকে যে কোনো ওয়েব পেজে সহজে ইন্টিগ্রেট করতে পারবেন এবং প্রয়োজনীয় কাস্টমাইজেশন করতে পারবেন।
Read more
