Google Charts একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজুয়ালাইজেশনের জন্য বেশ কিছু ভিন্ন ধরনের গ্রাফ সমর্থন করে, তবে Custom Geoms তৈরি করার জন্য গুগল চার্টে সরাসরি কোনো অপশন নেই। কিন্তু আপনি Google Charts এর মাধ্যমে Custom Geoms বা custom visualizations তৈরি করতে পারেন কিছু chart types কাস্টমাইজ এবং JavaScript ব্যবহার করে।
গুগল চার্টে Custom Geoms তৈরি করতে, আপনাকে Google Visualization API এর সাথে কাজ করতে হবে এবং JavaScript ব্যবহার করে কিছু custom rendering techniques প্রয়োগ করতে হবে। এতে আপনি ডেটার সাথে সম্পর্কিত নতুন geometries তৈরি করতে পারবেন।
এখানে আমরা কিভাবে Google Charts ব্যবহার করে Custom Geoms তৈরি করতে পারি এবং এগুলির মাধ্যমে নতুন ভিজ্যুয়াল উপাদান তৈরি করতে পারি, তা দেখব।
১. Google Charts API ব্যবহার করে Custom Geoms তৈরি করা
গুগল চার্টে Custom Geoms তৈরি করতে হলে প্রথমে কিছু basic chart types (যেমন scatter plots, line charts, bar charts) ব্যবহার করে তাদের কাস্টমাইজ করতে হবে এবং JavaScript ব্যবহার করে তাদের rendering করতে হবে।
Custom Scatter Plot Example:
এখানে আমরা একটি scatter plot তৈরি করবো এবং custom geometries প্রয়োগ করবো, যেখানে আমাদের সেলেক্টেড পয়েন্টগুলো কাস্টম আকৃতিতে উপস্থাপন হবে।
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[1, 3], [2, 4], [3, 9], [4, 16], [5, 25]
]);
var options = {
title: 'Custom Scatter Plot Example',
hAxis: {title: 'X Axis'},
vAxis: {title: 'Y Axis'},
series: {
0: {pointShape: 'diamond'} // Custom Geometry - diamond shape
},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
pointShape: 'diamond'ব্যবহার করা হয়েছে, যার মাধ্যমে custom geometry (diamond shape) তৈরি করা হয়েছে।- এই কোডে, আমরা ডেটার পয়েন্টগুলোকে একটি diamond shape এ উপস্থাপন করেছি।
২. Custom Geoms ব্যবহার করে বার চার্ট তৈরি করা
আপনি bar chart এর মতো সাধারণ গ্রাফে কাস্টম আকৃতির বা স্টাইলের geometries প্রয়োগ করতে পারেন। আমরা এখানে bar chart তৈরি করবো এবং custom shapes প্রয়োগ করবো।
Custom Bar Chart Example:
<!DOCTYPE html>
<html>
<head>
<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'],
['2017', 1000],
['2018', 1200],
['2019', 1300],
['2020', 1400]
]);
var options = {
title: 'Custom Bar Chart Example',
chartArea: {width: '50%'},
hAxis: {
title: 'Sales',
minValue: 0
},
vAxis: {
title: 'Year'
},
series: {
0: {
color: '#76A7FF',
pointShape: {type: 'star', sides: 5, dent: 0.5} // Custom star-shaped bars
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
pointShape: {type: 'star', sides: 5, dent: 0.5}ব্যবহার করা হয়েছে, যার মাধ্যমে বার গুলোর আকৃতি star shape এ পরিবর্তিত হয়েছে।- এই কাস্টম geometry ব্যবহারের মাধ্যমে, বার চার্টের প্রতিটি বারের আকৃতি একটি star-shaped হয়ে গেছে।
৩. Google Charts API-এর মাধ্যমে আরও কাস্টম Geometries তৈরি করা
গুগল চার্টে custom geometries তৈরির জন্য, Google Visualization API এর মধ্যে কাস্টম renderer বা shape renderer ব্যবহার করা হয়, যা আপনাকে line chart, scatter plot, pie chart, bubble chart ইত্যাদি ডেটা গ্রাফের আকৃতি বা চেহারা কাস্টমাইজ করতে সহায়ক।
Custom Line Chart Example:
<!DOCTYPE html>
<html>
<head>
<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(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[1, 3], [2, 5], [3, 7], [4, 9], [5, 11]
]);
var options = {
title: 'Custom Line Chart Example',
hAxis: {title: 'X Axis'},
vAxis: {title: 'Y Axis'},
series: {
0: {
lineWidth: 5,
pointSize: 10, // Custom size for points
pointShape: 'triangle' // Custom point shape (triangle)
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
pointShape: 'triangle'ব্যবহার করা হয়েছে, যাতে লাইনের পয়েন্টগুলোর আকৃতি একটি triangle হয়ে যায়।pointSize: 10এর মাধ্যমে পয়েন্টগুলোর আকার কাস্টমাইজ করা হয়েছে।
৪. Custom Geoms দিয়ে বিভিন্ন Chart Types কাস্টমাইজ করা
গুগল চার্টে বিভিন্ন ধরণের chart types কাস্টমাইজ করা সম্ভব, যেমন:
- Bubble Chart: বুদ্বুদ আকৃতির কাস্টম পয়েন্ট।
- Area Chart: নির্দিষ্ট অঞ্চল পছন্দমতো রঙ বা শেড দিয়ে কাস্টমাইজ করা।
সারমর্ম
গুগল চার্টে Custom Geoms তৈরি করতে Google Visualization API এবং JavaScript এর মাধ্যমে কাস্টম renderer ব্যবহার করতে হয়। এতে আপনি সাধারণভাবে ব্যবহৃত চার্টগুলোর (যেমন scatter plot, line chart, bar chart) পয়েন্টের আকৃতি, রঙ, সাইজ ইত্যাদি কাস্টমাইজ করতে পারেন। এই কাস্টম geometries ডেটা ভিজুয়ালাইজেশনকে আরও সুন্দর এবং প্রাসঙ্গিক করে তোলে।
Read more
