ExtJS Charts হল একটি শক্তিশালী ফিচার যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে। এটি আপনাকে বিভিন্ন ধরনের চার্ট তৈরি করার সুবিধা দেয়, যেমন বার চার্ট, লাইন চার্ট, পাই চার্ট, ডোনাট চার্ট, রাডার চার্ট, ইত্যাদি। এই চার্টগুলি ব্যবহার করে আপনি সহজে ডেটাকে ভিজ্যুয়ালাইজ করতে পারেন এবং আপনার অ্যাপ্লিকেশনের ইউজারদের জন্য ইন্টারেকটিভ ডেটা ডিসপ্লে তৈরি করতে পারেন।
ExtJS এর চ্যাটিং সিস্টেম এমনভাবে ডিজাইন করা হয়েছে যাতে আপনি কাস্টম চার্ট তৈরি করতে, ডেটার সাথে ইন্টারঅ্যাক্ট করতে এবং বিভিন্ন ভিজ্যুয়াল উপস্থাপনা ব্যবহার করে জটিল ডেটা সহজে বুঝতে পারেন।
ExtJS এ Charts ব্যবহার করতে হলে কিছু সাধারণ কনফিগারেশন করতে হবে, যেমন ডেটা স্টোর, এক্স এবং ওয়াই অ্যাক্সিস, সিরিজ ইত্যাদি।
প্রথমে, ডেটা প্রদর্শনের জন্য একটি স্টোর তৈরি করতে হবে। স্টোরটি চার্টের ডেটা সংরক্ষণ করবে।
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'data1', 'data2', 'data3'],
data: [
{ 'name': 'Jan', 'data1': 10, 'data2': 5, 'data3': 4 },
{ 'name': 'Feb', 'data1': 20, 'data2': 10, 'data3': 7 },
{ 'name': 'Mar', 'data1': 30, 'data2': 15, 'data3': 9 }
]
});
এখানে, store ডেটা ধারণ করবে, যেখানে প্রত্যেক মাসের জন্য কিছু ডেটা (data1, data2, data3) রয়েছে।
চার্ট তৈরি করার জন্য Ext.chart.CartesianChart ব্যবহার করা হয়। এর মধ্যে ডেটা, সিরিজ, অ্যাক্সিস, এবং থিম কনফিগারেশন থাকে।
Ext.create('Ext.chart.CartesianChart', {
width: 600,
height: 400,
store: store, // ডেটা স্টোরটি অ্যাসাইন করা
axes: [{
type: 'category',
position: 'bottom',
fields: ['name'],
title: 'Month'
}, {
type: 'numeric',
position: 'left',
fields: ['data1', 'data2', 'data3'],
title: 'Data'
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'data1',
title: 'Data 1',
style: {
fill: '#5E99CC'
}
}, {
type: 'bar',
xField: 'name',
yField: 'data2',
title: 'Data 2',
style: {
fill: '#B5C3D1'
}
}]
});
এই উদাহরণে:
axes বিভাগে, category অ্যাক্সিস এবং numeric অ্যাক্সিস ব্যবহার করা হয়েছে।series বিভাগে, বার চার্টের জন্য xField এবং yField কনফিগার করা হয়েছে।style ব্যবহার করে বারগুলির রঙ নির্ধারণ করা হয়েছে।পাই চার্ট ডেটা ভিজ্যুয়ালাইজ করার জন্য একটি জনপ্রিয় পদ্ধতি। এখানে একটি Pie Chart তৈরি করার উদাহরণ দেওয়া হলো।
Ext.create('Ext.chart.PolarChart', {
width: 600,
height: 400,
store: store,
series: [{
type: 'pie',
angleField: 'data1',
donut: 30, // ডোনাটের আকার নির্ধারণ
label: {
field: 'name',
display: 'rotate'
},
style: {
stroke: '#fff',
lineWidth: 1
}
}]
});
এখানে:
type: 'pie' কনফিগারেশন দিয়ে পাই চার্ট তৈরি করা হয়েছে।angleField দ্বারা কতটা অংশ ডেটা প্রদর্শিত হবে তা নির্ধারণ করা হয়।donut: 30 দ্বারা ডোনাটের আকারের সাইজ নির্ধারণ করা হয়।লাইন চার্ট একটি সাধারণ ডেটা ভিজ্যুয়ালাইজেশন পদ্ধতি যা পরিবর্তনশীল ডেটাকে গ্রাফের মাধ্যমে প্রদর্শন করে।
Ext.create('Ext.chart.CartesianChart', {
width: 600,
height: 400,
store: store,
axes: [{
type: 'category',
position: 'bottom',
fields: ['name'],
title: 'Month'
}, {
type: 'numeric',
position: 'left',
fields: ['data1', 'data2', 'data3'],
title: 'Data'
}],
series: [{
type: 'line',
xField: 'name',
yField: 'data1',
title: 'Data 1',
style: {
stroke: '#5E99CC',
lineWidth: 2
}
}]
});
এখানে type: 'line' ব্যবহার করা হয়েছে, যা গ্রাফে একটি লাইন চার্ট তৈরি করবে।
Sorting এবং Filtering গ্রিড এবং চার্টের মধ্যে ডেটা ম্যানিপুলেট করার জন্য গুরুত্বপূর্ণ। ExtJS Chart এ Sorting এবং Filtering কনফিগারেশন ব্যবহার করে আপনি ডেটা ইন্টারঅ্যাকশনের মাধ্যমে দ্রুত পরিবর্তন করতে পারেন।
Ext.create('Ext.grid.Panel', {
title: 'Filtered Data',
store: store,
columns: [
{ text: 'Month', dataIndex: 'name' },
{ text: 'Data 1', dataIndex: 'data1' },
{ text: 'Data 2', dataIndex: 'data2' }
],
listeners: {
afterrender: function() {
store.filter('data1', 20); // filter by data1 > 20
}
},
renderTo: Ext.getBody()
});
এখানে store.filter() ব্যবহার করে data1 ফিল্ডের উপর ফিল্টার প্রয়োগ করা হয়েছে। আপনি চাইলে এখানে sorting কনফিগারেশনও যোগ করতে পারেন।
ExtJS এর চার্টিং সিস্টেম ডেভেলপারদের ডেটা ভিজ্যুয়ালাইজেশনকে আরও সহজ, কার্যকরী এবং ইন্টারেকটিভ করতে সাহায্য করে।
ExtJS Charts হল ExtJS ফ্রেমওয়ার্কের একটি গুরুত্বপূর্ণ অংশ, যা ডেটাকে ভিজ্যুয়াল উপস্থাপন করতে সহায়ক। এটি ডেটা ভিজ্যুয়ালাইজেশন এবং এনালাইসিসে গুরুত্বপূর্ণ ভূমিকা পালন করে। ExtJS Charts ব্যবহার করে আপনি বিভিন্ন ধরনের গ্রাফ এবং চার্ট তৈরি করতে পারেন, যেমন বার চার্ট, পাই চার্ট, লাইন চার্ট, এবং আরো অনেক ধরনের চার্ট যা ডেটার বিশ্লেষণ এবং প্রদর্শন সহজ করে তোলে।
ExtJS Charts ব্যবহার করে অ্যাপ্লিকেশনগুলোতে ডেটা ভিজ্যুয়ালাইজেশন বা ডেটা প্রেজেন্টেশনের ক্ষমতা উন্নত করা যায়। এটি বিভিন্ন ডেটা সংগ্রহের মাধ্যমে ইউজারকে দ্রুত এবং সহজে ইনফর্মেশন প্রদান করতে সাহায্য করে।
ExtJS এ একাধিক চার্টের ধরন প্রদান করা হয়, কিছু প্রধান ধরন নিম্নরূপ:
ExtJS তে চার্ট ব্যবহার করার জন্য Ext.chart.Chart ক্লাস ব্যবহার করা হয়, এবং ডেটা store থেকে আসে। প্রতিটি চার্টের জন্য, আপনি বিভিন্ন কনফিগারেশন সেট করতে পারেন যেমন type, series, axes, এবং legend।
ধরা যাক, আমরা একটি Bar Chart তৈরি করতে চাই যা মাসিক বিক্রির ডেটা প্রদর্শন করবে।
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: {
fields: ['month', 'sales'],
data: [
{ month: 'January', sales: 150 },
{ month: 'February', sales: 200 },
{ month: 'March', sales: 180 },
{ month: 'April', sales: 220 }
]
},
axes: [{
type: 'category',
position: 'bottom',
fields: ['month'],
title: 'Month'
}, {
type: 'numeric',
position: 'left',
fields: ['sales'],
title: 'Sales'
}],
series: [{
type: 'bar',
xField: 'month',
yField: 'sales',
style: {
fill: '#00f'
}
}]
});
ব্যাখ্যা:
store: এটি ডেটার সোর্স, যেখানে মাসিক বিক্রির ডেটা রাখা হয়েছে।axes: এক্স এবং ওয়াই-অ্যাক্সিস কনফিগারেশন যেখানে এক্স-অ্যাক্সিসে মাস এবং ওয়াই-অ্যাক্সিসে বিক্রির পরিমাণ প্রদর্শিত হয়।series: এই অংশে চার্টের ধরন (এখানে bar) এবং ডেটার জন্য xField এবং yField সেট করা হয়েছে।ExtJS Charts তে বিভিন্ন কাস্টমাইজেশন অপশন পাওয়া যায়, যেমন:
উদাহরণ:
series: [{
type: 'line',
xField: 'month',
yField: 'sales',
title: 'Sales Trend',
style: {
stroke: '#f00',
lineWidth: 2
},
marker: {
type: 'circle',
radius: 4,
fill: '#fff'
},
tooltip: {
trackMouse: true,
renderer: function(tooltip, record) {
tooltip.setHtml(record.get('month') + ': ' + record.get('sales') + ' sales');
}
}
}]
এখানে, line chart এর জন্য tooltip কাস্টমাইজ করা হয়েছে যাতে প্রতি পয়েন্টের সাথে সংশ্লিষ্ট তথ্য প্রদর্শিত হয়।
ExtJS এ ডেটা ভিজ্যুয়ালাইজেশনের জন্য Charts তৈরি করার জন্য একটি শক্তিশালী Ext.chart.Chart ক্লাস রয়েছে, যা আপনাকে বিভিন্ন ধরনের চার্ট (যেমন Line, Bar, Pie, ইত্যাদি) তৈরি করতে সাহায্য করে। এগুলি সাধারণত Ext.chart.CartesianChart বা Ext.chart.PolarChart এর উপর ভিত্তি করে তৈরি করা হয়, যা আপনার ডেটাকে বিভিন্নভাবে প্রদর্শন করতে পারে।
এখানে Line, Bar, Pie, এবং অন্যান্য চার্ট তৈরি করার পদ্ধতি তুলে ধরা হয়েছে।
Line Chart ডেটার ট্রেন্ড বা পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয়, যেখানে এক্স-অক্ষ এবং ওয়াই-অক্ষের উপর ডেটা প্লট করা হয় এবং ডেটা পয়েন্টগুলিকে লাইন দ্বারা সংযুক্ত করা হয়।
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['year', 'data1', 'data2'],
data: [
{ year: 2016, data1: 10, data2: 20 },
{ year: 2017, data1: 20, data2: 30 },
{ year: 2018, data1: 30, data2: 40 },
{ year: 2019, data1: 40, data2: 50 },
{ year: 2020, data1: 50, data2: 60 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Values',
fields: ['data1', 'data2']
}, {
type: 'category',
position: 'bottom',
title: 'Year',
fields: ['year']
}],
series: [{
type: 'line',
xField: 'year',
yField: 'data1',
title: 'Data 1'
}, {
type: 'line',
xField: 'year',
yField: 'data2',
title: 'Data 2'
}]
});
কী কোড বুঝানো হচ্ছে:
store: ডেটার সোর্স, যেখানে ডেটা এবং ফিল্ড নির্ধারণ করা হয়।axes: এক্স-অক্ষ এবং ওয়াই-অক্ষ নির্ধারণ।series: ডেটাকে বিভিন্ন ধরনের সিরিজে প্লট করা (এখানে line সিরিজ ব্যবহার করা হয়েছে)।Bar Chart একটি সাধারণ চার্ট যা ক্যাটেগরি ভিত্তিক ডেটাকে বার (স্তম্ভ) আকারে উপস্থাপন করে।
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['name', 'sales'],
data: [
{ name: 'Q1', sales: 500 },
{ name: 'Q2', sales: 700 },
{ name: 'Q3', sales: 900 },
{ name: 'Q4', sales: 1200 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Sales',
fields: ['sales']
}, {
type: 'category',
position: 'bottom',
title: 'Quarter',
fields: ['name']
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'sales',
title: 'Sales per Quarter'
}]
});
কী কোড বুঝানো হচ্ছে:
xField এবং yField এর মাধ্যমে, এক্স এবং ওয়াই অক্ষের মধ্যে সম্পর্ক নির্ধারণ করা হয়েছে।type: 'bar' সেটিং দিয়ে বার চার্ট তৈরি করা হয়েছে।Pie Chart সাধারণত ডেটার শেয়ার বা অনুপাত প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি বৃত্তে সেগমেন্ট (খণ্ড) আকারে প্রদর্শিত হয়।
Ext.create('Ext.chart.PolarChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['category', 'value'],
data: [
{ category: 'Category 1', value: 45 },
{ category: 'Category 2', value: 30 },
{ category: 'Category 3', value: 25 }
]
},
series: [{
type: 'pie',
angleField: 'value',
label: {
field: 'category'
}
}]
});
কী কোড বুঝানো হচ্ছে:
PolarChart ব্যবহার করা হয়েছে যাতে বৃত্তাকার চার্ট তৈরি হয়।angleField ডেটার ভ্যালুর উপর ভিত্তি করে সেগমেন্টের আঙ্গেল নির্ধারণ করে।ExtJS আরও বিভিন্ন ধরনের চার্ট যেমন Scatter, Area, Heatmap, Gauge ইত্যাদি তৈরি করতে সক্ষম।
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['x', 'y'],
data: [
{ x: 1, y: 2 },
{ x: 2, y: 4 },
{ x: 3, y: 6 },
{ x: 4, y: 8 }
]
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['y']
}, {
type: 'numeric',
position: 'bottom',
fields: ['x']
}],
series: [{
type: 'scatter',
xField: 'x',
yField: 'y'
}]
});
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['year', 'data'],
data: [
{ year: 2016, data: 10 },
{ year: 2017, data: 20 },
{ year: 2018, data: 30 },
{ year: 2019, data: 40 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Values',
fields: ['data']
}, {
type: 'category',
position: 'bottom',
title: 'Year',
fields: ['year']
}],
series: [{
type: 'area',
xField: 'year',
yField: 'data',
title: 'Data Area'
}]
});
ExtJS চার্টগুলি বিভিন্ন ধরনের ভিজ্যুয়ালাইজেশন সমর্থন করে, যার মধ্যে Line Chart, Bar Chart, Pie Chart, Scatter Chart, Area Chart, ইত্যাদি অন্তর্ভুক্ত। এই চার্টগুলি Ext.chart.CartesianChart, Ext.chart.PolarChart, এবং অন্যান্য চার্ট ক্লাস ব্যবহার করে তৈরি করা হয়।
এই চার্টগুলি বিভিন্ন ধরণের ডেটা উপস্থাপন করতে ব্যবহৃত হয়, যা রিপোর্টিং, অ্যানালিটিক্স, ড্যাশবোর্ড ইত্যাদির জন্য উপযুক্ত।
ExtJS তে Charts একটি শক্তিশালী উপাদান, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Chart Configuration এবং Data Binding ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট (যেমন, বার চার্ট, পাই চার্ট, লাইন চার্ট) তৈরি করতে পারেন, এবং ডেটার সাথে চার্ট যুক্ত করতে পারেন। ExtJS এর চার্ট সিস্টেম ডেটাকে সহজে প্রদর্শন করতে এবং ইউজারের জন্য ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে।
ExtJS এর Chart Configuration এর মাধ্যমে আপনি বিভিন্ন ধরনের চার্ট কনফিগার এবং কাস্টমাইজ করতে পারবেন। ExtJS এর Chart কম্পোনেন্টে বিভিন্ন প্রপার্টি ও কনফিগারেশন থাকতে পারে যেমন:
xtype: চার্টের ধরন নির্ধারণ করে (যেমন cartesian, pie ইত্যাদি)।store: ডেটা সোর্স হিসেবে কাজ করে।series: চার্টের মধ্যে প্রদর্শিত তথ্যের ধরন কনফিগার করে (যেমন বার, লাইন, বা পাই চার্ট)।axes: এক্স-অ্যাক্স এবং ওয়াই-অ্যাক্স এর কনফিগারেশন।title: চার্টের শিরোনাম।Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['year', 'data1', 'data2'],
data: [
{ year: 2010, data1: 20, data2: 30 },
{ year: 2011, data1: 25, data2: 35 },
{ year: 2012, data1: 30, data2: 40 },
{ year: 2013, data1: 40, data2: 50 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Value'
}, {
type: 'category',
position: 'bottom',
title: 'Year',
fields: ['year']
}],
series: [{
type: 'line',
xField: 'year',
yField: ['data1', 'data2'],
style: {
lineWidth: 3,
stroke: '#FF0000'
}
}],
title: 'Annual Data Comparison'
});
store: ডেটার সোর্স হিসেবে কাজ করে। এই উদাহরণে, এটি বছরের জন্য দুটি ডেটা সিরিজ ধারণ করছে (data1 এবং data2)।axes: এক্স এবং ওয়াই অ্যাক্স কনফিগার করা হয়েছে। xField এবং yField দ্বারা নির্দেশিত ডেটা ফিল্ডের সাথে সম্পর্কিত।series: লাইন চার্ট তৈরি করতে ব্যবহৃত। xField এবং yField চিহ্নিত করে কোন ডেটা অক্ষের উপর স্থাপন হবে।title: চার্টের শিরোনাম হিসেবে ব্যবহার করা হয়েছে।Data Binding একটি খুবই গুরুত্বপূর্ণ ধারণা যা ExtJS চার্টে ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করতে সহায়ক। ExtJS এর Store এর মাধ্যমে ডেটা চার্টের মধ্যে যুক্ত করা হয় এবং যখন স্টোরের ডেটা পরিবর্তিত হয়, তখন চার্ট স্বয়ংক্রিয়ভাবে আপডেট হয়। এটি রিয়েল-টাইম ডেটা ভিজ্যুয়ালাইজেশনে সহায়ক।
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['month', 'sales'],
data: [
{ month: 'Jan', sales: 10 },
{ month: 'Feb', sales: 15 },
{ month: 'Mar', sales: 20 },
{ month: 'Apr', sales: 25 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Sales'
}, {
type: 'category',
position: 'bottom',
title: 'Month',
fields: ['month']
}],
series: [{
type: 'bar',
xField: 'month',
yField: 'sales',
style: {
fill: '#00FF00'
}
}],
title: 'Monthly Sales Data'
});
// ডেটা আপডেট করার জন্য:
var chartStore = Ext.getCmp('chartID').getStore();
chartStore.loadData([
{ month: 'May', sales: 30 },
{ month: 'Jun', sales: 35 }
], true);
store: গ্রিডের মত, স্টোর চার্টে ডেটা ধারণ করে। এখানে sales ডেটা বাইন্ড করা হয়েছে।loadData: loadData মেথড ব্যবহার করে নতুন ডেটা যুক্ত করা হয়। এখানে, চার্টের ডেটা "May" এবং "Jun" এর জন্য আপডেট করা হচ্ছে।ExtJS বিভিন্ন ধরনের চার্ট প্রকার সমর্থন করে, এবং আপনি যেকোনো একাধিক প্রকারে ডেটা ভিজ্যুয়ালাইজ করতে পারেন। নিচে কয়েকটি জনপ্রিয় চার্ট টাইপের উদাহরণ দেওয়া হল:
series: [{
type: 'bar',
xField: 'category',
yField: 'value'
}]
Ext.create('Ext.chart.PolarChart', {
store: store,
series: [{
type: 'pie',
angleField: 'value',
label: {
field: 'category'
}
}]
});
series: [{
type: 'line',
xField: 'date',
yField: 'value'
}]
series: [{
type: 'radar',
xField: 'category',
yField: 'value'
}]
ExtJS এর চার্ট কনফিগারেশনে styling এবং themes সংযোজন করতে পারেন। এটি ডেটার ভিজ্যুয়াল অ্যাপিয়ারেন্স কাস্টমাইজ করতে সহায়ক।
series: [{
type: 'bar',
xField: 'category',
yField: 'value',
style: {
fill: '#00FF00',
lineWidth: 3
}
}]
এখানে, fill ব্যবহার করে বার চার্টের বর্ণ পরিবর্তন করা হয়েছে এবং lineWidth দ্বারা বর্ডারের পুরুত্ব নির্ধারণ করা হয়েছে।
ExtJS তে Chart Configuration এবং Data Binding ফিচারটি ডেটা ভিজ্যুয়ালাইজেশন আরও উন্নত এবং ইন্টারঅ্যাকটিভ করার জন্য খুবই কার্যকরী।
ExtJS-এ Chart Customization বিভিন্ন উপায়ে করা যায়, যেমন: Colors, Labels, এবং Axes কাস্টমাইজ করে আপনি আপনার চার্টের ভিজ্যুয়াল প্রেজেন্টেশন এবং ডেটার উপস্থাপনাকে আরও উন্নত এবং আকর্ষণীয় করতে পারেন। ExtJS এর চার্ট সিস্টেম অত্যন্ত কাস্টমাইজেবল, যা আপনাকে আপনার চাহিদা অনুযায়ী বিভিন্ন উপাদান কাস্টমাইজ করতে সহায়তা করে।
এখানে আমরা চার্টের Colors, Labels, এবং Axes কাস্টমাইজ করার কিছু উদাহরণ দেখব।
Colors কাস্টমাইজ করে আপনি চার্টের বিভিন্ন অংশ যেমন, বারের রং, লাইন, ডেটা পয়েন্ট বা সেগমেন্ট ইত্যাদি পরিবর্তন করতে পারেন।
Bar Chart Example with Custom Colors:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['category', 'value'],
data: [
{ category: 'Q1', value: 10 },
{ category: 'Q2', value: 20 },
{ category: 'Q3', value: 30 },
{ category: 'Q4', value: 40 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Value'
}, {
type: 'category',
position: 'bottom',
title: 'Quarter',
fields: ['category']
}],
series: [{
type: 'bar',
xField: 'category',
yField: 'value',
style: {
fill: '#FF5733', // Custom color for the bars
stroke: '#C70039',
lineWidth: 3
},
title: 'Quarterly Sales'
}],
title: 'Quarterly Sales Data'
});
style: এখানে fill এবং stroke দ্বারা বার চার্টের রং কাস্টমাইজ করা হয়েছে। lineWidth দ্বারা বর্ডারের পুরুত্ব নির্ধারণ করা হয়েছে।Labels চার্টের মধ্যে থাকা ডেটাকে আরো স্পষ্টভাবে উপস্থাপন করে। আপনি কাস্টম লেবেল তৈরি করতে পারেন এবং তাদের অবস্থান, ফন্ট, সাইজ, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন।
Bar Chart Example with Custom Labels:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['category', 'value'],
data: [
{ category: 'Q1', value: 10 },
{ category: 'Q2', value: 20 },
{ category: 'Q3', value: 30 },
{ category: 'Q4', value: 40 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Value'
}, {
type: 'category',
position: 'bottom',
title: 'Quarter',
fields: ['category']
}],
series: [{
type: 'bar',
xField: 'category',
yField: 'value',
style: {
fill: '#FF5733'
},
label: {
field: 'value', // Field to display
display: 'insideEnd', // Position of label
font: '14px Arial', // Font style
color: '#000000' // Label color
}
}],
title: 'Quarterly Sales Data'
});
label: এখানে, field দ্বারা নির্দিষ্ট ফিল্ডের মান দেখানো হচ্ছে এবং display দ্বারা লেবেলটির অবস্থান নির্ধারণ করা হয়েছে।font এবং color: লেবেলটির ফন্ট এবং রঙ কাস্টমাইজ করা হয়েছে।Axes (অ্যাক্সিস) চার্টের গ্রিড এবং ডেটা পয়েন্টগুলির মধ্যে সম্পর্ক প্রদর্শন করে। ExtJS-এ আপনি axes কাস্টমাইজ করতে পারেন, যেমন এক্স-অ্যাক্স এবং ওয়াই-অ্যাক্সের লেবেল, রঙ, টাইটেল, স্কেল ইত্যাদি পরিবর্তন করতে।
Cartesians Axis Customization Example:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['month', 'sales'],
data: [
{ month: 'Jan', sales: 15 },
{ month: 'Feb', sales: 20 },
{ month: 'Mar', sales: 25 },
{ month: 'Apr', sales: 30 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Sales',
fields: ['sales'],
grid: true,
label: {
font: '16px Arial', // Custom font for labels
color: '#00F'
},
style: {
stroke: '#0000FF', // Custom color for axis
lineWidth: 2
}
}, {
type: 'category',
position: 'bottom',
title: 'Month',
fields: ['month'],
label: {
font: '14px Arial', // Custom font for labels
color: '#FF5733'
}
}],
series: [{
type: 'line',
xField: 'month',
yField: 'sales',
title: 'Monthly Sales'
}],
title: 'Monthly Sales Data'
});
title প্রপার্টি দিয়ে আপনি এক্স বা ওয়াই অ্যাক্সের শিরোনাম কাস্টমাইজ করতে পারেন।label: অ্যাক্সের লেবেল কাস্টমাইজ করতে font এবং color ব্যবহার করা হয়েছে।style: অ্যাক্সিসের রঙ এবং লাইন width কাস্টমাইজ করা হয়েছে।ExtJS চার্টে আরও কিছু কাস্টমাইজেশন অপশন রয়েছে, যেমন:
legend: চার্টের লিজেন্ড কাস্টমাইজ করা, যা সিরিজগুলির নাম এবং রং প্রদর্শন করে।tooltip: ডেটা পয়েন্টের উপর হোভার করলে টুলটিপ প্রদর্শিত হয়, যা ডেটার আরও বিস্তারিত তথ্য দেয়।grid: গ্রিড লাইন এবং এর স্টাইল কাস্টমাইজ করা।Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['category', 'value'],
data: [
{ category: 'Jan', value: 10 },
{ category: 'Feb', value: 20 },
{ category: 'Mar', value: 30 }
]
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Value',
fields: ['value']
}, {
type: 'category',
position: 'bottom',
title: 'Category',
fields: ['category']
}],
series: [{
type: 'bar',
xField: 'category',
yField: 'value',
title: 'Monthly Sales'
}],
legend: {
position: 'top',
font: '14px Arial',
color: '#FF5733'
},
title: 'Sales Data'
});
ExtJS এর এই কাস্টমাইজেশন ফিচারগুলি আপনাকে আপনার চার্টের দর্শনীয়তা এবং কার্যকারিতা উন্নত করতে সহায়ক।
ExtJS ফ্রেমওয়ার্কটি শক্তিশালী Charting ফিচার সহ আসে যা বিভিন্ন ধরণের ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। ExtJS এর Chart কম্পোনেন্টের মাধ্যমে আপনি রিচ এবং ইন্টারেক্টিভ চার্ট তৈরি করতে পারেন, যা ডেটা বিশ্লেষণ এবং রিপোর্টিংয়ের জন্য অত্যন্ত কার্যকর। Interactions এবং Animations চার্টের সাথে ইন্টারেক্টিভিটি এবং ভিজ্যুয়াল প্রভাব যোগ করতে ব্যবহৃত হয়।
ExtJS Chart কম্পোনেন্ট আপনাকে Line, Bar, Pie, Radar, Scatter ইত্যাদি ধরণের চার্ট তৈরি করতে সহায়ক। এই চার্টগুলি বিভিন্ন ডেটা উপস্থাপন করার জন্য ব্যবহার করা হয় এবং এটি ডেটা ভিজ্যুয়ালাইজেশনের জন্য একটি অত্যন্ত শক্তিশালী টুল।
চর্ট তৈরির উদাহরণ:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['month', 'data1'],
data: [
{ month: 'Jan', data1: 1 },
{ month: 'Feb', data1: 2 },
{ month: 'Mar', data1: 3 },
{ month: 'Apr', data1: 4 }
]
},
axes: [{
type: 'category',
position: 'bottom',
fields: ['month'],
title: 'Month'
}, {
type: 'numeric',
position: 'left',
fields: ['data1'],
title: 'Value'
}],
series: [{
type: 'line',
xField: 'month',
yField: 'data1',
style: {
stroke: 'blue',
lineWidth: 2
}
}]
});
Interactions হল সেই বৈশিষ্ট্য যা ব্যবহারকারীকে চার্টের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেয়। ExtJS তে Chart Interactions ব্যবহার করে আপনি ব্যবহারকারীদের ড্র্যাগ, জুম, হোভার ইত্যাদি কাজ করতে দিতে পারেন। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং ডেটার সাথে ইনফরমেশন শেয়ারিং সহজ করে।
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['month', 'data1'],
data: [
{ month: 'Jan', data1: 1 },
{ month: 'Feb', data1: 2 },
{ month: 'Mar', data1: 3 },
{ month: 'Apr', data1: 4 }
]
},
axes: [{
type: 'category',
position: 'bottom',
fields: ['month'],
title: 'Month'
}, {
type: 'numeric',
position: 'left',
fields: ['data1'],
title: 'Value'
}],
series: [{
type: 'line',
xField: 'month',
yField: 'data1',
style: {
stroke: 'blue',
lineWidth: 2
}
}],
interactions: ['panzoom']
});
interactions: ['panzoom']: এই ইন্টারঅ্যাকশনটি ব্যবহারকারীকে চার্টে প্যান এবং জুম করার সুযোগ দেয়।অন্যান্য ইন্টারঅ্যাকশন:
itemhighlight: একটি চার্ট পয়েন্ট হাইলাইট করতে ব্যবহৃত হয় যখন ব্যবহারকারী মাউস হভার করে।rotate: ব্যবহারকারীকে চার্টের ঘূর্ণন করতে দেয়।zoom: ব্যবহারকারীকে চার্টে জুম ইন এবং জুম আউট করার সুযোগ দেয়।Animations চার্টের মধ্যে ভিজ্যুয়াল প্রভাব যোগ করে, যা ব্যবহারকারীকে ডেটার পরিবর্তন বা গতি বুঝতে সহায়ক করে। ExtJS তে আপনি বিভিন্ন ধরনের এনিমেশন ব্যবহার করতে পারেন, যেমন বার চার্টের বার বাড়ানো, লাইন চার্টে পয়েন্টের মধ্যে রূপান্তর ইত্যাদি।
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: {
fields: ['month', 'data1'],
data: [
{ month: 'Jan', data1: 1 },
{ month: 'Feb', data1: 2 },
{ month: 'Mar', data1: 3 },
{ month: 'Apr', data1: 4 }
]
},
axes: [{
type: 'category',
position: 'bottom',
fields: ['month'],
title: 'Month'
}, {
type: 'numeric',
position: 'left',
fields: ['data1'],
title: 'Value'
}],
series: [{
type: 'line',
xField: 'month',
yField: 'data1',
style: {
stroke: 'blue',
lineWidth: 2
},
highlight: {
size: 7,
radius: 7
},
animation: {
duration: 1000, // 1 সেকেন্ডের মধ্যে এনিমেশন হবে
easing: 'ease-out'
}
}]
});
animation: এটি চার্টের অ্যানিমেশন কনফিগারেশন সেট করতে ব্যবহৃত হয়।duration: অ্যানিমেশনের সময়কাল।easing: অ্যানিমেশনের গতি নিয়ন্ত্রণ (যেমন ease-out, linear ইত্যাদি)।ExtJS Charting এর মাধ্যমে আপনি শক্তিশালী এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। Interactions এবং Animations চার্টের সাথে যুক্ত করলে এটি আরও ইন্টারঅ্যাকটিভ এবং দৃশ্যমানভাবে উন্নত হয়ে ওঠে। Interactions ব্যবহারকারীদের চার্টের সাথে ইনপুট নিতে এবং বিশ্লেষণ করতে সহায়ক, এবং Animations ডেটার পরিবর্তন এবং ট্রানজিশনকে আরও আকর্ষণীয় এবং স্পষ্ট করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
