Big Data and Analytics Themes এবং Theme Customization গাইড ও নোট

Themes এবং Theme Customization গুগল চার্টে গ্রাফ বা চার্টের আউটলুক বা চেহারা পরিবর্তন করার জন্য ব্যবহৃত হয়। গুগল চার্টের বিভিন্ন ধরনের গ্রাফ যেমন bar chart, pie chart, line chart ইত্যাদির জন্য আপনি বিভিন্ন থিম ব্যবহার করতে পারেন, যা গ্রাফের ফন্ট, রঙ, আকার, বর্ডার ইত্যাদি কাস্টমাইজ করতে সহায়ক।

গুগল চার্টে থিম এবং থিম কাস্টমাইজেশনের মাধ্যমে গ্রাফের চেহারা এবং ভিজুয়াল প্রেজেন্টেশন খুবই প্রভাবিত হয়, যা বিশেষ করে ডেটার উপস্থাপনা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।

১. Google Charts Default Themes

গুগল চার্টে কিছু ডিফল্ট থিম রয়েছে, যেমন 'default', 'material', 'minimal', ইত্যাদি, যেগুলোর মাধ্যমে আপনি সহজেই আপনার চার্টের লুক পরিবর্তন করতে পারেন। ডিফল্ট থিম দিয়ে সাধারণ স্টাইলিং এর মাধ্যমে দ্রুত একটি গ্রাফ তৈরি করা যায়। তবে, আপনি যদি আপনার চার্টে আরও কাস্টমাইজড ডিজাইন চান, তবে থিম কাস্টমাইজেশন ব্যবহার করতে পারেন।

উদাহরণ: Material Theme ব্যবহার করে Bar Chart তৈরি

<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]
    ]);

    var options = {
      title: 'Sales by Product',
      theme: 'material'  // Using Material theme
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

এখানে, material থিম ব্যবহার করা হয়েছে, যা চার্টের জন্য আধুনিক এবং ক্লিন ডিজাইন সরবরাহ করে।

২. Theme Customization (থিম কাস্টমাইজেশন)

গুগল চার্টে থিম কাস্টমাইজ করে আপনি বিভিন্ন স্টাইলের সেটিংস যেমন ফন্ট, রঙ, লাইন স্টাইল, ব্যাকগ্রাউন্ড ইত্যাদি পরিবর্তন করতে পারেন। থিম কাস্টমাইজেশন এর মাধ্যমে আপনি আপনার চার্টের ডিজাইন একেবারে আপনার প্রয়োজন অনুসারে মানানসই করে নিতে পারেন।

উদাহরণ: Custom Theme কাস্টমাইজেশন

<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]
    ]);

    var options = {
      title: 'Sales by Product',
      backgroundColor: '#f2f2f2',  // Background color
      hAxis: {
        title: 'Products',
        titleTextStyle: {color: '#3e3e3e', fontSize: 16}  // Custom font style for x-axis
      },
      vAxis: {
        title: 'Sales',
        titleTextStyle: {color: '#3e3e3e', fontSize: 16},  // Custom font style for y-axis
        gridlines: {color: 'transparent'}  // Remove gridlines
      },
      colors: ['#4CAF50', '#FF9800', '#3F51B5'],  // Custom colors for bars
      fontName: 'Arial',  // Custom font
      fontSize: 14  // Font size
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

এখানে:

• backgroundColor: চার্টের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করা হয়েছে।
• hAxis এবং vAxis: x-axis এবং y-axis এর জন্য কাস্টম ফন্ট এবং টেক্সট স্টাইল সেট করা হয়েছে।
• colors: বিভিন্ন রঙ নির্ধারণ করা হয়েছে বার চার্টের জন্য।
• fontName এবং fontSize: ফন্ট এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।

৩. Using Google Charts Predefined Themes

গুগল চার্টে কিছু প্রিডিফাইন্ড থিম রয়েছে যেগুলির মাধ্যমে আপনি সহজেই ডিজাইন কাস্টমাইজ করতে পারেন। Material, Dark, এবং Standard থিম কিছু সাধারণ থিম যা গুগল চার্টের জন্য ডিফল্ট ভাবে দেয়া হয়।

Material Theme Example

<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 = google.visualization.arrayToDataTable([
      ['Month', 'Sales'],
      ['January', 1000],
      ['February', 1170],
      ['March', 660],
      ['April', 1030]
    ]);

    var options = {
      title: 'Monthly Sales',
      theme: 'material',  // Predefined theme
      hAxis: {title: 'Month'},
      vAxis: {title: 'Sales'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

এখানে material থিম ব্যবহার করা হয়েছে, যা গুগল দ্বারা তৈরি আধুনিক ডিজাইনের থিম।

৪. Customizing Tooltip (টুলটিপ কাস্টমাইজেশন)

গুগল চার্টে টুলটিপ কাস্টমাইজ করেও আপনি গ্রাফের উপস্থাপনা আরও সুন্দর করতে পারেন। টুলটিপ হচ্ছে চার্টের পয়েন্টে মাউস রাখলে যে তথ্যটি প্রদর্শিত হয়, তা।

উদাহরণ: Custom Tooltip

<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 = google.visualization.arrayToDataTable([
      ['Month', 'Sales'],
      ['January', 1000],
      ['February', 1170],
      ['March', 660],
      ['April', 1030]
    ]);

    var options = {
      title: 'Monthly Sales',
      tooltip: { trigger: 'focus', textStyle: { color: '#FF6347', fontSize: 14 }, isHtml: true }  // Custom tooltip style
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

এখানে tooltip এর জন্য কাস্টম টেক্সট স্টাইল, রঙ এবং ফন্ট সাইজ সেট করা হয়েছে।

সারমর্ম

গুগল চার্টে Themes এবং Theme Customization এর মাধ্যমে আপনি আপনার চার্টের লুক এবং ফিল কাস্টমাইজ করতে পারেন। আপনি predefined themes যেমন Material, Dark, Standard ব্যবহার করতে পারেন অথবা custom styles এবং font সহ চার্ট কাস্টমাইজ করতে পারেন। এটি আপনার ডেটা ভিজুয়ালাইজেশনের উপস্থাপনাকে আরও সুন্দর এবং প্রফেশনাল করে তোলে। Tooltip এবং অন্যান্য কাস্টম অপশনগুলির মাধ্যমে চার্টে আরও ইন্টারেকটিভ এবং প্রাসঙ্গিক তথ্য যোগ করা সম্ভব।

ggplot2 এবং গুগল চার্ট উভয়ই ডেটা ভিজুয়ালাইজেশন টুলস, তবে তাদের ব্যবহারের পদ্ধতি এবং বৈশিষ্ট্য কিছুটা আলাদা। ggplot2-এ বিভিন্ন Built-in Themes রয়েছে যা গ্রাফের চেহারা এবং ডিজাইন কাস্টমাইজ করার জন্য ব্যবহৃত হয়। এর মধ্যে theme_minimal(), theme_classic(), theme_light(), theme_bw() ইত্যাদি জনপ্রিয়। এগুলো গ্রাফের ব্যাকগ্রাউন্ড, ফন্ট, রঙ এবং অন্যান্য উপাদান সহজে পরিবর্তন করতে সহায়ক।

গুগল চার্ট-এ সরাসরি ggplot2-এর মতো বিল্ট-ইন থিম নেই, তবে কিছু কাস্টমাইজেশন অপশন রয়েছে যা গ্রাফের ভিজ্যুয়াল স্টাইল এবং উপস্থাপনাকে পরিবর্তন করতে সাহায্য করে। গুগল চার্টের মধ্যে থিম কাস্টমাইজেশনের জন্য options ফাংশন এবং chartArea, hAxis, vAxis ইত্যাদি অপশন ব্যবহার করা হয়।

এখানে আমরা ggplot2 এর Built-in Themes এবং গুগল চার্ট-এ থিম কাস্টমাইজেশন নিয়ে আলোচনা করব।

ggplot2 এর Built-in Themes

ggplot2-এ বেশ কয়েকটি Built-in Themes রয়েছে, যা গ্রাফের চেহারা এবং ডিজাইন সহজে কাস্টমাইজ করতে ব্যবহৃত হয়। এই থিমগুলো সাধারণত গ্রাফের ব্যাকগ্রাউন্ড, ফন্ট, গ্রিডলাইন, অক্ষের লেবেল, রঙ ইত্যাদি নিয়ন্ত্রণ করে।

১. theme_minimal()

এটি একটি মিনিমালিস্টিক থিম, যেখানে শুধুমাত্র প্রয়োজনীয় উপাদানগুলো প্রদর্শিত হয়, এবং ব্যাকগ্রাউন্ড সাদাসিধা থাকে।

উদাহরণ:

ggplot(mtcars, aes(x = wt, y = mpg)) + 
  geom_point() + 
  theme_minimal() + 
  labs(title = "Minimal Theme Example")

২. theme_classic()

এটি একটি ক্লাসিক থিম, যেখানে সাদা ব্যাকগ্রাউন্ড এবং স্পষ্ট গ্রিডলাইন থাকে। এটি গ্রাফকে আরও পরিষ্কার এবং স্ট্যান্ডার্ড আউটপুট প্রদান করে।

উদাহরণ:

ggplot(mtcars, aes(x = wt, y = mpg)) + 
  geom_point() + 
  theme_classic() + 
  labs(title = "Classic Theme Example")

৩. theme_light()

এটি একটি হালকা থিম, যেখানে ব্যাকগ্রাউন্ড হালকা থাকে এবং গ্রিডলাইনগুলো সূক্ষ্মভাবে প্রদর্শিত হয়।

উদাহরণ:

ggplot(mtcars, aes(x = wt, y = mpg)) + 
  geom_point() + 
  theme_light() + 
  labs(title = "Light Theme Example")

৪. theme_bw()

এটি একটি Black & White থিম, যেখানে সাদা ব্যাকগ্রাউন্ড এবং কালো অক্ষরের কনট্রাস্ট থাকে। এটি সাধারণত প্রফেশনাল এবং প্রিন্ট আউটপুটের জন্য উপযুক্ত।

উদাহরণ:

ggplot(mtcars, aes(x = wt, y = mpg)) + 
  geom_point() + 
  theme_bw() + 
  labs(title = "Black and White Theme Example")

গুগল চার্টে থিম কাস্টমাইজেশন

গুগল চার্টে ggplot2-এর মতো সরাসরি থিমগুলো নেই, তবে কিছু কাস্টমাইজেশন অপশন রয়েছে যা গ্রাফের ভিজ্যুয়াল স্টাইল পরিবর্তন করতে সহায়ক। গুগল চার্টে থিম কাস্টমাইজেশনের জন্য options ফাংশন ব্যবহার করা হয়, যা বিভিন্ন উপাদান কাস্টমাইজ করতে সাহায্য করে।

গুগল চার্টে থিম কাস্টমাইজ করার কিছু গুরুত্বপূর্ণ অপশন:

1. chartArea: এটি গ্রাফের মূল এলাকাটি কাস্টমাইজ করতে ব্যবহৃত হয়, যেমন ব্যাকগ্রাউন্ড রং এবং সীমানা।
2. hAxis এবং vAxis: এগুলো এক্স এবং ওয়াই অক্ষের কাস্টমাইজেশন করে, যেমন অক্ষের রঙ, ফন্ট এবং লেবেল স্টাইল।
3. legend: এটি লেজেন্ডের কাস্টমাইজেশন জন্য ব্যবহৃত হয়, যেমন লেজেন্ডের অবস্থান, ফন্ট এবং রঙ।

উদাহরণ: গুগল চার্টে থিম কাস্টমাইজেশন

<!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 = google.visualization.arrayToDataTable([
          ['Year', 'Sales'],
          ['2016', 1000],
          ['2017', 1170],
          ['2018', 1250],
          ['2019', 1530]
        ]);

        var options = {
          title: 'Company Performance',
          chartArea: {width: '80%', backgroundColor: '#f4f4f4'},
          hAxis: {
            title: 'Year',
            textStyle: {color: 'blue', fontSize: 14},
            titleTextStyle: {color: 'green', fontSize: 16}
          },
          vAxis: {
            title: 'Sales (in USD)',
            textStyle: {color: 'red', fontSize: 12},
            titleTextStyle: {color: 'purple', fontSize: 14}
          },
          legend: {position: 'top', textStyle: {color: 'black', fontSize: 12}},
          backgroundColor: '#f5f5f5'
        };

        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>

এখানে:

• chartArea: গ্রাফের মূল এলাকা এবং ব্যাকগ্রাউন্ড কাস্টমাইজ করা হয়েছে।
• hAxis এবং vAxis: অক্ষের রঙ এবং ফন্ট কাস্টমাইজ করা হয়েছে।
• legend: লেজেন্ডের অবস্থান এবং স্টাইল পরিবর্তন করা হয়েছে।
• backgroundColor: চার্টের ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করা হয়েছে।

সারমর্ম

ggplot2-এ Built-in Themes (যেমন theme_minimal(), theme_classic(), theme_light(), theme_bw()) ব্যবহার করে আপনি গ্রাফের ডিজাইন সহজে কাস্টমাইজ করতে পারেন। এর মধ্যে theme_minimal() একটি মিনিমালিস্টিক ডিজাইন, theme_classic() ক্লাসিক ডিজাইন, theme_light() হালকা ডিজাইন এবং theme_bw() একটি ব্ল্যাক অ্যান্ড হোয়াইট ডিজাইন প্রদান করে। গুগল চার্টে সরাসরি ggplot2-এর মতো বিল্ট-ইন থিম না থাকলেও, আপনি options ব্যবহার করে গ্রাফের বিভিন্ন উপাদান যেমন অক্ষ, ব্যাকগ্রাউন্ড, লেজেন্ড ইত্যাদি কাস্টমাইজ করতে পারেন, যা গ্রাফের ভিজ্যুয়াল উপস্থাপনা উন্নত করে।

ggplot2-এ theme() ফাংশন ব্যবহার করে গ্রাফের কাস্টম থিম তৈরি করা যায়, যেখানে গ্রাফের রং, ফন্ট, লেআউট ইত্যাদি কাস্টমাইজ করা যায়। গুগল চার্টে Theme ফাংশন সরাসরি ব্যবহৃত না হলেও, আপনি গুগল চার্টের ভিজ্যুয়াল উপাদানগুলির কাস্টমাইজেশন করতে options অবজেক্ট ব্যবহার করে থিম তৈরি করতে পারেন। গুগল চার্টে options অবজেক্টের মাধ্যমে আপনি থিম কাস্টমাইজ করতে পারেন, যেখানে শিরোনাম, অক্ষের স্টাইল, রঙ, ফন্ট, গ্রিড এবং অন্যান্য ভিজ্যুয়াল উপাদান নির্ধারণ করা যায়।

এখানে, গুগল চার্টে custom themes তৈরি করার জন্য কিছু গুরুত্বপূর্ণ কাস্টমাইজেশন অপশন এবং থিম তৈরির পদ্ধতি আলোচনা করা হবে।

১. গুগল চার্টের options অবজেক্টের মাধ্যমে কাস্টম থিম তৈরি

গুগল চার্টে options অবজেক্টের মাধ্যমে গ্রাফের শিরোনাম, অক্ষের রঙ, ফন্ট, এবং অন্যান্য স্টাইল কাস্টমাইজ করা যায়। নিচে বিভিন্ন কাস্টম থিম তৈরির উপায় দেখানো হয়েছে।

উদাহরণ: Scatter Chart with Custom Theme

<!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 = google.visualization.arrayToDataTable([
          ['Weight', 'Mileage'],
          [2.620, 21.0],
          [2.875, 22.8],
          [3.215, 18.7],
          [3.440, 17.3],
          [3.570, 15.0]
        ]);

        var options = {
          title: 'Weight vs Mileage',
          hAxis: {
            title: 'Weight',
            titleTextStyle: {color: 'blue', fontSize: 16}, // Custom X-axis title style
            gridlines: {color: 'gray', count: 4} // Custom gridlines
          },
          vAxis: {
            title: 'Mileage',
            titleTextStyle: {color: 'green', fontSize: 16}, // Custom Y-axis title style
            gridlines: {color: 'gray', count: 4} // Custom gridlines
          },
          backgroundColor: '#f1f1f1', // Custom background color
          legend: {position: 'top', textStyle: {fontSize: 12, color: 'red'}}, // Custom legend style
          colors: ['#76A7FF'] // Custom point color
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="scatter_chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

এখানে:

• hAxis এবং vAxis এর শিরোনাম স্টাইল কাস্টমাইজ করা হয়েছে (রঙ, ফন্ট সাইজ)।
• gridlines এর রঙ এবং সংখ্যা কাস্টমাইজ করা হয়েছে।
• backgroundColor ব্যবহার করে গ্রাফের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করা হয়েছে।
• legend এর স্টাইল এবং অবস্থান কাস্টমাইজ করা হয়েছে।
• colors এর মাধ্যমে পয়েন্টের রঙ পরিবর্তন করা হয়েছে।

২. গুগল চার্টে Theme কাস্টমাইজেশনের মাধ্যমে আরও উন্নত থিম তৈরি

গুগল চার্টে আরও বেশি কাস্টম থিম তৈরি করতে, আপনি chart area, title, axis, এবং legend সহ অনেক ভিজ্যুয়াল উপাদান কাস্টমাইজ করতে পারেন। যেমন:

উদাহরণ: Column Chart with Custom Theme

<!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]
        ]);

        var options = {
          title: 'Product Sales',
          chartArea: {
            backgroundColor: '#f4f4f4', // Custom chart area background color
            width: '70%', // Adjust chart area width
            height: '70%' // Adjust chart area height
          },
          hAxis: {
            title: 'Products',
            titleTextStyle: {color: '#5A5A5A', fontSize: 14}, // Custom X-axis title style
            textStyle: {color: '#8B8B8B'}, // Custom X-axis text style
            gridlines: {color: '#e0e0e0'} // Custom gridline color
          },
          vAxis: {
            title: 'Sales',
            titleTextStyle: {color: '#5A5A5A', fontSize: 14}, // Custom Y-axis title style
            textStyle: {color: '#8B8B8B'}, // Custom Y-axis text style
            gridlines: {color: '#e0e0e0'} // Custom gridline color
          },
          backgroundColor: '#ffffff', // Custom background color
          legend: {
            position: 'top', // Position of legend
            textStyle: {fontSize: 12, color: '#4E4E4E'} // Custom legend text style
          },
          colors: ['#76A7FF', '#FF7043', '#4CAF50'] // Custom colors for columns
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="column_chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

এখানে:

• chartArea: কাস্টম চার্ট এরিয়া ব্যাকগ্রাউন্ড রঙ এবং আকার।
• hAxis এবং vAxis: অক্ষের রঙ, ফন্ট সাইজ এবং গ্রিডলাইন কাস্টমাইজেশন।
• legend: লেজেন্ডের অবস্থান এবং টেক্সট স্টাইল কাস্টমাইজেশন।
• colors: কলামের রঙ কাস্টমাইজ করা হয়েছে।

৩. গুগল চার্টের থিম কাস্টমাইজেশনের জন্য কিছু অতিরিক্ত অপশন

• fontName: গ্রাফের ফন্ট নাম কাস্টমাইজ করা।
• fontSize: ফন্ট সাইজ কাস্টমাইজ করা।
• lineWidth: লাইন ওয়াইথ কাস্টমাইজ করা।
• titleTextStyle: শিরোনামের ফন্ট এবং রঙ কাস্টমাইজ করা।
• axisTextStyle: অক্ষের টেক্সটের ফন্ট এবং রঙ কাস্টমাইজ করা।

উদাহরণ: Customizing Font and Title Styles

var options = {
  title: 'Product Sales',
  titleTextStyle: {
    fontName: 'Arial', // Custom font name
    fontSize: 16, // Font size for title
    bold: true, // Bold title
    color: 'green' // Title color
  },
  hAxis: {
    title: 'Products',
    titleTextStyle: {
      fontSize: 14,
      color: 'blue',
      italic: true // Italic X-axis title
    }
  },
  vAxis: {
    title: 'Sales',
    titleTextStyle: {
      fontSize: 14,
      color: 'blue',
      italic: true // Italic Y-axis title
    }
  },
  backgroundColor: '#f0f0f0', // Background color
  colors: ['#8E44AD', '#F39C12'] // Custom bar colors
};

সারমর্ম

গুগল চার্টে options অবজেক্টের মাধ্যমে আপনি গ্রাফের বিভিন্ন ভিজ্যুয়াল উপাদান কাস্টমাইজ করে একটি custom theme তৈরি করতে পারেন। এখানে আপনি শিরোনাম, অক্ষ, লেজেন্ড, রঙ এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারবেন। ggplot2-এ যেমন theme() ফাংশন ব্যবহার করে কাস্টম থিম তৈরি করা যায়, গুগল চার্টেও options ব্যবহার করে থিম কাস্টমাইজ করা যায়, যা ডেটা ভিজুয়ালাইজেশনকে আরও পরিষ্কার, আকর্ষণীয় এবং তথ্যপূর্ণ করে তোলে।

গুগল চার্টে ডেটার উপস্থাপনা শুধুমাত্র তথ্য প্রদর্শন করা নয়, বরং গ্রাফের চেহারা এবং ভিজ্যুয়াল উপাদানগুলোকেও কাস্টমাইজ করা খুবই গুরুত্বপূর্ণ। আপনি Background, Gridlines, এবং Margins কাস্টমাইজ করে আপনার গ্রাফের ডিজাইন আরও আকর্ষণীয় ও স্পষ্ট করতে পারেন। গুগল চার্টে এগুলো কাস্টমাইজ করার জন্য বিভিন্ন অপশন রয়েছে।

এখানে আমরা গুগল চার্টে Background, Gridlines, এবং Margins কাস্টমাইজ করার উপায় নিয়ে বিস্তারিত আলোচনা করব।

১. Background কাস্টমাইজ করা

গুগল চার্টে গ্রাফের Background পরিবর্তন করতে chartArea এবং backgroundColor অপশন ব্যবহার করা হয়। আপনি পুরো চার্টের পটভূমি বা কেবলমাত্র গ্রাফের এরিয়া (chart area) এর পটভূমি পরিবর্তন করতে পারবেন।

উদাহরণ: Background কাস্টমাইজ করা

<!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', 100],
          ['Product B', 150],
          ['Product C', 120],
          ['Product D', 130]
        ]);

        var options = {
          title: 'Product Sales',
          backgroundColor: '#f0f0f0', // Whole chart background color
          chartArea: {
            backgroundColor: '#ffffff', // Chart area background color
            width: '80%',
            height: '70%'
          },
          hAxis: {
            title: 'Products'
          },
          vAxis: {
            title: '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>

এখানে:

• backgroundColor: চার্টের পুরো পটভূমি রঙ পরিবর্তন করা হয়েছে।
• chartArea.backgroundColor: কেবল গ্রাফের পটভূমি পরিবর্তন করা হয়েছে।

২. Gridlines কাস্টমাইজ করা

Gridlines হল অক্ষের উপর স্নাতক (horizontal) বা উল্লম্ব (vertical) রেখাগুলি যা ডেটার সঠিকতা দেখায়। গুগল চার্টে আপনি gridlines কাস্টমাইজ করতে পারেন, যেমন রঙ, প্রস্থ, এবং দৃশ্যমানতা (visibility) নিয়ন্ত্রণ করা।

উদাহরণ: Gridlines কাস্টমাইজ করা

<!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', 100],
          ['Product B', 150],
          ['Product C', 120],
          ['Product D', 130]
        ]);

        var options = {
          title: 'Product Sales',
          hAxis: {
            title: 'Products',
            gridlines: {
              color: '#ccc', // Gridline color
              count: 4 // Number of gridlines
            }
          },
          vAxis: {
            title: 'Sales',
            gridlines: {
              color: '#ccc', // Gridline color
              count: 5 // Number of gridlines
            }
          }
        };

        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>

এখানে:

• gridlines.color: গ্রিডলাইনগুলির রঙ পরিবর্তন করা হয়েছে।
• gridlines.count: গ্রিডলাইন সংখ্যা নির্ধারণ করা হয়েছে।

৩. Margins কাস্টমাইজ করা

Margins হল চার্টের বাইরের স্থান, যা গ্রাফের আশেপাশে থাকে। আপনি গুগল চার্টে margins কাস্টমাইজ করতে পারেন, যেমন চার্টের শিরোনাম, অক্ষের লেবেল, বা ডেটার আশেপাশে কতটা স্পেস থাকবে তা নির্ধারণ করতে।

উদাহরণ: Margins কাস্টমাইজ করা

<!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', 100],
          ['Product B', 150],
          ['Product C', 120],
          ['Product D', 130]
        ]);

        var options = {
          title: 'Product Sales',
          chartArea: {
            left: 50,    // Left margin
            top: 50,     // Top margin
            right: 50,   // Right margin
            bottom: 50   // Bottom margin
          },
          hAxis: {
            title: 'Products'
          },
          vAxis: {
            title: '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>

এখানে:

• chartArea.left, chartArea.top, chartArea.right, chartArea.bottom: গ্রাফের চারপাশের মার্জিন কাস্টমাইজ করা হয়েছে। এটি গ্রাফের আশেপাশে কতটা ফাঁকা জায়গা থাকবে তা নির্ধারণ করে।

সারমর্ম

গুগল চার্টে Background, Gridlines, এবং Margins কাস্টমাইজ করে আপনি আপনার চার্টের ডিজাইন এবং ভিজ্যুয়াল উপস্থাপনাকে আরও পরিপাটি এবং প্রাসঙ্গিক করতে পারেন। আপনি backgroundColor এবং chartArea এর মাধ্যমে পটভূমি কাস্টমাইজ করতে পারেন, gridlines এর মাধ্যমে গ্রিডলাইন রঙ ও সংখ্যা নিয়ন্ত্রণ করতে পারেন এবং margins এর মাধ্যমে চার্টের চারপাশের ফাঁকা জায়গা নির্ধারণ করতে পারেন। এসব কাস্টমাইজেশন দ্বারা আপনার ডেটা ভিজুয়ালাইজেশন হবে আরও আকর্ষণীয় এবং পাঠযোগ্য।

গুগল চার্ট (Google Charts) একটি শক্তিশালী ভিজুয়ালাইজেশন টুল যা গ্রাফ এবং চার্টের উপস্থাপনায় কাস্টমাইজেশন এবং স্টাইলিং প্রদান করে। আপনি custom fonts এবং colors ব্যবহার করে গুগল চার্টের চেহারা সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। এই বৈশিষ্ট্যগুলি ডেটার উপস্থাপনাকে আরও সুন্দর এবং গ্রাফের সাথে সামঞ্জস্যপূর্ণ করতে সাহায্য করে।

এখানে, আমরা গুগল চার্টে কাস্টম ফন্ট এবং রঙ ব্যবহার করার প্রক্রিয়া সম্পর্কে বিস্তারিত আলোচনা করব।

Custom Fonts ব্যবহার করা

গুগল চার্টে Custom Fonts ব্যবহার করতে আপনি options অবজেক্টের মাধ্যমে fontName এবং fontSize নির্ধারণ করতে পারেন। আপনি নিজের পছন্দের ফন্ট ব্যবহার করতে চাইলে, প্রথমে ওই ফন্টটি আপনার ওয়েবপেজে লোড করতে হবে (যেমন Google Fonts থেকে) এবং তারপর সেই ফন্টটি চার্টে প্রয়োগ করতে হবে।

উদাহরণ: Google Charts-এ Custom Font ব্যবহার করা

<!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', 1300],
          ['Product D', 1400]
        ]);

        var options = {
          title: 'Sales of Products',
          hAxis: {
            title: 'Product',
            fontName: 'Arial', // Custom font for x-axis
            fontSize: 14
          },
          vAxis: {
            title: 'Sales',
            fontName: 'Courier New', // Custom font for y-axis
            fontSize: 12
          },
          chartArea: {
            left: 50,
            top: 30,
            width: '80%',
            height: '70%'
          }
        };

        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>

এখানে:

• fontName ব্যবহার করে x-axis এবং y-axis এর জন্য কাস্টম ফন্ট যোগ করা হয়েছে।
• Arial এবং Courier New দুটি কাস্টম ফন্ট ব্যবহার করা হয়েছে।

Google Fonts ব্যবহার:

যদি আপনি গুগল ফন্ট (Google Fonts) ব্যবহার করতে চান, তাহলে আপনাকে প্রথমে HTML হেডারে সেই ফন্ট লোড করতে হবে।

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

এটি আপনার পছন্দের ফন্ট, যেমন Roboto ব্যবহার করতে সাহায্য করবে।

Custom Colors ব্যবহার করা

গুগল চার্টে আপনি Custom Colors ব্যবহার করতে পারেন, যা চার্টের বিভিন্ন উপাদানকে বিশেষভাবে স্টাইল করতে সাহায্য করে। আপনি colors অপশন ব্যবহার করে চার্টের পটভূমি, বার, পয়েন্ট এবং লাইন এর রঙ কাস্টমাইজ করতে পারেন।

উদাহরণ: Google Charts-এ Custom 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', 1300],
          ['Product D', 1400]
        ]);

        var options = {
          title: 'Sales of Products',
          hAxis: {title: 'Product'},
          vAxis: {title: 'Sales'},
          chartArea: {
            left: 50,
            top: 30,
            width: '80%',
            height: '70%'
          },
          colors: ['#FF5733', '#33FF57', '#3357FF', '#FF33A1'], // Custom colors 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>

এখানে:

• colors ব্যবহার করে কাস্টম রঙ ব্যবহার করা হয়েছে।
• প্রতিটি বার এর জন্য আলাদা রঙ নির্ধারণ করা হয়েছে (#FF5733, #33FF57, #3357FF, #FF33A1)।

অন্যান্য কাস্টমাইজেশন:

গুগল চার্টে পটভূমির রঙ (background color), এনোটেশন রঙ, লাইন রঙ, এবং অন্যান্য অনেক উপাদানের রঙ কাস্টমাইজ করা যায়।

var options = {
  backgroundColor: '#f1f1f1', // Background color
  titleTextStyle: {
    color: 'black', // Title color
    fontSize: 18, // Title font size
    fontName: 'Arial'
  },
  hAxis: {
    title: 'Product',
    titleTextStyle: {
      color: 'blue' // Axis title color
    }
  }
};

সারমর্ম

গুগল চার্টে Custom Fonts এবং Colors ব্যবহার করে আপনি আপনার চার্টকে আরও ব্যক্তিগত এবং সুন্দর করে তুলতে পারেন। Font এবং Color কাস্টমাইজেশন ব্যবহার করে আপনি চার্টের বিভিন্ন উপাদান যেমন অক্ষের নাম, শিরোনাম, এবং ডেটা বারের রঙ পরিবর্তন করতে পারেন। এর মাধ্যমে, আপনি একটি নির্দিষ্ট ব্র্যান্ডিং বা থিম অনুসরণ করে আপনার ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।

• Custom Fonts ব্যবহার করতে আপনি fontName এবং fontSize প্যারামিটার ব্যবহার করতে পারেন।
• Custom Colors ব্যবহার করতে আপনি colors বা অন্য স্টাইল অপশন ব্যবহার করে চার্টের বিভিন্ন অংশের রঙ পরিবর্তন করতে পারেন।