Google Charts ব্যবহারকারীদের দ্রুত এবং ইন্টারঅ্যাকটিভ চার্ট উপস্থাপনা করতে সাহায্য করে। তবে, যখন ডেটা বড় বা অনেক চার্ট ব্যবহার করা হয়, তখন লোডিং টাইম কমানো এবং পারফরম্যান্স বৃদ্ধি করার জন্য Lazy Loading এবং Chart Caching অত্যন্ত গুরুত্বপূর্ণ। এই দুটি কৌশল আপনার ওয়েবপেজ বা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়ক।
১. Lazy Loading এবং Chart Caching এর ভূমিকা
- Lazy Loading: Lazy loading হল একটি কৌশল যা শুধুমাত্র সেই সময় চার্ট লোড করে যখন তা প্রয়োজনীয় হয়, অর্থাৎ যখন ব্যবহারকারী সেটি দেখবেন। এটি ওয়েবপেজ লোডিং সময় কমিয়ে দেয় এবং অপটিমাইজড ইউজার এক্সপেরিয়েন্স প্রদান করে।
- Chart Caching: Chart caching হল এমন একটি কৌশল যেখানে চার্টের ডেটা বা কাঠামো ক্যাশে রাখা হয়, যাতে পরবর্তী সময়ে একই চার্ট রি-রেন্ডার করতে সময় কম লাগে।
এই দুটি কৌশল একসাথে ব্যবহার করে আপনি Google Charts এর লোডিং সময় কমাতে এবং চার্টের প্রদর্শন দ্রুত করতে পারেন।
২. Lazy Loading কিভাবে ব্যবহার করবেন
Lazy Loading এর মাধ্যমে আপনি একাধিক চার্টের মধ্যে কোন চার্ট শুধুমাত্র তখন লোড করবেন, যখন তা প্রয়োজন হবে। এই প্রক্রিয়ায় চার্ট লোড হবে যখন ব্যবহারকারী স্ক্রিনে ওই চার্টটি দেখবেন।
উদাহরণ: Lazy Loading এর মাধ্যমে Google Charts ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Google Chart</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']});
// Scroll event listener to detect when the chart enters the viewport
window.addEventListener('scroll', loadChartWhenVisible);
var chartLoaded = false; // Flag to check if chart has been loaded
function loadChartWhenVisible() {
// Check if chart is in the viewport
var chartDiv = document.getElementById('chart_div');
var rect = chartDiv.getBoundingClientRect();
if (!chartLoaded && rect.top >= 0 && rect.bottom <= window.innerHeight) {
drawChart(); // Load chart when it is in view
chartLoaded = true; // Set flag to true to prevent multiple loadings
}
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over Time',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'bottom' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts with Lazy Loading</h2>
<div id="chart_div" style="width: 900px; height: 500px; margin-top: 1000px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Scroll Event Listener:
window.addEventListener('scroll', loadChartWhenVisible);কোডের মাধ্যমে স্ক্রল ইভেন্ট ট্র্যাক করা হয়। যখন ব্যবহারকারী স্ক্রিনে নির্দিষ্ট চার্টটি নিয়ে স্ক্রল করবেন, তখনloadChartWhenVisible()ফাংশন কল হবে। - Chart Visibility:
getBoundingClientRect()ফাংশন ব্যবহার করে যাচাই করা হয় যে, চার্টটি বর্তমানে স্ক্রিনে দৃশ্যমান কি না। যদি এটি দৃশ্যমান হয়, তাহলেdrawChart()ফাংশন কল হয়ে চার্টটি লোড হবে। - Flag (chartLoaded): একবার চার্ট লোড হলে
chartLoaded = trueকরা হয় যাতে একাধিকবার চার্টটি লোড না হয়।
৩. Chart Caching কিভাবে ব্যবহার করবেন
Chart Caching এর মাধ্যমে আমরা একবার চার্টের ডেটা লোড করলে তা ক্যাশে রাখি। পরবর্তী সময়ে সেই একই চার্ট যখন লোড হবে, তখন তা আবার ডেটাবেস বা সার্ভার থেকে না এনে ক্যাশ করা ডেটা থেকে প্রদর্শন করা হয়, ফলে লোডিং টাইম দ্রুত হয়।
উদাহরণ: Chart Caching এর মাধ্যমে Google Charts ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart Caching 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']});
var cachedData = null; // Variable to store cached data
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
if (cachedData) {
// If data is already cached, use cached data
renderChart(cachedData);
} else {
// If data is not cached, fetch new data
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
// Cache the data for future use
cachedData = data;
renderChart(data); // Render chart with new data
}
}
function renderChart(data) {
var options = {
title: 'Company Sales Over Time',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'bottom' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts with Chart Caching</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Caching the Data:
cachedDataভেরিয়েবলটি ব্যবহার করা হয়েছে যাতে একবার ডেটা লোড হলে তা ভবিষ্যতে ব্যবহার করা যেতে পারে। - Check Cached Data:
if (cachedData)কোডের মাধ্যমে চেক করা হচ্ছে, যদি ডেটা ক্যাশে থাকে, তাহলে সোজা সেই ডেটা ব্যবহার করা হবে। - Rendering Chart:
renderChart()ফাংশনটি ডেটা প্রাপ্তি বা ক্যাশিংয়ের পর চার্টটি রেন্ডার করার জন্য ব্যবহৃত হয়।
৪. Lazy Loading এবং Chart Caching এর উপকারিতা
- পারফরম্যান্স বৃদ্ধি: লোডিং সময় কমিয়ে দেয় এবং বড় চার্ট ডেটা দ্রুত প্রদর্শন করতে সাহায্য করে।
- ডেটার সর্বশেষ অবস্থান প্রদর্শন: Lazy Loading দ্বারা আপনি ব্যবহারকারীর স্ক্রিনে প্রয়োজনীয় ডেটা দ্রুত লোড করতে পারেন এবং Chart Caching দ্বারা পূর্বের ডেটা পুনরায় রেন্ডার করতে পারবেন।
- স্মৃতি এবং ব্যান্ডউইথ অপটিমাইজেশন: একই চার্ট বা ডেটা বারবার লোড করার পরিবর্তে একবার লোড করে ক্যাশে রাখা যায়, যা সিস্টেম রিসোর্স এবং ব্যান্ডউইথ অপটিমাইজ করে।
উপসংহার
Lazy Loading এবং Chart Caching হলো দুটি অত্যন্ত কার্যকরী কৌশল যা Google Charts এর লোডিং সময় এবং পারফরম্যান্স বৃদ্ধি করতে সহায়তা করে। Lazy Loading শুধুমাত্র প্রয়োজনীয় সময় চার্ট লোড করে, আর Chart Caching চার্টের ডেটা ক্যাশে রেখে দ্রুত প্রদর্শন করে। এই দুটি কৌশল একসাথে ব্যবহার করে আপনি আপনার ওয়েবসাইটের বা অ্যাপ্লিকেশনের পারফরম্যান্সকে উল্লেখযোগ্যভাবে উন্নত করতে পারেন।
Read more
