Highcharts এর দুটি শক্তিশালী ফিচার Sankey Diagram এবং TreeMap চার্ট, যা ডেটার ফ্লো এবং হায়ারার্কিক্যাল ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে আমরা Angular এবং Highcharts ব্যবহার করে Sankey এবং TreeMap চার্ট তৈরি করার প্রক্রিয়া দেখব।

1. Sankey Diagram তৈরি করা

Sankey Diagram হল একটি বিশেষ ধরনের গ্রাফ যা ডেটার ফ্লো বা প্রবাহকে প্রদর্শন করে। এটি সাধারণত ডেটার এক অবস্থান থেকে অন্য অবস্থানে স্থানান্তরের জন্য ব্যবহৃত হয়, যেমন ফ্লো, ট্রান্সফার বা রিসোর্স ব্যবস্থাপনা।

Step 1: Highcharts এবং Sankey মডিউল ইন্সটল করা

প্রথমে Highcharts এবং Sankey মডিউল ইনস্টল করতে হবে:

npm install highcharts highcharts-sankey --save

Step 2: Angular অ্যাপ্লিকেশনে Highcharts ইমপোর্ট করা

app.module.ts ফাইলে Highcharts এবং Sankey মডিউল ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

// Highcharts এবং Sankey মডিউল ইমপোর্ট করা
import * as Highcharts from 'highcharts';
import Sankey from 'highcharts/modules/sankey';

Sankey(Highcharts); // Sankey মডিউল সক্রিয় করা

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Sankey Chart কনফিগারেশন তৈরি করা

এখন app.component.ts ফাইলে Sankey চার্টের কনফিগারেশন তৈরি করুন:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'sankey'
    },
    title: {
      text: 'Sankey Diagram Example'
    },
    series: [{
      type: 'sankey',
      data: [
        ['Start', 'Process', 5],
        ['Process', 'End', 3],
        ['Start', 'End', 2]
      ]
    }]
  };
}

Step 4: Highcharts কম্পোনেন্ট তৈরি করা

app.component.html ফাইলে Highcharts কম্পোনেন্ট যোগ করুন:

<div style="height: 500px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি একটি Sankey Diagram তৈরি করবে যেখানে Start, Process, এবং End এর মধ্যে ডেটার ফ্লো দেখানো হবে।

2. TreeMap Chart তৈরি করা

TreeMap হল একটি হায়ারার্কিক্যাল চার্ট যা রেকটাঙ্গুলার ব্লক ব্যবহার করে ডেটার সম্পর্ক এবং প্রোপোরশনাল ভ্যালুগুলি দেখায়। এটি সাধারণত বড় ডেটাসেটের জন্য ব্যবহৃত হয় যেখানে বিভিন্ন বিভাগের মধ্যে তুলনা করা হয়।

Step 1: Highcharts এবং TreeMap মডিউল ইন্সটল করা

TreeMap তৈরি করতে আপনাকে Highcharts এবং Highcharts-Treemap মডিউল ইন্সটল করতে হবে:

npm install highcharts highcharts-treemap --save

Step 2: Angular অ্যাপ্লিকেশনে Highcharts ইমপোর্ট করা

app.module.ts ফাইলে Highcharts এবং TreeMap মডিউল ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

// Highcharts এবং TreeMap মডিউল ইমপোর্ট করা
import * as Highcharts from 'highcharts';
import Treemap from 'highcharts/modules/treemap';

Treemap(Highcharts); // TreeMap মডিউল সক্রিয় করা

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: TreeMap Chart কনফিগারেশন তৈরি করা

এখন app.component.ts ফাইলে TreeMap চার্টের কনফিগারেশন তৈরি করুন:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'treemap'
    },
    title: {
      text: 'TreeMap Chart Example'
    },
    series: [{
      type: 'treemap',
      data: [{
        id: 'A',
        name: 'Category A',
        value: 6,
        color: '#1f77b4'
      }, {
        id: 'B',
        name: 'Category B',
        value: 4,
        color: '#ff7f0e'
      }, {
        id: 'C',
        name: 'Category C',
        value: 3,
        color: '#2ca02c'
      }, {
        id: 'D',
        name: 'Category D',
        value: 2,
        color: '#d62728'
      }]
    }]
  };
}

Step 4: Highcharts কম্পোনেন্ট তৈরি করা

app.component.html ফাইলে Highcharts কম্পোনেন্ট যোগ করুন:

<div style="height: 500px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি একটি TreeMap তৈরি করবে যেখানে Category A, Category B, Category C, এবং Category D এর মধ্যে সম্পর্ক এবং সাইজ প্রদর্শিত হবে।

সারাংশ

Sankey এবং TreeMap চার্ট ব্যবহার করে আপনি Highcharts এর মাধ্যমে ডেটার ফ্লো এবং হায়ারার্কিক্যাল ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। Sankey Diagram ডেটার ফ্লো এবং TreeMap ডেটার পরিমাণ এবং সম্পর্ক প্রদর্শন করে। Angular এবং Highcharts ব্যবহার করে এই চার্টগুলিকে ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড করা যায়, যা আপনাকে আপনার ডেটা ভিজ্যুয়ালাইজেশনে আরও গভীরতর অন্তর্দৃষ্টি দিতে সহায়ক হয়।