Web Development Line, Bar, Pie, এবং Other Charts তৈরি গাইড ও নোট

ExtJS এ ডেটা ভিজ্যুয়ালাইজেশনের জন্য Charts তৈরি করার জন্য একটি শক্তিশালী Ext.chart.Chart ক্লাস রয়েছে, যা আপনাকে বিভিন্ন ধরনের চার্ট (যেমন Line, Bar, Pie, ইত্যাদি) তৈরি করতে সাহায্য করে। এগুলি সাধারণত Ext.chart.CartesianChart বা Ext.chart.PolarChart এর উপর ভিত্তি করে তৈরি করা হয়, যা আপনার ডেটাকে বিভিন্নভাবে প্রদর্শন করতে পারে।

এখানে Line, Bar, Pie, এবং অন্যান্য চার্ট তৈরি করার পদ্ধতি তুলে ধরা হয়েছে।

১. Line Chart

Line Chart ডেটার ট্রেন্ড বা পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয়, যেখানে এক্স-অক্ষ এবং ওয়াই-অক্ষের উপর ডেটা প্লট করা হয় এবং ডেটা পয়েন্টগুলিকে লাইন দ্বারা সংযুক্ত করা হয়।

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

Bar Chart একটি সাধারণ চার্ট যা ক্যাটেগরি ভিত্তিক ডেটাকে বার (স্তম্ভ) আকারে উপস্থাপন করে।

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

Pie Chart সাধারণত ডেটার শেয়ার বা অনুপাত প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি বৃত্তে সেগমেন্ট (খণ্ড) আকারে প্রদর্শিত হয়।

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 ডেটার ভ্যালুর উপর ভিত্তি করে সেগমেন্টের আঙ্গেল নির্ধারণ করে।

৪. Other Charts (স্টেটিসটিকাল ও অন্যান্য)

ExtJS আরও বিভিন্ন ধরনের চার্ট যেমন Scatter, Area, Heatmap, Gauge ইত্যাদি তৈরি করতে সক্ষম।

Scatter Chart:

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'
    }]
});

Area Chart:

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, এবং অন্যান্য চার্ট ক্লাস ব্যবহার করে তৈরি করা হয়।

• Line Chart: ডেটার পরিবর্তন বা ট্রেন্ড প্রদর্শন করতে ব্যবহৃত হয়।
• Bar Chart: ক্যাটেগরি ভিত্তিক ডেটা প্রদর্শন করতে ব্যবহৃত হয়।
• Pie Chart: ডেটার অনুপাত বা শেয়ার প্রদর্শন করতে ব্যবহৃত হয়।
• Other Charts: বিশেষ ধরনের গ্রাফ বা ডেটা ভিজ্যুয়ালাইজেশন (যেমন Scatter, Area, Gauge) তৈরি করতে ব্যবহৃত হয়।

এই চার্টগুলি বিভিন্ন ধরণের ডেটা উপস্থাপন করতে ব্যবহৃত হয়, যা রিপোর্টিং, অ্যানালিটিক্স, ড্যাশবোর্ড ইত্যাদির জন্য উপযুক্ত।