Big Data and Analytics Multiple Line Series Chart তৈরি করা গাইড ও নোট

302

Google Charts এর Multiple Line Series Chart ডেটার মধ্যে বিভিন্ন সিরিজের প্রবণতা বা সম্পর্ক দেখানোর জন্য একটি শক্তিশালী উপায়। এটি সাধারণত ব্যবহৃত হয় যখন একাধিক ভেরিয়েবল বা ডেটা সেটের তুলনা করতে হয়। আপনি একাধিক লাইন চার্ট ব্যবহার করে বিভিন্ন সিরিজের মধ্যে তুলনা এবং বিশ্লেষণ করতে পারেন।

নিচে Multiple Line Series Chart তৈরির উদাহরণ দেওয়া হলো:


Multiple Line Series Chart তৈরি করার উদাহরণ

ধরা যাক, আমরা একটি কোম্পানির Sales, Profit, এবং Expenses ডেটা দেখাতে চাই এবং তাদের বিভিন্ন বছরের মধ্যে প্রবণতা তুলনা করতে চাই। এখানে আমরা তিনটি লাইন সিরিজ ব্যবহার করবো: Sales, Profit, এবং Expenses

উদাহরণ কোড:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Line Series 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(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Year');
      data.addColumn('number', 'Sales');
      data.addColumn('number', 'Profit');
      data.addColumn('number', 'Expenses');

      // ডেটা যোগ করা
      data.addRows([
        [2019, 1000, 400, 200],
        [2020, 1170, 460, 250],
        [2021, 660, 1120, 300],
        [2022, 1030, 540, 350]
      ]);

      var options = {
        title: 'Company Performance',
        hAxis: {
          title: 'Year'
        },
        vAxis: {
          title: 'Amount (in USD)'
        },
        series: {
          0: { color: 'blue' }, // Sales সিরিজের জন্য রঙ
          1: { color: 'green' }, // Profit সিরিজের জন্য রঙ
          2: { color: 'red' }    // Expenses সিরিজের জন্য রঙ
        },
        legend: { position: 'bottom' }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <h2>Multiple Line Series Chart Example</h2>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

কোড ব্যাখ্যা

  1. ডেটা প্রস্তুত করা:

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Profit');
    data.addColumn('number', 'Expenses');
    

    এখানে আমরা একটি DataTable তৈরি করছি, যেখানে তিনটি ডেটা সিরিজের জন্য কলাম তৈরি করেছি: Sales, Profit, এবং Expenses। প্রথম কলামটি হলো Year, যা X-অ্যাক্সিস হিসেবে কাজ করবে।

  2. ডেটা যোগ করা:

    data.addRows([
      [2019, 1000, 400, 200],
      [2020, 1170, 460, 250],
      [2021, 660, 1120, 300],
      [2022, 1030, 540, 350]
    ]);
    

    এখানে আমরা ডেটা অ্যারে হিসেবে তিনটি সিরিজের (Sales, Profit, Expenses) মান যোগ করেছি, যেখানে প্রতিটি সিরিজের জন্য যথাযথ মান ২০১৯ থেকে ২০২২ সাল পর্যন্ত দেওয়া হয়েছে।

  3. কাস্টমাইজেশন অপশন:

    var options = {
      title: 'Company Performance',
      hAxis: { title: 'Year' },
      vAxis: { title: 'Amount (in USD)' },
      series: {
        0: { color: 'blue' }, // Sales সিরিজের জন্য রঙ
        1: { color: 'green' }, // Profit সিরিজের জন্য রঙ
        2: { color: 'red' }    // Expenses সিরিজের জন্য রঙ
      },
      legend: { position: 'bottom' }
    };
    
    • title: চার্টের শিরোনাম দেওয়া হয়েছে Company Performance
    • hAxis: X-অ্যাক্সিসের শিরোনাম Year
    • vAxis: Y-অ্যাক্সিসের শিরোনাম Amount (in USD)
    • series: প্রতিটি সিরিজের জন্য আলাদা রঙ নির্ধারণ করা হয়েছে, যেমন Sales সিরিজের জন্য blue, Profit সিরিজের জন্য green, এবং Expenses সিরিজের জন্য red
  4. চার্ট ড্র করা:

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    

    এখানে, LineChart কনস্ট্রাক্টর ব্যবহার করে চার্ট তৈরি করা হচ্ছে এবং তা chart_div id তে রেন্ডার করা হচ্ছে।


Multiple Line Series Chart এর কাস্টমাইজেশন

  1. রঙ পরিবর্তন: আপনি প্রতিটি সিরিজের জন্য আলাদা রঙ নির্ধারণ করতে পারেন, যেমন color: 'blue', color: 'green' ইত্যাদি।
  2. লাইনের স্টাইল: লাইনের প্রস্থ (lineWidth), স্টাইল এবং পয়েন্টের আকারও কাস্টমাইজ করা যেতে পারে।

    series: {
      0: { lineWidth: 3, pointSize: 5 }
    }
    
  3. লেজেন্ড কাস্টমাইজেশন: legend অপশন দিয়ে লেজেন্ডের অবস্থান, টেক্সট স্টাইল ইত্যাদি কাস্টমাইজ করা যেতে পারে।
  4. একাধিক অক্ষ: আপনি যদি দুটি ভিন্ন স্কেল ব্যবহার করতে চান, তবে ডুয়াল-অ্যাক্সিস চার্ট ব্যবহার করতে পারেন।

উপসংহার

Google Charts এর Multiple Line Series Chart খুবই কার্যকরী একটি টুল যা একাধিক ডেটা সিরিজের প্রবণতা তুলনা এবং বিশ্লেষণ করার জন্য ব্যবহৃত হয়। এটি ডেটার মধ্যে সম্পর্ক এবং পরিবর্তন দেখানোর একটি সহজ এবং আকর্ষণীয় উপায়। Sales, Profit, এবং Expenses এর মতো একাধিক ভেরিয়েবলের মধ্যে পার্থক্য দেখাতে এটি খুবই উপকারী।

Content added By
Promotion

Are you sure to start over?

Loading...