Drilldown চার্ট ইমপ্লিমেন্ট করা

Drilldown চার্ট হলো এমন একটি চার্ট যা ব্যবহারকারীকে একটি নির্দিষ্ট ডেটার বিস্তারিত দেখানোর সুযোগ দেয়। Highcharts এ Drilldown ফিচার ব্যবহার করে, আপনি একটি চার্টে ক্লিক করলে আরও ডিটেইলড ডেটা দেখতে পারবেন। এটি সাধারণত পিতামাতার তথ্য থেকে শিশু তথ্যের দিকে গভীরতা অনুসন্ধান করতে ব্যবহৃত হয়। অর্থাৎ, ব্যবহারকারী একটি নির্দিষ্ট কেটেগরি বা সেগমেন্টে ক্লিক করার মাধ্যমে আরও বিস্তারিত তথ্য দেখতে পারে।

Drilldown চার্ট কনফিগারেশন

Drilldown চার্টে একাধিক স্তর থাকতে পারে, এবং এক স্তরের ডেটা আরেক স্তরের ডেটার উপর ভিত্তি করে পরিবর্তিত হতে পারে। Drilldown এর জন্য সাধারণভাবে series এবং drilldown অপশন ব্যবহার করা হয়।

Drilldown চার্টের উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'বিক্রয় বিশ্লেষণ - Drilldown চার্ট'
  },
  subtitle: {
    text: 'ক্লিক করে বিস্তারিত দেখুন'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'বিক্রয় পরিমাণ'
    }
  },
  series: [{
    name: 'মাস',
    data: [{
      name: 'জানুয়ারি',
      y: 5,
      drilldown: 'jan-drilldown'
    }, {
      name: 'ফেব্রুয়ারি',
      y: 3,
      drilldown: 'feb-drilldown'
    }, {
      name: 'মার্চ',
      y: 4,
      drilldown: 'mar-drilldown'
    }]
  }],
  drilldown: {
    series: [{
      id: 'jan-drilldown',
      data: [
        ['প্রোডাক্ট A', 2],
        ['প্রোডাক্ট B', 3]
      ]
    }, {
      id: 'feb-drilldown',
      data: [
        ['প্রোডাক্ট A', 1],
        ['প্রোডাক্ট B', 2]
      ]
    }, {
      id: 'mar-drilldown',
      data: [
        ['প্রোডাক্ট A', 2],
        ['প্রোডাক্ট B', 2]
      ]
    }]
  }
});

ব্যাখ্যা

1. series:
   • name: শিরোনাম যা সিরিজের জন্য প্রদর্শিত হবে।
   • data: এটি মূল ডেটা যা চার্টে প্রদর্শিত হয়। এখানে drilldown নামে একটি কাস্টম প্রপার্টি যুক্ত করা হয়েছে, যা নির্দেশ করে যে কোন ডেটা পয়েন্টের জন্য Drilldown ফিচার কার্যকর হবে।
2. drilldown:
   • series: Drilldown ডেটা এখানে সংজ্ঞায়িত করা হয়। আপনি id ব্যবহার করে Drilldown সিরিজের জন্য একটি ইউনিক আইডি সেট করেন, যা মূল ডেটা পয়েন্টের সাথে ম্যাচ করবে।
   • id: এটি মূল ডেটা পয়েন্টের জন্য নির্ধারিত ID যা Drilldown সিরিজের সাথে যুক্ত হবে।
   • data: Drilldown ডেটা যা মূল ডেটার বিস্তারিত তথ্য হিসেবে প্রদর্শিত হবে।

Drilldown চার্টের কর্মপ্রণালী

1. যখন ব্যবহারকারী মূল চার্টে একটি নির্দিষ্ট বার বা পয়েন্টে ক্লিক করবেন, তখন drilldown ID এর সাথে সম্পর্কিত ডেটা প্রদর্শিত হবে।
2. Drilldown সিরিজের data-তে থাকা তথ্যের মাধ্যমে ব্যবহারকারী আরও বিস্তারিত দেখতে পারবেন। উদাহরণস্বরূপ, জানুয়ারি মাসের বিক্রয় তথ্যের জন্য আরও বিস্তারিত প্রোডাক্ট-বেসড তথ্য দেখা যাবে।

Drilldown এ "Back to Top" ফিচার

Highcharts এর Drilldown ফিচারে সাধারণত ডিফল্টভাবে "Back to Top" ফিচার থাকে। অর্থাৎ, আপনি যখন Drilldown থেকে পিতামাতা চার্টে ফিরে যেতে চান, তখন "Back to Top" বাটন ব্যবহার করে সহজেই মূল চার্টে ফিরে আসতে পারেন।

Drilldown চার্টের কাস্টমাইজেশন

আপনি Drilldown চার্টের সাইজ, রঙ, স্টাইল এবং আরও অনেক কিছু কাস্টমাইজ করতে পারবেন। উদাহরণস্বরূপ:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'বিক্রয় বিশ্লেষণ'
  },
  series: [{
    name: 'মাস',
    data: [{
      name: 'জানুয়ারি',
      y: 5,
      drilldown: 'jan-drilldown'
    }, {
      name: 'ফেব্রুয়ারি',
      y: 3,
      drilldown: 'feb-drilldown'
    }]
  }],
  drilldown: {
    series: [{
      id: 'jan-drilldown',
      data: [
        ['প্রোডাক্ট A', 2],
        ['প্রোডাক্ট B', 3]
      ],
      color: '#ff0000'  // Drilldown সিরিজের রঙ কাস্টমাইজ করা
    }, {
      id: 'feb-drilldown',
      data: [
        ['প্রোডাক্ট A', 1],
        ['প্রোডাক্ট B', 2]
      ],
      color: '#00ff00'  // Drilldown সিরিজের রঙ কাস্টমাইজ করা
    }]
  }
});

এতে আপনি Drilldown সিরিজের color বা রঙ কাস্টমাইজ করে আরো আকর্ষণীয় ডিজাইন করতে পারবেন।

সারাংশ

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