Google Charts API একটি শক্তিশালী প্ল্যাটফর্ম যা বিভিন্ন ধরনের ডেটা ভিজুয়ালাইজেশন তৈরি করতে সহায়তা করে। এক্ষেত্রে, শুধুমাত্র সাধারণ চার্টের বাইরে আরো উন্নত এবং ইন্টারঅ্যাকটিভ চার্ট টাইপের সাহায্যে আরও জটিল ডেটা সিস্টেমের বিশ্লেষণ করা সম্ভব। নিচে কিছু Advanced Chart Types এবং তাদের ব্যবহার দেওয়া হলো।
1. Combo Chart (কোম্বো চার্ট)
Combo Chart একাধিক চার্টের সংমিশ্রণ হতে পারে। যেমন একটি চার্টে বার এবং লাইন একসাথে প্রদর্শন করা হয়। এটি ডেটার মধ্যে তুলনা এবং বিভিন্ন ভ্যালু প্রদর্শনের জন্য উপযুক্ত।
Combo Chart উদাহরণ:
chartOptions = {
title: 'Sales and Profit Comparison',
vAxis: { title: 'Amount' },
hAxis: { title: 'Month' },
seriesType: 'bars', // Bar chart for first data series
series: { 1: { type: 'line' } } // Line chart for second data series
};
এখানে, seriesType ব্যবহার করা হয়েছে যা প্রথম ডেটা সিরিজকে bar এবং দ্বিতীয় সিরিজকে line চার্টে রূপান্তর করে।
2. GeoChart (জিওচার্ট)
GeoChart হল একটি মানচিত্র ভিত্তিক চার্ট যা বিশ্বের দেশ, রাজ্য বা অঞ্চলের তথ্য প্রদর্শন করে। এটি সেক্টর ভিত্তিক বিশ্লেষণ, যেমন বিভিন্ন অঞ্চলে জনসংখ্যা বা আয় দেখানোর জন্য ব্যবহৃত হয়।
GeoChart উদাহরণ:
chartOptions = {
region: 'US', // Choose region (e.g., 'US', 'world', 'IN')
displayMode: 'regions', // Show regions (states, countries, etc.)
colorAxis: {colors: ['#e7f0fa', '#1a8a4d']} // Color scale for the map
};
এখানে, region ব্যবহার করে আপনি যে অঞ্চলটি প্রদর্শন করতে চান তা নির্ধারণ করতে পারেন।
3. Gauge Chart (গেজ চার্ট)
Gauge Chart বা Speedometer চার্ট, একটি ডায়াল আকারে তথ্য প্রদর্শন করে যা আপনাকে একটি নির্দিষ্ট ভ্যালু বা রেঞ্জের মধ্যে কোনও মান বা স্টেটাস দেখাতে সহায়তা করে। এটি সাধারণত প্রোগ্রেস ট্র্যাকিং বা মেট্রিক্স দেখানোর জন্য ব্যবহৃত হয়।
Gauge Chart উদাহরণ:
chartOptions = {
min: 0, // Minimum value of the gauge
max: 100, // Maximum value of the gauge
redFrom: 80, // Red zone starts at 80
redTo: 100, // Red zone ends at 100
yellowFrom: 60, // Yellow zone starts at 60
yellowTo: 80, // Yellow zone ends at 80
greenFrom: 0, // Green zone starts at 0
greenTo: 60 // Green zone ends at 60
};
এখানে, min এবং max দ্বারা আপনি গেজের পরিসীমা নির্ধারণ করতে পারেন, এবং redFrom, yellowFrom ইত্যাদি দিয়ে আপনি বিভিন্ন রঙের সেগমেন্ট সেট করতে পারেন।
4. TreeMap (ট্রি ম্যাপ)
TreeMap চার্ট ডেটাকে শ্রেণীভুক্ত করে এবং প্রতিটি শ্রেণির মধ্যে সম্পর্ক দেখানোর জন্য ব্যবহৃত হয়। এটি একটি হায়ারার্কিক্যাল ডেটা ভিজুয়ালাইজেশনে উপযুক্ত এবং এটি প্রতিটি শ্রেণির আকারে ডেটা দেখাতে সাহায্য করে।
TreeMap উদাহরণ:
chartOptions = {
minColor: '#a3c9f1', // Minimum color for leaf nodes
midColor: '#4fa7e3', // Mid color for leaf nodes
maxColor: '#3b7ab6', // Maximum color for leaf nodes
headerHeight: 15, // Height of the header row
fontColor: 'black' // Font color for the text in the nodes
};
এখানে, minColor, midColor, এবং maxColor দিয়ে আপনি ট্রি ম্যাপের বিভিন্ন লেভেলের রঙ কাস্টমাইজ করতে পারেন।
5. Sankey Diagram (স্যাংকি ডায়াগ্রাম)
Sankey Diagram ডেটার প্রবাহ এবং সম্পর্ক বিশ্লেষণ করার জন্য ব্যবহৃত হয়। এটি প্রাথমিকভাবে সিস্টেমের মধ্যে শক্তি, আর্থিক প্রবাহ বা অন্য কোনো সংস্থান দেখানোর জন্য উপযুক্ত।
Sankey Diagram উদাহরণ:
chartOptions = {
width: 600, // Width of the chart
height: 400, // Height of the chart
sankey: {
node: {
width: 15, // Width of nodes
padding: 10, // Padding between nodes
colors: ['#b2d8f0', '#8fc4e1', '#5f9fc1'] // Node colors
},
link: {
colorMode: 'gradient', // Color gradient for links
colors: ['#b3b3b3'] // Link colors
}
}
};
এখানে sankey অপশন ব্যবহার করা হয়েছে যা ডেটার প্রবাহের জন্য বিভিন্ন লিঙ্ক এবং নোড কাস্টমাইজ করতে সাহায্য করে।
6. Scatter Chart (স্ক্যাটার চার্ট)
Scatter Chart দুটি ভেরিয়েবলের মধ্যে সম্পর্ক বা কোরিলেশন প্রদর্শন করতে ব্যবহৃত হয়। এটি X এবং Y অক্ষের উপর পয়েন্ট প্লট করে এবং ডেটার বিভাজন বা সম্পর্ক চিত্রিত করতে সাহায্য করে।
Scatter Chart উদাহরণ:
chartOptions = {
title: 'Correlation between Height and Weight',
hAxis: { title: 'Height (in cm)' },
vAxis: { title: 'Weight (in kg)' },
legend: { position: 'none' },
pointSize: 5
};
এখানে, hAxis এবং vAxis ব্যবহার করে X এবং Y অক্ষের টাইটেল নির্ধারণ করা হয়েছে এবং pointSize দ্বারা পয়েন্টের আকার কাস্টমাইজ করা হয়েছে।
7. Bubble Chart (বাবল চার্ট)
Bubble Chart হল স্ক্যাটার চার্টের উন্নত রূপ, যেখানে প্রতিটি বুদ্বুদ একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে এবং বুদ্বুদটির আকার এবং রঙ অতিরিক্ত ডেটা বা পরিমাপ দেখাতে ব্যবহৃত হয়।
Bubble Chart উদাহরণ:
chartOptions = {
title: 'City Population and Area',
bubble: {
textStyle: { fontSize: 16, color: 'black' },
format: 'scientific'
}
};
এখানে, bubble অপশন ব্যবহার করে আপনি বুদ্বুদগুলির টেক্সট স্টাইল এবং ফরম্যাট কাস্টমাইজ করতে পারেন।
8. Histogram (হিস্টোগ্রাম)
Histogram একটি গ্রাফ যা ডেটা সেটের মধ্যে রেঞ্জ অনুযায়ী শ্রেণীকরণ করে। এটি ডেটার পারমুটেশন বা ফ্রিকোয়েন্সি দেখানোর জন্য ব্যবহৃত হয়।
Histogram উদাহরণ:
chartOptions = {
title: 'Distribution of Scores',
histogram: {
bucketSize: 5, // Bucket size for the bars
minValue: 0, // Minimum value
maxValue: 100 // Maximum value
}
};
এখানে, bucketSize দ্বারা আপনি যে মানের মধ্যে ডেটা বিভক্ত হবে তা নির্ধারণ করতে পারেন।
Conclusion
Google Charts API-তে উন্নত চার্ট টাইপ ব্যবহার করে আপনি বিভিন্ন ধরনের ডেটা ভিজুয়ালাইজেশন করতে পারেন, যেমন Combo Chart, GeoChart, Gauge Chart, Sankey Diagram, Bubble Chart, Scatter Chart, TreeMap ইত্যাদি। প্রতিটি চার্ট টাইপ বিভিন্ন ডেটার বিশ্লেষণ এবং ভিজুয়াল রিপ্রেজেন্টেশনে সহায়তা করে। এগুলি ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ ডেটা ভিজুয়ালাইজেশন তৈরির সুযোগ প্রদান করে।
Candlestick Chart (ক্যান্ডেলস্টিক চার্ট) মূলত স্টক মার্কেট এবং ফাইন্যান্সিয়াল ডেটা বিশ্লেষণের জন্য ব্যবহৃত হয়। এটি সময়ের সাথে প্রাইস মুভমেন্ট দেখানোর জন্য প্রতিটি পিরিয়ডের জন্য একটি ক্যান্ডেল বা বক্স তৈরি করে, যা ওপেন, ক্লোজ, হাই, এবং লো প্রাইসগুলোকে চিহ্নিত করে।
Google Charts API-এ Candlestick Chart তৈরি করতে কিছু নির্দিষ্ট ডেটা এবং কাস্টমাইজেশন প্রয়োজন হয়। এখানে আমরা ক্যান্ডেলস্টিক চার্ট তৈরি করার জন্য প্রয়োজনীয় ধাপগুলো দেখাবো।
Step 1: Angular প্রজেক্ট তৈরি করা
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনও প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):
ng new google-charts-candlestick
cd google-charts-candlestick
Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা
Google Charts লাইব্রেরি ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এটি ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:
npm install angular-google-charts
এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
Step 3: GoogleChartsModule ইমপোর্ট করা
এখন, Angular অ্যাপে GoogleChartsModule ব্যবহার করতে, app.module.ts ফাইলে এটি ইমপোর্ট করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Candlestick Chart তৈরি করা
এখন, আমরা Candlestick Chart তৈরি করতে যাব। Candlestick Chart তৈরি করার জন্য আমাদের High, Low, Open, এবং Close ডেটা প্রয়োজন।
app.component.ts ফাইল:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Candlestick Chart Example';
chartType = 'CandlestickChart'; // Chart Type
chartData = [
['Mon', 20.66, 18.73, 22.56, 20.34],
['Tue', 21.22, 19.25, 22.28, 20.50],
['Wed', 22.60, 20.40, 23.80, 21.98],
['Thu', 23.50, 22.10, 24.60, 23.02],
['Fri', 24.80, 23.60, 26.00, 24.20]
]; // Data: [Day, Open, Close, High, Low]
chartOptions = {
title: 'Stock Price Movement',
legend: 'none',
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // Falling color
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // Rising color
},
width: 800,
height: 400
};
}
এখানে, chartData এর মধ্যে প্রতিটি দিনের জন্য Open, Close, High, এবং Low প্রাইস রয়েছে। এই ডেটা থেকে Candlestick Chart তৈরি হবে।
app.component.html ফাইল:
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে, google-chart কম্পোনেন্টটি ব্যবহার করে আমরা Candlestick Chart রেন্ডার করেছি এবং chartData এবং chartOptions কাস্টমাইজ করেছি।
Step 5: অ্যাপ্লিকেশন চালানো
এখন Angular অ্যাপ্লিকেশনটি চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Candlestick Chart দেখতে পাবেন।
Candlestick Chart কাস্টমাইজেশন
Google Charts API-এ Candlestick Chart কাস্টমাইজ করতে বেশ কিছু অপশন রয়েছে:
- Colors:
- risingColor: রাইজিং (বৃদ্ধি) ক্যান্ডেলসের জন্য রঙ।
- fallingColor: ফলিং (কমে যাওয়া) ক্যান্ডেলসের জন্য রঙ।
- Width and Height:
- আপনি width এবং height সেট করে চার্টের সাইজ কাস্টমাইজ করতে পারেন।
- Title:
- title অপশন দিয়ে চার্টের টাইটেল কাস্টমাইজ করা যায়।
- Legend:
- legend: 'none' সেট করে লেজেন্ড নিষ্ক্রিয় করতে পারেন।
এছাড়া আপনি আরও অনেক কাস্টমাইজেশন করতে পারেন, যেমন গ্রিডলাইন, অক্ষের স্টাইল, টুলটিপ ইত্যাদি।
সারাংশ
এই প্রক্রিয়ায়, আমরা Candlestick Chart তৈরি করতে Google Charts API এবং Angular ব্যবহার করেছি। CandlestickChart ফাইন্যান্সিয়াল ডেটা এবং স্টক মার্কেটের বিশ্লেষণের জন্য খুবই জনপ্রিয়। Google Charts API ব্যবহার করে আমরা খুব সহজেই এটি কাস্টমাইজ এবং রেন্ডার করতে পারি। CandlestickChart-এর মাধ্যমে আপনি সময়ের সাথে Open, Close, High, এবং Low প্রাইস মুভমেন্ট দেখাতে পারবেন।
Google Charts API তে GeoChart একটি শক্তিশালী টুল যা ডেটা ভিজুয়ালাইজেশনের জন্য গ্লোবাল ম্যাপ বা দেশের ম্যাপ ব্যবহার করে। এটি ব্যবহারকারীদের জন্য বিভিন্ন অঞ্চলের ডেটা বা পরিসংখ্যান দেখানোর জন্য একটি অত্যন্ত কার্যকরী উপায়। আপনি GeoChart ব্যবহার করে একটি দেশ বা অঞ্চলের মানচিত্রে ডেটা রঙ দিয়ে প্রদর্শন করতে পারেন, যেমন: দেশের জনসংখ্যা, আয়, বা অন্য কোনো সূচক।
এখানে, আমরা GeoChart তৈরি করার প্রক্রিয়া দেখব এবং দেখাবো কিভাবে এটি Angular অ্যাপ্লিকেশনে ব্যবহার করতে হয়।
Step 1: Angular প্রজেক্ট তৈরি করা
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি ইতিমধ্যে একটি প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):
ng new geo-chart-app
cd geo-chart-app
Step 2: Angular-এ Google Charts ইন্সটল করা
এখন, Google Charts ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে:
npm install angular-google-charts
এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
Step 3: GoogleChartsModule ইমপোর্ট করা
এখন, app.module.ts ফাইলে GoogleChartsModule ইমপোর্ট করতে হবে:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: GeoChart তৈরি করা
এখন, আমরা GeoChart তৈরি করব, যাতে দেশের মানচিত্রে বিভিন্ন ডেটা প্রদর্শিত হবে।
app.component.ts ফাইল:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'GeoChart - Map Visualization';
chartType = 'GeoChart'; // Chart Type (GeoChart)
chartData = [
['Country', 'Population'],
['USA', 331883986],
['India', 1380004385],
['China', 1444216107],
['Brazil', 213993437],
['Russia', 145912025]
]; // Chart Data (Country and Population)
chartOptions = {
colorAxis: { colors: ['#e6f7ff', '#3399ff'] }, // Color axis range
backgroundColor: '#f5f5f5', // Background color for map
datalessRegionColor: '#ffffff', // Color for regions with no data
defaultColor: '#f5f5f5' // Default color for regions with no data
}; // Chart Options
}
এখানে, chartData হচ্ছে একটি অ্যারে যার মধ্যে দেশের নাম এবং তাদের জনসংখ্যা উল্লেখ করা আছে। colorAxis এবং backgroundColor দিয়ে আমরা মানচিত্রের রঙ কাস্টমাইজ করেছি।
app.component.html ফাইল:
<h1>{{ title }}</h1>
<!-- Google GeoChart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে, google-chart কম্পোনেন্টে [data]="chartData" এবং [options]="chartOptions" ব্যবহার করে আমরা ডেটা এবং কাস্টম অপশন বাইন্ড করেছি।
Step 5: অ্যাপ্লিকেশন চালানো
এখন, অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি GeoChart দেখতে পারবেন, যেখানে বিভিন্ন দেশের জনসংখ্যা ভিজুয়ালাইজ করা হবে।
GeoChart কাস্টমাইজেশন
Google Charts API তে GeoChart কাস্টমাইজ করার জন্য বেশ কিছু অপশন রয়েছে:
1. Region Specific Colors
আপনি নির্দিষ্ট দেশ বা অঞ্চলের জন্য আলাদা রঙ নির্ধারণ করতে পারেন। উদাহরণস্বরূপ:
chartOptions = {
region: 'IN', // India region highlight
colorAxis: { colors: ['#e6f7ff', '#ff3399'] } // Color range for India
};
2. Custom Regions (Custom Data)
আপনি GeoChart-এ কাস্টম ডেটা ব্যবহার করে নির্দিষ্ট অঞ্চল বা দেশের মানচিত্র কাস্টমাইজ করতে পারেন।
chartData = [
['Country', 'Population', 'GDP'],
['USA', 331883986, 21.43],
['India', 1380004385, 2.87],
['China', 1444216107, 14.34]
];
এখানে, আমরা দেশগুলোর জনসংখ্যার পাশাপাশি তাদের GDP (Gross Domestic Product) তথ্যও যোগ করেছি।
3. Adding Region Names and Additional Data
আপনি GeoChart-এ অতিরিক্ত ডেটা (যেমন: জনসংখ্যা, GDP, বা আয়) এবং অঞ্চল বা দেশগুলোর নামও প্রদর্শন করতে পারেন।
GeoChart Visualization Example with Additional Data
এখানে একটি GeoChart এর উদাহরণ দেওয়া হলো, যেখানে বিভিন্ন দেশের জনসংখ্যা, GDP, এবং আয় দেখানো হবে:
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Interactive GeoChart - Map Visualization';
chartType = 'GeoChart'; // Chart Type (GeoChart)
chartData = [
['Country', 'Population', 'GDP'],
['USA', 331883986, 21.43],
['India', 1380004385, 2.87],
['China', 1444216107, 14.34],
['Brazil', 213993437, 2.05],
['Russia', 145912025, 1.48]
]; // Chart Data (Country, Population, GDP)
chartOptions = {
colorAxis: { colors: ['#e6f7ff', '#3399ff'] },
backgroundColor: '#f5f5f5',
datalessRegionColor: '#ffffff',
defaultColor: '#f5f5f5'
}; // Chart Options
}
app.component.html:
<h1>{{ title }}</h1>
<!-- Google GeoChart with Population and GDP -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
GeoChart Customization for Different Regions
GeoChart API আপনাকে বিভিন্ন অঞ্চলের জন্য কাস্টম ডেটা এবং রঙ প্রদর্শন করার সুযোগ দেয়। আপনি যদি শুধুমাত্র কিছু নির্দিষ্ট দেশ বা অঞ্চল প্রদর্শন করতে চান, তবে region অপশন ব্যবহার করতে পারেন।
chartOptions = {
region: 'NA', // North America (USA, Canada, Mexico)
colorAxis: { colors: ['#f2f2f2', '#ff6666'] }
};
এখানে region: 'NA' ব্যবহার করে আমরা শুধুমাত্র North America প্রদর্শন করেছি।
সারাংশ
GeoChart Google Charts API তে একটি শক্তিশালী টুল যা গ্লোবাল বা অঞ্চলের ম্যাপ ভিজুয়ালাইজেশন করতে সহায়তা করে। এটি ডেটাকে ম্যাপের মাধ্যমে উপস্থাপন করতে সহজ এবং কার্যকরী। আপনি GeoChart এর মাধ্যমে রঙ, টাইটেল, আকার, এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। API থেকে ডেটা ফেচ করে, GeoChart এর মাধ্যমে বিশ্বের বিভিন্ন দেশ বা অঞ্চলের মানচিত্রে ডেটা উপস্থাপন করতে পারবেন।
Google Charts API ব্যবহার করে আপনি Scatter Plot এবং Bubble Chart খুব সহজেই তৈরি করতে পারেন। এই দুটি চার্ট ডেটার মধ্যে সম্পর্ক এবং গতিশীলতা প্রদর্শন করতে ব্যবহৃত হয়। চলুন, বিস্তারিতভাবে দেখি কিভাবে Angular অ্যাপ্লিকেশনে Scatter Plot এবং Bubble Chart তৈরি এবং কাস্টমাইজ করা যায়।
Scatter Plot (স্ক্যাটার প্লট) ব্যবহার
Scatter Plot চার্টে দুটি ভেরিয়েবলের মধ্যে সম্পর্ক বা কোরিলেশন প্রদর্শন করা হয়। সাধারণত এটি ডেটার মধ্যে প্যাটার্ন বা প্রবণতা চিহ্নিত করতে ব্যবহৃত হয়।
Scatter Plot উদাহরণ
ধরা যাক, আমরা একটি Scatter Plot তৈরি করব যেখানে এক্স অক্ষ (horizontal axis) থাকবে Time এবং ওয়াই অক্ষ (vertical axis) থাকবে Sales।
app.component.ts ফাইল:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts - Scatter Plot Example';
chartType = 'ScatterChart'; // Chart Type: Scatter Chart
chartData = [
['Time', 'Sales'],
[1, 20],
[2, 30],
[3, 50],
[4, 40],
[5, 60]
]; // Scatter Plot Data
chartOptions = {
title: 'Sales Over Time',
hAxis: { title: 'Time', minValue: 0 },
vAxis: { title: 'Sales', minValue: 0 },
legend: 'none', // No legend for scatter plot
width: 600,
height: 400
};
}
app.component.html ফাইল:
<h1>{{ title }}</h1>
<!-- Google Chart (Scatter Plot) -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে:
- chartData: এটি একটি অ্যারে যেখানে ডেটা পয়েন্টগুলো Time এবং Sales হিসেবে সঞ্চিত আছে।
- chartOptions: এখানে চার্টের টাইটেল, অক্ষের টাইটেল, চার্টের আকার এবং অন্যান্য কাস্টমাইজেশন অপশন সেট করা হয়েছে।
Chart Output:
এটি Time এবং Sales এর মধ্যে সম্পর্ক প্রদর্শন করবে, যেখানে প্রতিটি ডেটা পয়েন্ট একটি স্ক্যাটার পয়েন্ট হিসেবে চার্টে দেখা যাবে।
Bubble Chart (বাবল চার্ট) ব্যবহার
Bubble Chart একটি বিশেষ ধরনের চার্ট যেখানে প্রতিটি বুদ্বুদ একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে এবং বুদ্বুদটির আকার বা রঙ তৃতীয় ভেরিয়েবল দেখায়। এটি তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়।
Bubble Chart উদাহরণ
ধরা যাক, আমরা একটি Bubble Chart তৈরি করব যেখানে এক্স অক্ষ (horizontal axis) থাকবে GDP, ওয়াই অক্ষ (vertical axis) থাকবে Life Expectancy এবং বুদ্বুদটির আকার হবে Population।
app.component.ts ফাইল:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts - Bubble Chart Example';
chartType = 'BubbleChart'; // Chart Type: Bubble Chart
chartData = [
['Country', 'GDP', 'Life Expectancy', 'Population'],
['USA', 21137518, 78.5, 327167439],
['China', 14140163, 76.9, 1392730000],
['India', 2875144, 68.3, 1366417754],
['Germany', 3845630, 81.2, 83166711]
]; // Bubble Chart Data
chartOptions = {
title: 'GDP vs Life Expectancy vs Population',
hAxis: { title: 'GDP (in billion USD)' },
vAxis: { title: 'Life Expectancy' },
bubble: { textStyle: { fontSize: 12 } }, // Text style for bubbles
width: 600,
height: 400
};
}
app.component.html ফাইল:
<h1>{{ title }}</h1>
<!-- Google Chart (Bubble Chart) -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে:
- chartData: এতে প্রতিটি ডেটা পয়েন্টে চারটি মান রয়েছে—Country, GDP, Life Expectancy, এবং Population।
- chartOptions: এখানে চার্টের টাইটেল, অক্ষের টাইটেল এবং অন্যান্য কাস্টমাইজেশন অপশন নির্ধারণ করা হয়েছে।
Chart Output:
এটি একটি Bubble Chart তৈরি করবে যেখানে প্রতিটি দেশ একটি বুদ্বুদ দ্বারা উপস্থাপিত হবে। GDP x-অক্ষ এবং Life Expectancy y-অক্ষে থাকবে, এবং বুদ্বুদটির আকার Population এর সাথে সম্পর্কিত হবে।
Scatter Plot এবং Bubble Chart এর মধ্যে পার্থক্য
| Feature | Scatter Plot | Bubble Chart |
|---|---|---|
| Number of Variables | দুইটি (x এবং y) | তিনটি (x, y, এবং size/radius) |
| Use Case | দুটি ভেরিয়েবলের মধ্যে সম্পর্ক প্রদর্শন | তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক প্রদর্শন |
| Representation | পয়েন্টের মাধ্যমে ডেটা প্রদর্শন | বুদ্বুদ (বubbles) দ্বারা ডেটা প্রদর্শন |
| Data Points | প্রতিটি ডেটা পয়েন্ট একটি নির্দিষ্ট অবস্থানে থাকবে | প্রতিটি ডেটা পয়েন্ট বুদ্বুদ আকারে থাকবে |
Conclusion
Scatter Plot এবং Bubble Chart দুটি খুবই শক্তিশালী চার্ট টাইপ, যা ডেটার মধ্যে সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়। Scatter Plot দুইটি ভেরিয়েবলের মধ্যে সম্পর্ক বোঝাতে ব্যবহৃত হয়, যখন Bubble Chart তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করতে সাহায্য করে, যেখানে তৃতীয় ভেরিয়েবলটি বুদ্বুদটির আকার দ্বারা চিত্রিত হয়।
Google Charts API ব্যবহার করে Angular অ্যাপ্লিকেশনে এই চার্টগুলো সহজেই তৈরি করা যায় এবং কাস্টমাইজ করা যায়, যা ডেটার গভীর বিশ্লেষণ এবং ভিজুয়ালাইজেশনে কার্যকরী ভূমিকা পালন করে।
Google Charts API-এ Gauge Chart এবং Timeline Chart দুটি বিশেষ ধরনের চার্ট রয়েছে যা ডেটা ভিজুয়ালাইজেশনের ক্ষেত্রে বিশেষভাবে ব্যবহৃত হয়। Gauge Chart সাধারণত পরিমাপ বা মাপের জন্য ব্যবহৃত হয়, যেমন কোনো প্রোগ্রামের সম্পাদনার পরিমাণ বা পরিমাপ, এবং Timeline Chart সময়ের সাথে সম্পর্কিত ডেটা ভিজুয়ালাইজ করতে ব্যবহৃত হয়, যেমন একটি প্রজেক্টের বিভিন্ন ফেজের সময়সূচী।
এখানে আমরা Angular ব্যবহার করে Gauge Chart এবং Timeline Chart তৈরি করার পদ্ধতি এবং কাস্টমাইজেশন দেখব।
1. Gauge Chart তৈরি এবং কাস্টমাইজেশন
Gauge Chart ব্যবহার করে আপনি কোনো মান বা পরিসরের মধ্যে অবস্থান চিত্রিত করতে পারেন। এটি সাধারণত progress, performance, বা percentage এর জন্য ব্যবহৃত হয়।
Gauge Chart উদাহরণ
- Angular প্রজেক্টে Gauge Chart তৈরি করা
প্রথমে, আপনার Angular অ্যাপে GoogleChartsModule ইমপোর্ট করতে হবে (যেমন পূর্বে উল্লেখ করা হয়েছে)।
app.component.ts ফাইল:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Gauge Chart Example';
chartType = 'Gauge'; // Gauge Chart
chartData = [
['Label', 'Value'],
['Memory', 80], // This can be a dynamic value
['CPU', 55]
]; // Chart Data
chartOptions = {
width: 400,
height: 300,
redFrom: 90, // Red color zone starting value
redTo: 100, // Red color zone ending value
yellowFrom: 75, // Yellow color zone starting value
yellowTo: 90, // Yellow color zone ending value
minorTicks: 5 // Number of minor ticks
};
}
app.component.html ফাইল:
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
Gauge Chart কাস্টমাইজেশন
redFromএবংredTo: এটি নির্দেশ করে যে কোন পরিসরে রেড (বিপদ) অঞ্চলটি থাকবে।yellowFromএবংyellowTo: এটি হল একটি সাবধানতার এলাকা (yellow zone), যা সাধারণত পরিমাপের নির্দিষ্ট সীমার কাছাকাছি থাকলে প্রদর্শিত হয়।minorTicks: এটি চার্টে ছোট টিক্সের সংখ্যা নির্ধারণ করে।
2. Timeline Chart তৈরি এবং কাস্টমাইজেশন
Timeline Chart সাধারণত সময়ের সাথে সম্পর্কিত ডেটা ভিজুয়ালাইজ করতে ব্যবহৃত হয়। এটি প্রজেক্ট বা ইভেন্টের বিভিন্ন ধাপ, সময়সীমা, এবং অন্যান্য সময়-ভিত্তিক তথ্য প্রদর্শনের জন্য উপযুক্ত।
Timeline Chart উদাহরণ
- Angular প্রজেক্টে Timeline Chart তৈরি করা
প্রথমে, GoogleChartsModule ইমপোর্ট করতে হবে (যেমন পূর্বে বলা হয়েছে)।
app.component.ts ফাইল:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Timeline Chart Example';
chartType = 'Timeline'; // Timeline Chart
chartData = [
['ID', 'Start', 'End', 'Task'],
['1', new Date(2023, 0, 1), new Date(2023, 0, 10), 'Project Start'],
['2', new Date(2023, 0, 10), new Date(2023, 0, 15), 'Phase 1'],
['3', new Date(2023, 0, 15), new Date(2023, 0, 20), 'Phase 2'],
['4', new Date(2023, 0, 20), new Date(2023, 0, 30), 'Project End']
]; // Chart Data
chartOptions = {
timeline: { showRowLabels: true }, // Show Row Labels in Timeline Chart
tooltip: { isHtml: true } // Enable HTML tooltips
};
}
app.component.html ফাইল:
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
Timeline Chart কাস্টমাইজেশন
showRowLabels: এটি টাইমলাইন চিত্রে প্রতিটি রো (কর্মসূচী) এর লেবেল দেখানোর জন্য ব্যবহৃত হয়।tooltip.isHtml: টুলটিপে HTML কন্টেন্ট ব্যবহারের অনুমতি দেয়।
কাস্টমাইজেশন অপশনস
1. Gauge Chart কাস্টমাইজেশন অপশনস:
redFrom,redTo: রেড এরিয়া।yellowFrom,yellowTo: ইয়েলো এরিয়া।minorTicks: ছোট টিকসের সংখ্যা।max: সর্বাধিক মান।
2. Timeline Chart কাস্টমাইজেশন অপশনস:
timeline.showRowLabels: রো লেবেলগুলো প্রদর্শন করা।timeline.showBarLabels: বার লেবেলগুলো প্রদর্শন করা।timeline.groupByRowLabel: একাধিক কাজের জন্য গ্রুপিং।
Chart Interaction and User Interaction
Gauge Chart এবং Timeline Chart ব্যবহারকারীদের জন্য ইন্টারঅ্যাকটিভ উপস্থাপনা প্রদান করতে পারে। উদাহরণস্বরূপ:
Gauge Chart Interaction
Gauge Chart-এ ইউজার যদি কোনো মান নির্বাচন করেন, তাহলে আপনি click event ব্যবহার করে সাড়া দিতে পারেন:
google.visualization.events.addListener(chart, 'select', () => {
var selection = chart.getSelection();
if (selection.length > 0) {
var item = selection[0];
alert('You selected: ' + this.chartData[item.row][0]);
}
});
Timeline Chart Interaction
Timeline Chart-এ ইউজার যখন কোনো সেগমেন্টে ক্লিক করবে, তখন আপনি সিলেক্ট করা সেগমেন্টের ডেটা ব্যবহার করে অতিরিক্ত ইনফরমেশন প্রদর্শন করতে পারেন।
google.visualization.events.addListener(chart, 'select', () => {
var selection = chart.getSelection();
var row = selection[0].row;
alert('Selected Task: ' + this.chartData[row][3]);
});
সারাংশ
Gauge Chart এবং Timeline Chart দুটি অত্যন্ত কার্যকরী চার্ট যা আপনাকে ডেটার ভিজুয়ালাইজেশন আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ করতে সহায়তা করে। Gauge Chart সাধারণত progress বা performance পরিমাপের জন্য ব্যবহৃত হয় এবং Timeline Chart সময়ের সাথে সম্পর্কিত ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এই চার্টগুলো Angular অ্যাপে ব্যবহার করা খুবই সহজ এবং এগুলোর কাস্টমাইজেশন অপশন দিয়ে আপনি অনেক ধরনের ভিজুয়াল উপস্থাপনা তৈরি করতে পারেন।
Read more
