গুগল চার্টে Color Palettes ব্যবহৃত হয় গ্রাফের উপাদানগুলোর (যেমন বার, পয়েন্ট, লাইন ইত্যাদি) রঙ নিয়ন্ত্রণ করতে। ডিফল্টভাবে গুগল চার্টে কিছু default color palettes রয়েছে যা বিভিন্ন ধরনের গ্রাফের জন্য ব্যবহার করা যেতে পারে, তবে আপনি চাইলে custom colors ব্যবহার করে নিজস্ব রঙের সেটও নির্ধারণ করতে পারেন।
এই বৈশিষ্ট্যটি ডেটা ভিজুয়ালাইজেশনের দৃশ্যমানতা এবং পাঠযোগ্যতা উন্নত করতে সাহায্য করে, কারণ সঠিক রঙের নির্বাচন ডেটার তুলনা সহজ করে এবং গ্রাফকে আরও আকর্ষণীয় করে তোলে।
১. Google Charts Default Color Palettes
গুগল চার্টে কিছু ডিফল্ট color palettes প্রদান করা হয়েছে, যা বিভিন্ন ধরনের ডেটা ভিজুয়ালাইজেশনে স্বয়ংক্রিয়ভাবে রঙ নির্ধারণ করতে সাহায্য করে। গুগল চার্টের ডিফল্ট color palettes সাধারণত Material Design এর উপর ভিত্তি করে তৈরি এবং এদের মধ্যে বিভিন্ন রঙের কম্বিনেশন রয়েছে।
উদাহরণ: Default Color Palettes (Bar Chart)
<!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([
['Product', 'Sales'],
['Product A', 1000],
['Product B', 1200],
['Product C', 1500],
['Product D', 1300]
]);
var options = {
title: 'Product Sales',
// Google Charts uses default color palette for 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>
এখানে, গুগল চার্টের ডিফল্ট রঙ ব্যবহার করা হয়েছে, যা সাধারণত Material Design এর রঙ প্যালেট থেকে আসে।
২. Customizing Colors (কাস্টম রঙ ব্যবহার করা)
আপনি চাইলে নিজের পছন্দ অনুযায়ী কাস্টম রঙ ব্যবহার করতে পারেন। গুগল চার্টে গ্রাফের রঙ কাস্টমাইজ করতে colors অপশন ব্যবহার করা হয়। এই অপশনের মাধ্যমে আপনি একাধিক রঙ ব্যবহার করে গ্রাফের প্রতিটি উপাদান বা সিরিজের রঙ নির্ধারণ করতে পারেন।
উদাহরণ: Custom Color Palettes (Bar Chart)
<!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([
['Product', 'Sales'],
['Product A', 1000],
['Product B', 1200],
['Product C', 1500],
['Product D', 1300]
]);
var options = {
title: 'Product Sales',
colors: ['#FF6347', '#4CAF50', '#FF9800', '#3F51B5'] // Custom color palette
};
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>
এখানে:
- colors এর মাধ্যমে কাস্টম রঙের প্যালেট ব্যবহার করা হয়েছে, যেখানে প্রতি বার জন্য আলাদা রঙ নির্ধারণ করা হয়েছে।
৩. Using Named Colors (নামকরা রঙ ব্যবহার করা)
গুগল চার্টে আপনি named colors যেমন red, green, blue, yellow ইত্যাদি ব্যবহার করতে পারেন। এছাড়া আপনি HEX অথবা RGB কোডও ব্যবহার করতে পারেন।
উদাহরণ: Named Colors
<!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([
['Product', 'Sales'],
['Product A', 1000],
['Product B', 1200],
['Product C', 1500],
['Product D', 1300]
]);
var options = {
title: 'Product Sales',
colors: ['green', 'blue', 'orange', 'red'] // Named colors
};
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>
এখানে:
- green, blue, orange, red নামকরা রঙগুলো ব্যবহার করা হয়েছে।
৪. Using RGB or HEX Colors
গুগল চার্টে আপনি RGB অথবা HEX রঙও ব্যবহার করতে পারেন। এটি রঙ নির্ধারণের আরও একটি শক্তিশালী উপায়।
উদাহরণ: RGB or HEX Colors
<!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([
['Product', 'Sales'],
['Product A', 1000],
['Product B', 1200],
['Product C', 1500],
['Product D', 1300]
]);
var options = {
title: 'Product Sales',
colors: ['#FF5733', '#33FF57', 'rgb(255, 99, 132)', 'rgb(54, 162, 235)'] // HEX and RGB colors
};
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>
এখানে:
- HEX এবং RGB রঙের কোড ব্যবহার করে বার চার্টের প্রতিটি সিরিজের জন্য রঙ নির্ধারণ করা হয়েছে।
৫. Dynamic Color Customization Based on Data
আপনি চাইলে ডেটার মান অনুযায়ী রঙ নির্ধারণ করতে পারেন। এর মাধ্যমে ডেটার সিরিজের জন্য স্বয়ংক্রিয়ভাবে রঙ নির্বাচন করা সম্ভব।
উদাহরণ: Dynamic Color Customization
<!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([
['Product', 'Sales'],
['Product A', 1000],
['Product B', 1200],
['Product C', 1500],
['Product D', 1300]
]);
var options = {
title: 'Product Sales',
colors: function (row, dataTable) {
var sales = dataTable.getValue(row, 1);
if (sales > 1200) {
return '#FF5733'; // Red for higher sales
} else {
return '#33FF57'; // Green for lower sales
}
}
};
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>
এখানে:
- Dynamic color ব্যবহার করে, ডেটার মান অনুসারে রঙ পরিবর্তন করা হয়েছে।
সারমর্ম
গুগল চার্টে Default Color Palettes এবং Customization এর মাধ্যমে আপনি গ্রাফের রঙ খুব সহজেই কাস্টমাইজ করতে পারেন। আপনি HEX এবং RGB কোড ব্যবহার করে, বা named colors দিয়ে রঙ নির্ধারণ করতে পারবেন। এছাড়া, আপনি dynamic color customization ব্যবহার করে ডেটার মান অনুযায়ী রঙ নির্বাচনও করতে পারেন, যা ডেটা ভিজুয়ালাইজেশনের কার্যকারিতা এবং পাঠযোগ্যতা বাড়ায়।
Read more
