Multiple সিরিজের চার্ট তৈরি

জিডব্লিউটি হাই চার্ট (GWT High Charts) - Web Development

1.1k

Highcharts ব্যবহার করে একাধিক সিরিজের চার্ট তৈরি করা অনেক বেশি তথ্য প্রদর্শন করতে সাহায্য করে, যা বিভিন্ন ডেটা ক্যাটেগরি বা ট্রেন্ডের তুলনা করতে সহায়ক। GWT (Google Web Toolkit) এর মাধ্যমে Highcharts এর এই সুবিধা ব্যবহার করা যায়। এখানে আমরা কিভাবে GWT এবং Highcharts ব্যবহার করে Multiple সিরিজের চার্ট তৈরি করা যায় তা নিয়ে আলোচনা করব।

Multiple সিরিজের চার্ট তৈরি করার জন্য পদক্ষেপ

১. Highcharts লাইব্রেরি যোগ করা

প্রথমে, আপনার GWT প্রকল্পে Highcharts লাইব্রেরি অন্তর্ভুক্ত করতে হবে। Highcharts এর JavaScript ফাইলটি আপনার প্রকল্পের war/js/ ফোল্ডারে রাখুন, যেমন war/js/highcharts.js।

২. GWT এর মাধ্যমে Multiple সিরিজের ডেটা তৈরি করা

Highcharts এর Multiple সিরিজ চার্টে বিভিন্ন ডেটা সিরিজ একত্রে প্রদর্শন করা হয়। GWT থেকে JavaScript এ ডেটা পাস করার সময় একাধিক সিরিজের জন্য ডেটা তৈরির প্রক্রিয়া নিচে দেওয়া হল:

public class MultipleSeriesChart {

    public void createChart() {
        // GWT Java থেকে Multiple সিরিজের ডেটা তৈরি করা
        String chartData = "["
                + "{ name: 'Series 1', data: [[0, 29.9], [1, 71.5], [2, 106.4], [3, 129.2]] },"
                + "{ name: 'Series 2', data: [[0, 39.9], [1, 81.5], [2, 116.4], [3, 139.2]] },"
                + "{ name: 'Series 3', data: [[0, 49.9], [1, 91.5], [2, 126.4], [3, 149.2]] }"
                + "]";

        // Highcharts-এ Multiple সিরিজ চার্ট তৈরি করা
        createHighchart(chartData);
    }

    // JSNI ফাংশন যা Highcharts Multiple সিরিজের চার্ট তৈরি করবে
    private native void createHighchart(String chartData) /*-{
        var chart = new $wnd.Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            title: {
                text: 'Multiple Series Chart Example'
            },
            xAxis: {
                title: { text: 'X Axis' },
                categories: ['Jan', 'Feb', 'Mar', 'Apr']
            },
            yAxis: {
                title: { text: 'Y Axis' }
            },
            series: $wnd.JSON.parse(chartData) // Multiple সিরিজ ডেটা পাস করা হচ্ছে
        });
    }-*/;
}

এখানে:

createChart() মেথডে আমরা তিনটি সিরিজের জন্য ডেটা তৈরি করেছি, যেগুলি JSON ফরম্যাটে গঠিত।
createHighchart() মেথডে GWT থেকে JSON ডেটা পাস করা হচ্ছে এবং Highcharts.chart ফাংশনকে কল করে Multiple সিরিজের চার্ট তৈরি করা হচ্ছে।

৩. HTML ফাইল তৈরি করা

Highcharts এর চার্ট প্রদর্শনের জন্য একটি HTML কনটেইনার তৈরি করতে হবে। নিচে একটি উদাহরণ দেওয়া হল:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Series Chart Example</title>
    <script src="js/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 100%; height: 400px;"></div>
</body>
</html>

এখানে id="container" হল সেই div এলিমেন্ট যেখানে Highcharts চার্টটি রেন্ডার হবে।

Multiple সিরিজের চার্টের সুবিধা

তুলনামূলক বিশ্লেষণ: একাধিক সিরিজের চার্ট ব্যবহার করলে আপনি একসাথে বিভিন্ন ডেটা সিরিজ তুলনা করতে পারবেন, যা বিশ্লেষণকে সহজ করে।
ডেটার ট্রেন্ড বুঝতে সুবিধা: একাধিক ডেটা সিরিজের মধ্যে সম্পর্ক এবং ট্রেন্ড খুব সহজে বিশ্লেষণ করা সম্ভব হয়।
ইন্টারঅ্যাকটিভ: Highcharts ব্যবহার করলে আপনি চার্টের মধ্যে ইন্টারঅ্যাকশন সুবিধা পাবেন, যেমন হভারিং, লেজেন্ড ক্লিক করা ইত্যাদি।

Highcharts Multiple সিরিজের চার্ট কাস্টমাইজেশন

Highcharts এর Multiple সিরিজের চার্টকে আরও কাস্টমাইজ করার অনেক সুযোগ আছে। আপনি সিরিজের নাম, রঙ, টাইপ, এবং আরও অনেক কিছু পরিবর্তন করতে পারেন।

সিরিজের রঙ কাস্টমাইজ করা

private native void createHighchart(String chartData) /*-{
    var chart = new $wnd.Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Multiple Series Chart Example'
        },
        xAxis: {
            title: { text: 'X Axis' },
            categories: ['Jan', 'Feb', 'Mar', 'Apr']
        },
        yAxis: {
            title: { text: 'Y Axis' }
        },
        series: $wnd.JSON.parse(chartData), // Multiple সিরিজ ডেটা পাস করা হচ্ছে
        colors: ['#FF0000', '#00FF00', '#0000FF'] // সিরিজের রঙ কাস্টমাইজ করা
    });
}-*/;

এখানে, colors প্রোপার্টি ব্যবহার করে সিরিজের জন্য আলাদা রঙ দেওয়া হয়েছে।

সারাংশ

GWT এবং Highcharts ব্যবহার করে Multiple সিরিজের চার্ট তৈরি করা খুবই সহজ। আপনি GWT এর Java কোডের মাধ্যমে Highcharts এর সিরিজ ডেটা তৈরি করতে পারেন এবং সেটি JSON ফরম্যাটে Highcharts-এ পাস করতে পারেন। এই পদ্ধতি ব্যবহার করে আপনি একাধিক ডেটা সিরিজের তুলনা এবং বিশ্লেষণ করতে পারেন। Highcharts এর বিভিন্ন কাস্টমাইজেশন অপশনের মাধ্যমে আপনি চার্টটি আরও কার্যকর এবং আকর্ষণীয় করতে পারবেন।

Content added By

Rezwan Siddiki Tamim

Multiple Data Series ব্যবহার করে চার্ট তৈরি করা

715

Highcharts এ একাধিক ডেটা সিরিজ (Multiple Data Series) ব্যবহার করে চার্ট তৈরি করা একটি শক্তিশালী ফিচার, যার মাধ্যমে আপনি বিভিন্ন ডেটা সেট একসাথে একটি চার্টে প্রদর্শন করতে পারেন। এটি একাধিক ভিন্ন ভিন্ন ডেটা বা মেট্রিক্স তুলনা করার জন্য অত্যন্ত উপকারী। উদাহরণস্বরূপ, আপনি একাধিক বছরের বিক্রয় ডেটা বা বিভিন্ন বিভাগের ডেটা একসাথে প্রদর্শন করতে পারেন।

এখানে, series কনফিগারেশন ব্যবহার করে একাধিক ডেটা সিরিজ যোগ করা হয় এবং প্রতিটি সিরিজ আলাদা করে কাস্টমাইজ করা যেতে পারে।

উদাহরণ: Multiple Data Series সহ একটি Line Chart

নিচে একটি উদাহরণ দেওয়া হলো, যেখানে দুটি আলাদা ডেটা সিরিজ (Sales 2023 এবং Sales 2024) ব্যবহার করে একটি লাইন চার্ট তৈরি করা হয়েছে।

Highcharts.chart('container', {
    chart: {
        type: 'line'  // চার্টের ধরন লাইন
    },
    title: {
        text: 'Sales Comparison (2023 vs 2024)'  // চার্টের শিরোনাম
    },
    subtitle: {
        text: 'Comparing sales of two years'  // চার্টের সাবটাইটেল
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']  // x-axis এর কেটেগরি
    },
    yAxis: {
        title: {
            text: 'Sales (in USD)'  // y-axis এর শিরোনাম
        }
    },
    series: [{
        name: 'Sales 2023',  // প্রথম সিরিজের নাম
        data: [100, 150, 200, 250, 300]  // 2023 সালের ডেটা
    }, {
        name: 'Sales 2024',  // দ্বিতীয় সিরিজের নাম
        data: [120, 180, 220, 270, 350]  // 2024 সালের ডেটা
    }]
});

এই কোডে দুটি সিরিজ (Sales 2023 এবং Sales 2024) তৈরি করা হয়েছে, এবং প্রতিটি সিরিজের জন্য আলাদা ডেটা প্রদান করা হয়েছে। xAxis এর কেটেগরির মাধ্যমে মাসগুলো (Jan, Feb, Mar, Apr, May) চিহ্নিত করা হয়েছে, এবং yAxis এর মাধ্যমে বিক্রয়ের মান (USD) নির্ধারণ করা হয়েছে।

উদাহরণ: Multiple Data Series সহ একটি Column Chart

একইভাবে, আপনি Multiple Data Series ব্যবহার করে একটি কলাম চার্টও তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে তিনটি ভিন্ন ডেটা সিরিজ (Product A, Product B, Product C) ব্যবহার করা হয়েছে।

Highcharts.chart('container', {
    chart: {
        type: 'column'  // চার্টের ধরন কলাম
    },
    title: {
        text: 'Product Sales Comparison'  // চার্টের শিরোনাম
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']  // x-axis এর কেটেগরি
    },
    yAxis: {
        title: {
            text: 'Units Sold'  // y-axis এর শিরোনাম
        }
    },
    series: [{
        name: 'Product A',
        data: [5, 10, 15, 20, 25]  // Product A এর ডেটা
    }, {
        name: 'Product B',
        data: [10, 15, 20, 25, 30]  // Product B এর ডেটা
    }, {
        name: 'Product C',
        data: [15, 20, 25, 30, 35]  // Product C এর ডেটা
    }]
});

এখানে, তিনটি সিরিজের ডেটা আলাদাভাবে দেখানো হচ্ছে: Product A, Product B, এবং Product C। প্রতিটি সিরিজের ডেটা কলাম আকারে প্রদর্শিত হবে।

উদাহরণ: Multiple Data Series সহ একটি Pie Chart

এছাড়াও, Multiple Data Series সহ একটি পাই চার্ট তৈরি করা যায়, যেখানে বিভিন্ন বিভাগের ভগ্নাংশ (percentage) প্রদর্শিত হবে।

Highcharts.chart('container', {
    chart: {
        type: 'pie'  // চার্টের ধরন পাই
    },
    title: {
        text: 'Market Share Distribution'  // চার্টের শিরোনাম
    },
    series: [{
        name: 'Market Share',
        data: [{
            name: 'Product A',
            y: 45  // Product A এর অংশ
        }, {
            name: 'Product B',
            y: 30  // Product B এর অংশ
        }, {
            name: 'Product C',
            y: 25  // Product C এর অংশ
        }]
    }]
});

এখানে, পাই চার্টের মধ্যে তিনটি সিরিজের বাজার শেয়ার দেখানো হচ্ছে: Product A, Product B, এবং Product C। প্রতিটি সিরিজের জন্য y মান নির্ধারণ করে দেওয়া হয়েছে যা পাই চার্টে শতাংশ হিসাব করে প্রদর্শিত হবে।

সারাংশ

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

Content added By

Rezwan Siddiki Tamim

চার্টে Multiple Axes যোগ করা

743

Highcharts লাইব্রেরি আপনাকে একাধিক Axes (অক্ষ) যোগ করার সুবিধা দেয়, যা একসাথে বিভিন্ন ধরনের ডেটা প্রদর্শন করতে সাহায্য করে। সাধারণত, X এবং Y অক্ষের সাথে একাধিক ডেটা সিরিজ বা স্কেল ব্যবহার করার প্রয়োজন হলে Multiple Axes ব্যবহার করা হয়। GWT (Google Web Toolkit) ব্যবহার করে আপনি Highcharts এর মাধ্যমে সহজেই Multiple Axes যোগ করতে পারেন এবং একাধিক অক্ষের মধ্যে ডেটা রেঞ্জ এবং স্কেল কাস্টমাইজ করতে পারেন।

এই সেকশনে আমরা দেখব কিভাবে GWT এবং Highcharts ব্যবহার করে একাধিক অক্ষ (Multiple Axes) যুক্ত করা যায়।

১. Highcharts-এ Multiple Axes কাস্টমাইজেশন

Highcharts এ Multiple Axes যোগ করার জন্য, আপনাকে xAxis এবং yAxis অপশনের মধ্যে একাধিক অক্ষ কনফিগার করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো, যেখানে একটি চার্টে দুটি Y অক্ষ (Primary এবং Secondary Y-Axis) ব্যবহার করা হয়েছে।

উদাহরণ: Multiple Axes সহ চার্ট তৈরি করা

$wnd.Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Multiple Axes Example'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: [{ // Primary Y-Axis
        title: {
            text: 'Temperature (°C)'
        },
        min: 0
    }, { // Secondary Y-Axis
        title: {
            text: 'Rainfall (mm)'
        },
        opposite: true, // Secondary Y-Axis will be placed on the right
        min: 0
    }],
    series: [{
        name: 'Temperature',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    }, {
        name: 'Rainfall',
        data: [30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
        yAxis: 1 // Linking Rainfall data to the secondary Y-Axis
    }]
});

এই উদাহরণে:

প্রথম yAxis হচ্ছে Primary Y-Axis, যা তাপমাত্রার (Temperature) জন্য ব্যবহৃত হচ্ছে।
দ্বিতীয় yAxis হচ্ছে Secondary Y-Axis, যা বৃষ্টিপাতের (Rainfall) জন্য ব্যবহৃত হচ্ছে এবং opposite: true প্রপার্টি ব্যবহার করে এটি ডান পাশে অবস্থান করবে।
series[1] (Rainfall) কে Secondary Y-Axis এর সাথে সংযুক্ত করা হয়েছে yAxis: 1 সেটিং ব্যবহার করে।

২. GWT এ Multiple Axes কাস্টমাইজেশন

GWT এবং Highcharts এর মধ্যে ইন্টিগ্রেশন করতে, আমরা JavaScript Overlay বা JsInterop ব্যবহার করে Highcharts এর কোডে একাধিক অক্ষ কাস্টমাইজেশন যোগ করতে পারি। নিচে একটি উদাহরণ দেওয়া হলো কিভাবে GWT-এ Multiple Axes কাস্টমাইজ করা যায়।

GWT কোডে Multiple Axes যুক্ত করা

public class HighchartsMultipleAxesExample {
    
    public void createChart() {
        // Multiple Axes এর জন্য ডেটা তৈরি করা
        String chartData = "[[1, 29], [2, 71], [3, 106], [4, 129], [5, 144]]";
        String rainfallData = "[[1, 30], [2, 40], [3, 50], [4, 60], [5, 70]]";
        
        // Highcharts JSNI ফাংশন ব্যবহার করে চার্ট তৈরি করা
        createMultipleAxesChart(chartData, rainfallData);
    }

    private native void createMultipleAxesChart(String temperatureData, String rainfallData) /*-{
        var chart = new $wnd.Highcharts.chart('container', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Multiple Axes with GWT'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
            },
            yAxis: [{
                title: {
                    text: 'Temperature (°C)'
                },
                min: 0
            }, {
                title: {
                    text: 'Rainfall (mm)'
                },
                opposite: true, // Secondary Y-Axis will be placed on the right
                min: 0
            }],
            series: [{
                name: 'Temperature',
                data: $wnd.JSON.parse(temperatureData)
            }, {
                name: 'Rainfall',
                data: $wnd.JSON.parse(rainfallData),
                yAxis: 1 // Linking Rainfall data to the secondary Y-Axis
            }]
        });
    }-*/;
}

এখানে:

createMultipleAxesChart() ফাংশনটি temperatureData এবং rainfallData পাস করে Highcharts চার্ট তৈরি করে।
প্রথম yAxis (Primary) তাপমাত্রা (Temperature) প্রদর্শন করে, এবং দ্বিতীয় yAxis (Secondary) বৃষ্টিপাত (Rainfall) প্রদর্শন করে।
yAxis: 1 ব্যবহার করে বৃষ্টিপাতের ডেটা Secondary Y-Axis এর সাথে সংযুক্ত করা হয়েছে।

৩. Multiple Axes এর আরও কাস্টমাইজেশন

Highcharts এ Multiple Axes কাস্টমাইজ করা আরও কয়েকটি উপায়ে করা যেতে পারে:

Axis Grid Lines: আপনি একাধিক অক্ষের জন্য গ্রিড লাইন কাস্টমাইজ করতে পারেন, যেমন একটি অক্ষের জন্য হালকা গ্রিড লাইন এবং অন্যটির জন্য গা dark ় গ্রিড লাইন।
Axis Titles: প্রতিটি অক্ষের জন্য আলাদা টাইটেল সেট করা যেতে পারে, যেমন "Temperature (°C)" এবং "Rainfall (mm)"।
Axis Ranges: আপনি যেকোনো অক্ষের জন্য min, max, tickInterval ইত্যাদি সেটিংস ব্যবহার করে রেঞ্জ এবং স্কেল কাস্টমাইজ করতে পারেন।

উদাহরণ: গ্রিড লাইন কাস্টমাইজ করা

yAxis: [{
    title: {
        text: 'Temperature (°C)'
    },
    gridLineWidth: 1, // Primary Y-Axis grid line width
    gridLineColor: '#cccccc' // Grid line color for primary axis
}, {
    title: {
        text: 'Rainfall (mm)'
    },
    gridLineWidth: 2, // Secondary Y-Axis grid line width
    gridLineColor: '#ff0000', // Grid line color for secondary axis
    opposite: true
}]

এখানে:

Primary Y-Axis এর জন্য গ্রিড লাইন হালকা রঙে এবং প্রস্থ 1 সেট করা হয়েছে।
Secondary Y-Axis এর জন্য গ্রিড লাইন গা dark ় রঙে এবং প্রস্থ 2 সেট করা হয়েছে।

সারাংশ

Highcharts ব্যবহার করে একাধিক অক্ষ (Multiple Axes) যোগ করা খুবই সহজ এবং শক্তিশালী একটি বৈশিষ্ট্য, যা বিভিন্ন ধরনের ডেটা রেঞ্জ এবং স্কেলকে একসাথে প্রদর্শন করতে সাহায্য করে। GWT এবং Highcharts এর মাধ্যমে আপনি এই Multiple Axes কাস্টমাইজ করতে পারেন এবং একটি উন্নত ও ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। GWT-এ JavaScript Overlay বা JsInterop ব্যবহার করে Highcharts এর কাস্টমাইজেশন গুলি একত্রিত করা সম্ভব, যা ডেভেলপারদের জন্য আরও কার্যকর এবং নমনীয় সমাধান প্রদান করে।

Content added By

Rezwan Siddiki Tamim

সিম্পল এবং অ্যাডভান্সড সিরিজ কনফিগারেশন

1.2k

Highcharts ব্যবহার করে আপনি সহজ এবং উন্নত (অ্যাডভান্সড) সিরিজ কনফিগারেশন তৈরি করতে পারেন। সিরিজ কনফিগারেশন হলো ডেটার সেট যা আপনি চার্টে প্রদর্শন করতে চান, এবং এটি বিভিন্ন ধরণের হতে পারে যেমন লাইন, বার, পাই, ইত্যাদি। GWT (Google Web Toolkit) ব্যবহার করে Highcharts এর সিরিজ কনফিগারেশন সহজেই ইন্টিগ্রেট করা যায়। নিচে সিম্পল এবং অ্যাডভান্সড সিরিজ কনফিগারেশনের উদাহরণ দেওয়া হলো।

১. সিম্পল সিরিজ কনফিগারেশন

একটি সিম্পল সিরিজ কনফিগারেশন হলো যখন আপনি একটি নির্দিষ্ট ধরনের চার্ট তৈরি করেন এবং সেটি একটি সাধারণ ডেটা সেটের সাথে কনফিগার করেন। উদাহরণস্বরূপ, একটি লাইন চার্ট তৈরি করা যা একটি ডেটা সিরিজকে প্রদর্শন করে।

১.১. সিম্পল লাইন চার্ট সিরিজ কনফিগারেশন

package com.mycompany.myproject.client;

import com.google.gwt.core.client.JsArray;

public class HighchartsIntegration {

    public static native void createChart(String containerId, JsArray<Data> data) /*-{
        $wnd.Highcharts.chart(containerId, {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Simple Line Chart'
            },
            series: [{
                name: 'Data Series',
                data: data  // Simple data series
            }]
        });
    }-*/;

    public static class Data extends JavaScriptObject {
        protected Data() {}

        public final native int getX() /*-{
            return this.x;
        }-*/;

        public final native int getY() /*-{
            return this.y;
        }-*/;
    }
}

এখানে, একটি সিম্পল লাইন চার্ট তৈরি করা হয়েছে যেখানে একটি series রয়েছে এবং সেটিতে name ও data সেট করা হয়েছে। data একটি ডেটা সিরিজ, যা X এবং Y পয়েন্টগুলোর মাধ্যমে প্রদর্শিত হবে।

২. অ্যাডভান্সড সিরিজ কনফিগারেশন

অ্যাডভান্সড সিরিজ কনফিগারেশন ব্যবহার করে আপনি আরো জটিল সিরিজ তৈরি করতে পারেন, যেখানে একাধিক সিরিজ থাকবে, স্ট্যাকড চার্ট, ডেটা লেবেলস, কাস্টমাইজড অ্যাক্সিস এবং অন্যান্য বৈশিষ্ট্য যুক্ত করা যাবে।

২.১. অ্যাডভান্সড লাইন চার্ট সিরিজ কনফিগারেশন

এখানে একটি অ্যাডভান্সড লাইন চার্ট কনফিগারেশন উদাহরণ দেওয়া হলো যেখানে একাধিক সিরিজ এবং কাস্টমাইজড স্টাইলিং করা হয়েছে:

package com.mycompany.myproject.client;

import com.google.gwt.core.client.JsArray;

public class HighchartsAdvancedIntegration {

    public static native void createChart(String containerId, JsArray<Data> data1, JsArray<Data> data2) /*-{
        $wnd.Highcharts.chart(containerId, {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Advanced Line Chart with Multiple Series'
            },
            xAxis: {
                title: {
                    text: 'Time'
                }
            },
            yAxis: {
                title: {
                    text: 'Value'
                }
            },
            series: [{
                name: 'Series 1',
                data: data1,  // First data series
                color: '#FF5733',  // Custom color for Series 1
                lineWidth: 2
            }, {
                name: 'Series 2',
                data: data2,  // Second data series
                color: '#33FF57',  // Custom color for Series 2
                lineWidth: 2,
                dashStyle: 'ShortDash'  // Custom dash style for Series 2
            }]
        });
    }-*/;

    public static class Data extends JavaScriptObject {
        protected Data() {}

        public final native int getX() /*-{
            return this.x;
        }-*/;

        public final native int getY() /*-{
            return this.y;
        }-*/;
    }
}

এখানে:

Multiple Series: দুটি সিরিজ (Series 1 এবং Series 2) ব্যবহার করা হয়েছে।
Color Customization: প্রতিটি সিরিজের জন্য আলাদা রঙ (color) নির্ধারণ করা হয়েছে।
Line Width: লাইন ওয়াইডনেস কাস্টমাইজ করা হয়েছে।
Dash Style: একটি সিরিজের জন্য ড্যাশ স্টাইলও কাস্টমাইজ করা হয়েছে।

২.২. স্ট্যাকড কলাম চার্ট সিরিজ কনফিগারেশন

স্ট্যাকড চার্টে একাধিক সিরিজের মান একে অপরের উপরে প্রদর্শিত হয়। এই ধরনের কনফিগারেশন করতে নিম্নলিখিত কোড ব্যবহার করা যেতে পারে:

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked Column Chart'
    },
    plotOptions: {
        column: {
            stacking: 'normal'  // Stack the columns
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    series: [{
        name: 'Series 1',
        data: [1, 2, 3, 4, 5],
        color: '#FF5733'
    }, {
        name: 'Series 2',
        data: [2, 3, 4, 5, 6],
        color: '#33FF57'
    }]
});

এখানে:

Stacking: stacking: 'normal' ব্যবহার করা হয়েছে যাতে কলামগুলোর মান একে অপরের উপরে প্রদর্শিত হয়।

৩. অ্যাডভান্সড ডেটা লেবেলস কনফিগারেশন

Highcharts এ ডেটা লেবেলস কাস্টমাইজ করার জন্য আপনি dataLabels অপশন ব্যবহার করতে পারেন। এই অপশন দিয়ে আপনি ডেটা পয়েন্টগুলোর লেবেল, ফন্ট, রঙ এবং অন্যান্য স্টাইলিং কাস্টমাইজ করতে পারবেন।

$wnd.Highcharts.chart('chart-container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Customized Data Labels'
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,  // Enable data labels
                format: '{y}',  // Display the y-value as the label
                style: {
                    fontSize: '14px',
                    fontWeight: 'bold',
                    color: '#000'
                }
            }
        }
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50]
    }]
});

এখানে dataLabels এর মাধ্যমে ডেটা পয়েন্টের লেবেল কাস্টমাইজ করা হয়েছে।

সারাংশ

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

Content added By

Rezwan Siddiki Tamim

চার্টে ডাটা পয়েন্ট হাইলাইট করা

848

Highcharts আপনাকে বিভিন্ন উপায়ে চার্টের ডেটা পয়েন্ট হাইলাইট করার সুযোগ দেয়। আপনি যদি বিশেষ কোনো ডেটা পয়েন্ট বা সিরিজের কিছু মান হাইলাইট করতে চান, তবে Highcharts-এ সহজেই এটি করা সম্ভব। GWT (Google Web Toolkit) ব্যবহার করে আপনি Java কোডে Highcharts লাইব্রেরি ইন্টিগ্রেট করে ডেটা পয়েন্ট হাইলাইট করতে পারবেন।

নিচে কিছু পদ্ধতি আলোচনা করা হলো, যার মাধ্যমে আপনি Highcharts-এ ডেটা পয়েন্ট হাইলাইট করতে পারেন।

১. Mouseover Event দিয়ে ডেটা পয়েন্ট হাইলাইট করা

Highcharts এর mouseover ইভেন্ট ব্যবহার করে আপনি ডেটা পয়েন্ট হাইলাইট করতে পারেন। এর মাধ্যমে মাউস হোভার করলে নির্দিষ্ট ডেটা পয়েন্ট হাইলাইট হবে। নিচে একটি উদাহরণ দেওয়া হলো:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Data Point Highlight Example'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50],
        point: {
            events: {
                mouseOver: function () {
                    this.graphic.attr({
                        fill: '#FF5733'  // হাইলাইট করার জন্য পয়েন্টের রঙ পরিবর্তন
                    });
                },
                mouseOut: function () {
                    this.graphic.attr({
                        fill: '#7cb5ec'  // মাউস আউট হলে পয়েন্টের রঙ পূর্বাবস্থায় ফিরে যাবে
                    });
                }
            }
        }
    }]
});

এখানে:

mouseOver ইভেন্টে, ডেটা পয়েন্টের রঙ পরিবর্তন করে হাইলাইট করা হচ্ছে।
mouseOut ইভেন্টে, মাউস আউট হলে পয়েন্টের রঙ পূর্বাবস্থায় ফিরে আসে।

২. Data Point Highlighting with Markers

Highcharts এ আপনি marker প্রোপার্টি ব্যবহার করে ডেটা পয়েন্টগুলোকে হাইলাইট করতে পারেন। এই পদ্ধতিতে, আপনি একটি নির্দিষ্ট ডেটা পয়েন্টের মার্কার (চিহ্ন) কাস্টমাইজ করে সেটিকে হাইলাইট করতে পারবেন।

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Data Point Marker Highlight'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Sales'
        }
    },
    series: [{
        name: 'Sales Data',
        data: [5, 10, 15, 20, 25],
        marker: {
            enabled: true,  // মার্কার সক্রিয় করা
            symbol: 'circle',  // মার্কারের ধরন (circle, square, triangle)
            radius: 6,  // মার্কারের আকার
            states: {
                hover: {
                    enabled: true,  // হোভার করলে মার্কার প্রদর্শন হবে
                    radius: 8,  // হোভার করলে মার্কারের আকার বৃদ্ধি পাবে
                    fillColor: '#FF5733'  // হোভার করলে মার্কারের রঙ পরিবর্তন
                }
            }
        }
    }]
});

এখানে:

marker প্রোপার্টির মাধ্যমে আপনি প্রতিটি ডেটা পয়েন্টে মার্কার যোগ করেছেন।
states.hover কনফিগারেশন দিয়ে হোভার করার সময় মার্কারের আকার এবং রঙ পরিবর্তন করা হয়েছে।

৩. Data Point Highlighting Using Specific Conditions

Highcharts এ আপনি নির্দিষ্ট শর্ত অনুযায়ী ডেটা পয়েন্ট হাইলাইট করতে পারেন, যেমন সর্বোচ্চ বা সর্বনিম্ন মান বা অন্য কোনো শর্ত। নিচে একটি উদাহরণ দেয়া হলো যেখানে সর্বোচ্চ মানের ডেটা পয়েন্ট হাইলাইট করা হয়েছে:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Highlighting Maximum Value'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: [{
        name: 'Sales Data',
        data: [10, 25, 15, 40, 30],
        dataLabels: {
            enabled: true,  // ডেটা লেবেল সক্রিয় করা
            style: {
                color: '#FF5733',  // সর্বোচ্চ মানের জন্য রঙ পরিবর্তন
                fontWeight: 'bold'
            }
        },
        marker: {
            symbol: 'circle',
            radius: 6
        },
        states: {
            hover: {
                enabled: true
            }
        },
        point: {
            events: {
                mouseOver: function () {
                    if (this.y === Math.max.apply(Math, this.series.data.map(function (point) { return point.y; }))) {
                        this.graphic.attr({
                            fill: '#FF5733'  // সর্বোচ্চ মানের পয়েন্ট হাইলাইট করা
                        });
                    }
                }
            }
        }
    }]
});

এখানে:

Math.max.apply ব্যবহার করে সর্বোচ্চ মান খুঁজে বের করা হয়েছে এবং সেই মানের পয়েন্টটি হাইলাইট করা হয়েছে।

৪. GWT-এ Highcharts ইন্টিগ্রেশন এবং ডেটা পয়েন্ট হাইলাইট করা

GWT (Google Web Toolkit) ব্যবহার করে আপনি Highcharts কোডের মাধ্যমে ডেটা পয়েন্ট হাইলাইট করতে পারেন। GWT-এ Java কোড থেকে JavaScript কোড কল করার জন্য JSNI (JavaScript Native Interface) ব্যবহার করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো:

public static native void createChartWithHighlightedData(String containerId, JsArrayString categories, JsArrayNumber data) /*-{
    $wnd.Highcharts.chart(containerId, {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Highlight Data Points Example'
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: 'Values'
            }
        },
        series: [{
            name: 'Sales Data',
            data: data,
            marker: {
                enabled: true,
                symbol: 'circle',
                radius: 6
            },
            point: {
                events: {
                    mouseOver: function () {
                        this.graphic.attr({
                            fill: '#FF5733'
                        });
                    },
                    mouseOut: function () {
                        this.graphic.attr({
                            fill: '#7cb5ec'
                        });
                    }
                }
            }
        }]
    });
}-*/;

এখানে:

GWT-এ Java কোড ব্যবহার করে JavaScript কোডকে কল করা হচ্ছে, যেখানে mouseover ইভেন্ট ব্যবহার করে ডেটা পয়েন্ট হাইলাইট করা হয়েছে।

সারাংশ

Highcharts-এ ডেটা পয়েন্ট হাইলাইট করার জন্য আপনি বিভিন্ন কৌশল ব্যবহার করতে পারেন, যেমন mouseover ইভেন্ট, marker কাস্টমাইজেশন এবং শর্তসাপেক্ষ হাইলাইটিং। GWT ব্যবহার করে Java কোডের মাধ্যমে Highcharts লাইব্রেরির এই বৈশিষ্ট্যগুলো ব্যবহার করা সম্ভব, যা আপনাকে একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে সহায়তা করে।

Content added By

Rezwan Siddiki Tamim

GWT এবং Highcharts পরিচিতি GWT সেটআপ এবং ইনস্টলেশন Highcharts সেটআপ এবং ইনস্টলেশন GWT এবং Highcharts এর ইন্টিগ্রেশন Highcharts এর বেসিক চার্ট তৈরি

Multiple সিরিজের চার্ট তৈরি

Multiple সিরিজের চার্ট তৈরি করার জন্য পদক্ষেপ

১. Highcharts লাইব্রেরি যোগ করা

২. GWT এর মাধ্যমে Multiple সিরিজের ডেটা তৈরি করা

৩. HTML ফাইল তৈরি করা

Multiple সিরিজের চার্টের সুবিধা

Highcharts Multiple সিরিজের চার্ট কাস্টমাইজেশন

সিরিজের রঙ কাস্টমাইজ করা

সারাংশ

Multiple Data Series ব্যবহার করে চার্ট তৈরি করা

উদাহরণ: Multiple Data Series সহ একটি Line Chart

উদাহরণ: Multiple Data Series সহ একটি Column Chart

উদাহরণ: Multiple Data Series সহ একটি Pie Chart

সারাংশ

চার্টে Multiple Axes যোগ করা

১. Highcharts-এ Multiple Axes কাস্টমাইজেশন

উদাহরণ: Multiple Axes সহ চার্ট তৈরি করা

২. GWT এ Multiple Axes কাস্টমাইজেশন

GWT কোডে Multiple Axes যুক্ত করা

৩. Multiple Axes এর আরও কাস্টমাইজেশন

উদাহরণ: গ্রিড লাইন কাস্টমাইজ করা

সারাংশ

সিম্পল এবং অ্যাডভান্সড সিরিজ কনফিগারেশন

১. সিম্পল সিরিজ কনফিগারেশন

১.১. সিম্পল লাইন চার্ট সিরিজ কনফিগারেশন

২. অ্যাডভান্সড সিরিজ কনফিগারেশন

২.১. অ্যাডভান্সড লাইন চার্ট সিরিজ কনফিগারেশন

২.২. স্ট্যাকড কলাম চার্ট সিরিজ কনফিগারেশন

৩. অ্যাডভান্সড ডেটা লেবেলস কনফিগারেশন

সারাংশ

চার্টে ডাটা পয়েন্ট হাইলাইট করা

১. Mouseover Event দিয়ে ডেটা পয়েন্ট হাইলাইট করা

২. Data Point Highlighting with Markers

৩. Data Point Highlighting Using Specific Conditions

৪. GWT-এ Highcharts ইন্টিগ্রেশন এবং ডেটা পয়েন্ট হাইলাইট করা

সারাংশ

Promotion

Satt AI

Hi, আমি SATT AI!

Multiple সিরিজের চার্ট তৈরি

Multiple সিরিজের চার্ট তৈরি করার জন্য পদক্ষেপ

১. Highcharts লাইব্রেরি যোগ করা

২. GWT এর মাধ্যমে Multiple সিরিজের ডেটা তৈরি করা

৩. HTML ফাইল তৈরি করা

Multiple সিরিজের চার্টের সুবিধা

Highcharts Multiple সিরিজের চার্ট কাস্টমাইজেশন

সিরিজের রঙ কাস্টমাইজ করা

সারাংশ

Multiple Data Series ব্যবহার করে চার্ট তৈরি করা

উদাহরণ: Multiple Data Series সহ একটি Line Chart

উদাহরণ: Multiple Data Series সহ একটি Column Chart

উদাহরণ: Multiple Data Series সহ একটি Pie Chart

সারাংশ

চার্টে Multiple Axes যোগ করা

১. Highcharts-এ Multiple Axes কাস্টমাইজেশন

উদাহরণ: Multiple Axes সহ চার্ট তৈরি করা

২. GWT এ Multiple Axes কাস্টমাইজেশন

GWT কোডে Multiple Axes যুক্ত করা

৩. Multiple Axes এর আরও কাস্টমাইজেশন

উদাহরণ: গ্রিড লাইন কাস্টমাইজ করা

সারাংশ

সিম্পল এবং অ্যাডভান্সড সিরিজ কনফিগারেশন

১. সিম্পল সিরিজ কনফিগারেশন

১.১. সিম্পল লাইন চার্ট সিরিজ কনফিগারেশন

২. অ্যাডভান্সড সিরিজ কনফিগারেশন

২.১. অ্যাডভান্সড লাইন চার্ট সিরিজ কনফিগারেশন

২.২. স্ট্যাকড কলাম চার্ট সিরিজ কনফিগারেশন

৩. অ্যাডভান্সড ডেটা লেবেলস কনফিগারেশন

সারাংশ

চার্টে ডাটা পয়েন্ট হাইলাইট করা

১. Mouseover Event দিয়ে ডেটা পয়েন্ট হাইলাইট করা

২. Data Point Highlighting with Markers

৩. Data Point Highlighting Using Specific Conditions

৪. GWT-এ Highcharts ইন্টিগ্রেশন এবং ডেটা পয়েন্ট হাইলাইট করা

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!