Highcharts এর এক্সপোর্ট এবং প্রিন্টিং অপশন

Highcharts-এর এক্সপোর্ট এবং প্রিন্টিং অপশন ব্যবহারকারীদের চার্টগুলি বিভিন্ন ফরম্যাটে এক্সপোর্ট বা প্রিন্ট করার সুবিধা প্রদান করে। এটি বিশেষ করে ব্যবসা এবং বিশ্লেষণমূলক পরিবেশে গুরুত্বপূর্ণ, যেখানে রিপোর্ট বা ডেটা শেয়ার করা প্রয়োজন। Highcharts এর এক্সপোর্ট ফিচার বিভিন্ন ফাইল ফরম্যাটে চার্টের এক্সপোর্ট করার ক্ষমতা প্রদান করে, যেমন PNG, JPEG, PDF, SVG ইত্যাদি।

এখানে Highcharts এর এক্সপোর্ট এবং প্রিন্টিং অপশন সম্পর্কে বিস্তারিত আলোচনা করা হলো:

১. এক্সপোর্ট অপশন

Highcharts এ এক্সপোর্ট ফিচারটি ব্যবহার করে আপনি আপনার চার্টগুলোকে বিভিন্ন ফরম্যাটে সংরক্ষণ বা শেয়ার করতে পারেন। এটি একটি বিশেষ প্যানেল (Exporting button) প্রদান করে, যেখানে আপনি চার্টকে PNG, JPEG, PDF, এবং SVG ফরম্যাটে এক্সপোর্ট করতে পারবেন।

এক্সপোর্ট সেটিংস কনফিগারেশন:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Monthly Sales'
    },
    subtitle: {
        text: 'Sales Data for 2024'
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50]
    }],
    exporting: {
        enabled: true,  // এক্সপোর্টিং সক্ষম করা
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']  // এক্সপোর্ট অপশন
            }
        }
    }
});

বৈশিষ্ট্য:

• enabled: true: এক্সপোর্ট ফিচারটি সক্রিয় করে।
• contextButton: চার্টের উপরে এক্সপোর্ট বাটন প্রদর্শন করবে, যেখানে বিভিন্ন এক্সপোর্ট ফরম্যাটের অপশন থাকবে।
• menuItems: যে ফরম্যাটগুলিতে এক্সপোর্ট করা যাবে, যেমন PNG, JPEG, PDF, SVG।

২. প্রিন্ট অপশন

Highcharts এর মধ্যে একটি প্রিন্ট অপশন রয়েছে, যা ব্যবহারকারীদের চার্টটি সরাসরি প্রিন্ট করতে সাহায্য করে। এটি "Print" বাটনের মাধ্যমে ব্যবহার করা যায়, এবং চার্টটি একটি নতুন উইন্ডোতে প্রিন্ট ভিউ হিসেবে রেন্ডার হয়, যা প্রিন্ট করার জন্য প্রস্তুত থাকে।

প্রিন্ট অপশন কনফিগারেশন:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Product Sales'
    },
    series: [{
        name: 'Product A',
        data: [10, 20, 30, 40, 50]
    }],
    exporting: {
        enabled: true,  // এক্সপোর্ট সক্ষম
        buttons: {
            printButton: {
                text: 'Print Chart',  // প্রিন্ট বাটনের টেক্সট
                onclick: function () {
                    this.print();  // প্রিন্ট ফাংশন কল
                }
            }
        }
    }
});

বৈশিষ্ট্য:

• printButton: প্রিন্ট বাটন তৈরি করে, যা চার্টটি প্রিন্ট করতে সক্ষম।
• onclick: function () { this.print(); }: যখন প্রিন্ট বাটনে ক্লিক করা হবে, তখন এটি চার্টকে প্রিন্ট করার জন্য প্রিন্ট উইন্ডো খুলে দেবে।

৩. ডিফল্ট এক্সপোর্ট প্যানেল কাস্টমাইজেশন

Highcharts আপনাকে এক্সপোর্ট প্যানেলের কাস্টমাইজেশন করতে দেয়, যার মাধ্যমে আপনি ব্যবহারকারীদের জন্য এক্সপোর্ট অপশনগুলো আরও কাস্টমাইজ বা সীমাবদ্ধ করতে পারেন। এটি বিভিন্ন ফরম্যাটে এক্সপোর্ট করার জন্য আলাদা আলাদা কনফিগারেশন প্রদান করে।

কাস্টমাইজড এক্সপোর্ট প্যানেল:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Live Data'
    },
    subtitle: {
        text: 'Live data exported in multiple formats'
    },
    series: [{
        name: 'Data',
        data: [1, 2, 3, 4, 5]
    }],
    exporting: {
        enabled: true,  // এক্সপোর্ট সক্রিয় করা
        buttons: {
            contextButton: {
                menuItems: [
                    'downloadPNG', 'downloadPDF', 
                    'downloadSVG', 'printChart'  // প্রিন্টিং অপশনসহ এক্সপোর্ট অপশন
                ],
                align: 'right',  // এক্সপোর্ট বাটনের অবস্থান
                verticalAlign: 'top'
            }
        }
    }
});

বৈশিষ্ট্য:

• menuItems: এখানে এক্সপোর্ট অপশন এবং প্রিন্টিং অপশন কাস্টমাইজ করা হয়েছে।
• align এবং verticalAlign: এক্সপোর্ট বাটনের অবস্থান কাস্টমাইজ করা হয়েছে।

৪. এক্সপোর্ট করা ছবির সাইজ কাস্টমাইজেশন

আপনি আপনার এক্সপোর্ট করা ছবির সাইজ এবং রেজুলেশন কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি নিশ্চিত করতে পারবেন যে এক্সপোর্ট করা চার্টটি আপনার প্রয়োজন অনুযায়ী সঠিক আকারে থাকবে।

এক্সপোর্টের সাইজ কাস্টমাইজেশন:

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Market Share'
    },
    series: [{
        name: 'Market Share',
        data: [
            ['Product A', 45],
            ['Product B', 25],
            ['Product C', 30]
        ]
    }],
    exporting: {
        enabled: true,
        sourceWidth: 800,  // এক্সপোর্ট করা ছবির প্রস্থ
        sourceHeight: 600  // এক্সপোর্ট করা ছবির উচ্চতা
    }
});

বৈশিষ্ট্য:

• sourceWidth: এক্সপোর্ট করা ছবির প্রস্থ নির্ধারণ।
• sourceHeight: এক্সপোর্ট করা ছবির উচ্চতা নির্ধারণ।

সারাংশ

Highcharts এর এক্সপোর্ট এবং প্রিন্টিং অপশন আপনাকে আপনার চার্টের ডেটা বিভিন্ন ফরম্যাটে (PNG, JPEG, PDF, SVG) এক্সপোর্ট করার সুযোগ দেয় এবং সরাসরি প্রিন্ট করার সুবিধা প্রদান করে। আপনি এক্সপোর্ট বাটন কাস্টমাইজ, প্রিন্টিং অপশন এবং এক্সপোর্ট করা ছবির সাইজ নির্ধারণ করতে পারেন। এটি ব্যবসা, রিপোর্ট তৈরি, এবং ডেটা শেয়ার করার জন্য অত্যন্ত কার্যকরী একটি ফিচার।

Highcharts এর Exporting মডিউল ব্যবহার করে আপনি আপনার চার্টগুলিকে সহজেই বিভিন্ন ফর্ম্যাটে এক্সপোর্ট করতে পারেন, যেমন PDF, PNG, JPEG ইত্যাদি। GWT (Google Web Toolkit) ব্যবহার করে আপনি Highcharts এর Exporting ফিচার ইন্টিগ্রেট করতে পারবেন এবং ডেটা ভিজুয়ালাইজেশনকে আরো ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তুলতে পারবেন।

এখানে Highcharts চার্টের Exporting ফিচার কিভাবে ব্যবহার করতে হয় তা বিস্তারিতভাবে আলোচনা করা হলো।

১. Highcharts Exporting মডিউল সক্রিয় করা

Highcharts এ Exporting ফিচার ব্যবহার করার জন্য আপনাকে exporting অপশনকে সক্রিয় করতে হবে। এটি দিয়ে আপনি চার্টের উপরে এক্সপোর্ট বাটন যোগ করতে পারবেন, যা ব্যবহারকারীদের চার্টটি বিভিন্ন ফরম্যাটে ডাউনলোড করতে সহায়তা করবে।

Exporting সক্রিয় করার উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data'
    },
    exporting: {
        enabled: true,  // Exporting ফিচার সক্রিয় করা
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']  // এক্সপোর্ট অপশনস
            }
        }
    },
    series: [{
        name: 'Sales',
        data: [1, 2, 3, 4, 5]
    }]
});

এখানে:

• exporting.enabled: এক্সপোর্ট ফিচার সক্রিয় করা হয়েছে।
• buttons.contextButton.menuItems: এক্সপোর্ট অপশন (PNG, JPEG, PDF, SVG) প্রদর্শন করা হয়েছে।

২. Highcharts Exporting কাস্টমাইজেশন

আপনি Exporting ফিচারটি কাস্টমাইজ করতে পারেন, যেমন এক্সপোর্ট বাটনের অবস্থান, সাইজ, স্টাইল, এবং ডাউনলোড ফরম্যাট। নিচে কিছু কাস্টমাইজেশন অপশন দেয়া হলো:

এক্সপোর্ট বাটনের কাস্টমাইজেশন:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data'
    },
    exporting: {
        enabled: true,  // Exporting ফিচার সক্রিয় করা
        buttons: {
            contextButton: {
                symbolSize: 40,  // এক্সপোর্ট বাটনের সাইজ
                x: -50,  // বাটনের অবস্থান (x-axis)
                y: 10,   // বাটনের অবস্থান (y-axis)
                style: {
                    color: '#FF5733',  // বাটনের টেক্সট রঙ
                    fontSize: '14px'
                }
            }
        }
    },
    series: [{
        name: 'Sales',
        data: [1, 2, 3, 4, 5]
    }]
});

এখানে:

• symbolSize: এক্সপোর্ট বাটনের সাইজ কাস্টমাইজ করা হয়েছে।
• x এবং y: বাটনের অবস্থান পরিবর্তন করা হয়েছে।
• style: এক্সপোর্ট বাটনের টেক্সট রঙ এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।

৩. Highcharts Exporting এর মাধ্যমে PDF, PNG, JPEG এক্সপোর্ট

Highcharts Exporting ফিচার PDF, PNG, JPEG সহ আরও অনেক ফরম্যাটে এক্সপোর্ট করার সুবিধা দেয়। এর মাধ্যমে আপনি সহজেই চার্টের ছবি বা ডকুমেন্ট তৈরি করতে পারেন।

PDF এক্সপোর্ট:

Highcharts-এ PDF এক্সপোর্ট করতে নিম্নলিখিত কোড ব্যবহার করা যেতে পারে:

exporting: {
    enabled: true,  // Exporting সক্রিয় করা
    buttons: {
        contextButton: {
            menuItems: ['downloadPDF']  // PDF এক্সপোর্ট অপশন
        }
    }
}

PNG এবং JPEG এক্সপোর্ট:

exporting: {
    enabled: true,  // Exporting সক্রিয় করা
    buttons: {
        contextButton: {
            menuItems: ['downloadPNG', 'downloadJPEG']  // PNG এবং JPEG এক্সপোর্ট অপশন
        }
    }
}

৪. GWT কোডে Highcharts Exporting ফিচার ইন্টিগ্রেট করা

GWT ব্যবহার করে Highcharts এর Exporting ফিচার ইন্টিগ্রেট করা যায়, যাতে Java কোডের মাধ্যমে JavaScript লাইব্রেরি কন্ট্রোল করা সম্ভব হয়। নিচে একটি উদাহরণ দেয়া হলো যেখানে GWT কোডে Highcharts Exporting ফিচার কাস্টমাইজ করা হয়েছে।

GWT কোড উদাহরণ:

public native void createChartWithExporting(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Data'
        },
        exporting: {
            enabled: true,
            buttons: {
                contextButton: {
                    menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF']  // এক্সপোর্ট অপশন
                }
            }
        },
        series: [{
            name: 'Sales',
            data: chartData
        }]
    });
}-*/;

এখানে:

• exporting.enabled: এক্সপোর্ট ফিচার সক্রিয় করা হয়েছে।
• menuItems: এক্সপোর্ট অপশনগুলো (PNG, JPEG, PDF) সেট করা হয়েছে।

৫. Exporting-এর মধ্যে কাস্টম ফরম্যাট

Highcharts Exporting ফিচারে কাস্টম ফরম্যাটও যোগ করা সম্ভব। আপনি এক্সপোর্ট করা ছবির সাইজ, কোয়ালিটি, ফরম্যাট এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

Exporting কাস্টম ফরম্যাটের উদাহরণ:

exporting: {
    enabled: true,  // Exporting ফিচার সক্রিয় করা
    buttons: {
        contextButton: {
            menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF'],
            exportOptions: {
                type: 'image/png',  // PNG ফরম্যাটে এক্সপোর্ট
                width: 800,         // চিত্রের প্রস্থ
                scale: 2            // স্কেল বাড়ানো
            }
        }
    }
}

এখানে:

• type: এক্সপোর্ট ফরম্যাট নির্ধারণ করা হয়েছে (যেমন PNG)।
• width এবং scale: এক্সপোর্ট ফাইলের সাইজ এবং স্কেল কাস্টমাইজ করা হয়েছে।

সারাংশ

Highcharts এর Exporting ফিচার আপনার চার্টের বিভিন্ন ফরম্যাটে এক্সপোর্ট করার সুযোগ দেয়, যেমন PDF, PNG, JPEG ইত্যাদি। GWT ব্যবহার করে আপনি সহজেই Highcharts Exporting ফিচার ইন্টিগ্রেট করতে পারেন এবং কাস্টমাইজ করতে পারেন। এতে ব্যবহারকারীরা তাদের প্রয়োজন অনুসারে চার্টের ছবি বা ডকুমেন্ট এক্সপোর্ট করতে সক্ষম হন।

Highcharts এর এক্সপোর্ট মডিউল ব্যবহার করে আপনি আপনার তৈরি করা চার্টকে বিভিন্ন ফরম্যাটে এক্সপোর্ট করতে পারেন, যেমন PDF, PNG, JPEG, SVG, এবং CSV। এটি ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী করে তোলে, কারণ ব্যবহারকারীরা চার্টগুলোকে তাদের প্রয়োজন অনুযায়ী এক্সপোর্ট করে ব্যবহার করতে পারেন।

GWT (Google Web Toolkit) ব্যবহার করে Highcharts এর এক্সপোর্ট মডিউল ইন্টিগ্রেট করার জন্য আপনি JavaScript Native Interface (JSNI) ব্যবহার করতে পারেন।

নিচে Highcharts এর এক্সপোর্ট মডিউল ব্যবহার করার নিয়ম এবং উদাহরণ দেয়া হলো।

১. Highcharts Exporting মডিউল সক্রিয় করা

Highcharts এ এক্সপোর্ট ফিচার ব্যবহার করতে হলে, আপনাকে প্রথমে exporting.js মডিউল যোগ করতে হবে। এই মডিউলটি Highcharts এর সাথে এক্সপোর্ট অপশন যোগ করে দেয়।

Exporting মডিউল যুক্ত করা

<script src="https://code.highcharts.com/modules/exporting.js"></script>

এটি আপনার HTML ফাইলের মধ্যে <head> ট্যাগে যুক্ত করুন। এই স্ক্রিপ্টটি Highcharts এর এক্সপোর্ট ফিচারকে সক্ষম করবে।

২. Highcharts এ এক্সপোর্ট বাটন যোগ করা

Highcharts এর এক্সপোর্ট বাটন যুক্ত করতে, আপনি exporting অপশন ব্যবহার করতে পারেন। এটি ব্যবহারকারীদের বিভিন্ন ফরম্যাটে চার্ট এক্সপোর্ট করার সুযোগ দেয়। নিচে একটি উদাহরণ দেয়া হলো:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Sales'
        }
    },
    series: [{
        name: 'Sales Data',
        data: [1, 2, 3, 4, 5]
    }],
    exporting: {
        enabled: true,  // এক্সপোর্ট বাটন সক্রিয় করা
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
            }
        }
    }
});

এখানে:

• enabled: true: এক্সপোর্ট বাটন সক্রিয় করা হয়েছে।
• menuItems: এক্সপোর্ট বাটনের মাধ্যমে কোন কোন ফরম্যাটে এক্সপোর্ট হবে তা নির্ধারণ করা হয়েছে (PNG, JPEG, PDF, SVG)।

৩. Highcharts Exporting মডিউল GWT এ ইন্টিগ্রেট করা

GWT ব্যবহার করে Highcharts এর এক্সপোর্ট মডিউল ইন্টিগ্রেট করতে হলে, আপনাকে JSNI (JavaScript Native Interface) ব্যবহার করে JavaScript কোডকে GWT কোডে কল করতে হবে। নিচে GWT কোডের মাধ্যমে Highcharts এর এক্সপোর্ট ফিচার সক্রিয় করার উদাহরণ দেয়া হলো:

GWT কোডে Exporting মডিউল যুক্ত করা

public native void createChartWithExporting(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Data'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
        },
        yAxis: {
            title: {
                text: 'Sales'
            }
        },
        series: [{
            name: 'Sales Data',
            data: chartData
        }],
        exporting: {
            enabled: true,  // এক্সপোর্ট বাটন সক্রিয় করা
            buttons: {
                contextButton: {
                    menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
                }
            }
        }
    });
}-*/;

এখানে:

• createChartWithExporting: GWT এর মাধ্যমে Highcharts চার্ট তৈরি এবং এক্সপোর্ট অপশন যোগ করা হয়েছে।

৪. এক্সপোর্ট অপশন কাস্টমাইজ করা

Highcharts এ এক্সপোর্ট ফিচারের বিভিন্ন অপশন কাস্টমাইজ করা সম্ভব। যেমন, আপনি এক্সপোর্ট বাটনের আকার, অবস্থান, অথবা এক্সপোর্ট করা ফরম্যাটে বিশেষ কনফিগারেশন পরিবর্তন করতে পারেন।

এক্সপোর্ট বাটনের কাস্টমাইজেশন

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Custom Export Button'
    },
    exporting: {
        enabled: true,
        buttons: {
            contextButton: {
                text: 'Export Chart',  // এক্সপোর্ট বাটনের টেক্সট
                width: 100,  // বাটনের আকার
                symbolSize: 24,  // বাটনের চিহ্নের আকার
                menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF']
            }
        }
    }
});

এখানে:

• text: এক্সপোর্ট বাটনের টেক্সট কাস্টমাইজ করা হয়েছে।
• width: বাটনের আকার কাস্টমাইজ করা হয়েছে।
• symbolSize: চিহ্নের আকার কাস্টমাইজ করা হয়েছে।

৫. Exporting মডিউল GWT এ কাস্টমাইজ করা

GWT কোডে Highcharts এর Exporting মডিউল কাস্টমাইজ করতে, JSNI ব্যবহার করে এক্সপোর্ট অপশনগুলোর ফিচার সমূহ কাস্টমাইজ করা যেতে পারে।

GWT কোডে Exporting কাস্টমাইজেশন

public native void createCustomExportingChart(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Data with Custom Export'
        },
        series: [{
            name: 'Sales Data',
            data: chartData
        }],
        exporting: {
            enabled: true,  // এক্সপোর্ট ফিচার সক্রিয় করা
            buttons: {
                contextButton: {
                    text: 'Export Chart',
                    width: 120,
                    symbolSize: 30,
                    menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF'],
                    onclick: function() {
                        alert('Exporting Chart...');  // কাস্টম এক্সপোর্ট কার্যকলাপ
                    }
                }
            }
        }
    });
}-*/;

এখানে:

• onclick: এক্সপোর্ট বাটনে ক্লিক করার পরে একটি কাস্টম ফাংশন চালানোর জন্য onclick ইভেন্ট ব্যবহার করা হয়েছে।

৬. Highcharts Exporting-এ ফাইল নেম কাস্টমাইজেশন

Highcharts Exporting মডিউলে আপনি এক্সপোর্ট করা ফাইলের নাম কাস্টমাইজ করতে পারেন। নিচে এর উদাহরণ দেয়া হলো:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data with Custom File Name'
    },
    exporting: {
        enabled: true,
        filename: 'custom_chart_name',  // এক্সপোর্ট করা ফাইলের নাম কাস্টমাইজ করা
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF']
            }
        }
    }
});

এখানে:

• filename: এক্সপোর্ট করা ফাইলের নাম কাস্টমাইজ করা হয়েছে।

সারাংশ

Highcharts এর Exporting মডিউল ব্যবহার করে আপনি সহজেই আপনার তৈরি করা চার্টগুলো PNG, JPEG, PDF, SVG এবং অন্যান্য ফরম্যাটে এক্সপোর্ট করতে পারেন। GWT এর মাধ্যমে আপনি এই এক্সপোর্ট ফিচারগুলোকে কাস্টমাইজ করে আপনার ওয়েব অ্যাপ্লিকেশনে যোগ করতে পারেন। GWT-এ JavaScript Native Interface (JSNI) ব্যবহার করে Highcharts কোডে এক্সপোর্ট অপশন সংযুক্ত করা সম্ভব এবং এক্সপোর্ট বাটন, ফাইল নাম, স্টাইল, এবং অন্যান্য এক্সপোর্ট অপশন কাস্টমাইজ করা যেতে পারে।

Highcharts এ আপনি খুব সহজেই একটি চার্ট প্রিন্ট করতে পারেন। Highcharts এর Exporting module এর মাধ্যমে আপনি চার্টকে বিভিন্ন ফরম্যাটে (যেমন PDF, PNG, JPEG) এক্সপোর্ট করার পাশাপাশি সরাসরি প্রিন্টও করতে পারবেন। এটি ব্যবহারকারীদের চার্টের ডেটা বা ভিজুয়াল আউটপুট প্রিন্ট করার সুযোগ দেয়, যা ওয়েব অ্যাপ্লিকেশনগুলোতে খুবই সহায়ক।

নিচে Highcharts-এ প্রিন্টিং অপশন ব্যবহারের পদ্ধতি দেওয়া হলো।

১. Highcharts Exporting Module ইনস্টল করা

প্রথমে, আপনাকে Highcharts এর Exporting module ব্যবহার করতে হবে। এটি Highcharts এর একটি এক্সটেনশন যা আপনাকে চার্ট এক্সপোর্ট এবং প্রিন্ট করার ক্ষমতা দেয়। আপনাকে এই মডিউলটি আপনার স্ক্রিপ্টে অন্তর্ভুক্ত করতে হবে।

Highcharts Exporting Module ইনস্টল:

<script src="https://code.highcharts.com/modules/exporting.js"></script>

এটি আপনার HTML ফাইলের <head> সেকশনে যুক্ত করতে হবে। এই মডিউলটি ইনক্লুড করার পর, আপনি চার্টে প্রিন্ট অপশন যুক্ত করতে পারবেন।

২. প্রিন্ট অপশন কনফিগারেশন

Highcharts এ আপনি সরাসরি চার্ট প্রিন্ট করতে পারেন। exporting অপশনে printChart পদ্ধতি ব্যবহার করা হয় যা আপনাকে চার্টটি প্রিন্ট করার সুবিধা দেয়।

প্রিন্ট অপশন কনফিগারেশন উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data'
    },
    series: [{
        name: 'Sales',
        data: [1, 2, 3, 4, 5]
    }],
    exporting: {
        enabled: true,  // এক্সপোর্টিং অপশন সক্রিয় করা
        buttons: {
            contextButton: {
                menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF']  // প্রিন্ট এবং এক্সপোর্ট অপশন
            }
        }
    }
});

এখানে:

• enabled: true: এক্সপোর্টিং অপশনটি সক্রিয় করা হয়েছে।
• contextButton.menuItems: এখানে বিভিন্ন এক্সপোর্ট অপশন যেমন prntChart, downloadPNG, downloadJPEG, downloadPDF যুক্ত করা হয়েছে। এই অপশনগুলো চার্টের উপরে একটি কনটেক্সট মেনু হিসেবে প্রদর্শিত হবে।

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

আপনি যদি চার্টের প্রিন্টিং ফিচার কাস্টমাইজ করতে চান, তবে আপনি print মেথডের মাধ্যমে এই কাস্টমাইজেশনটি করতে পারবেন। আপনি ফাইলের স্টাইল, লেআউট, ইত্যাদি কাস্টমাইজ করতে পারেন।

প্রিন্ট ফিচার কাস্টমাইজেশন উদাহরণ:

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data'
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 30, 40, 50]
    }],
    exporting: {
        enabled: true,
        buttons: {
            contextButton: {
                menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF']
            }
        },
        printButton: {
            title: 'Print chart',  // প্রিন্ট বাটনের টাইটেল কাস্টমাইজ করা
            width: 100,
            height: 50,
            style: {
                background: '#4CAF50',  // প্রিন্ট বাটনের ব্যাকগ্রাউন্ড রঙ
                color: 'white',  // প্রিন্ট বাটনের টেক্সট রঙ
                borderRadius: '5px'  // প্রিন্ট বাটনের কোণার রেডিয়াস
            }
        }
    }
});

এখানে, printButton এর মাধ্যমে প্রিন্ট বাটনের কাস্টম স্টাইল এবং টাইটেল কাস্টমাইজ করা হয়েছে।

৪. GWT এ Highcharts প্রিন্ট অপশন ইন্টিগ্রেট করা

আপনি যদি GWT (Google Web Toolkit) ব্যবহার করে Highcharts এর প্রিন্ট অপশন ইন্টিগ্রেট করতে চান, তবে আপনাকে GWT কোডে Exporting মডিউল ইন্টিগ্রেট করতে হবে। নিচে একটি উদাহরণ দেয়া হলো যেখানে GWT ব্যবহার করে Highcharts এর প্রিন্ট ফিচার ইন্টিগ্রেট করা হয়েছে:

public native void createChartWithPrintOption(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Data'
        },
        series: [{
            name: 'Sales',
            data: chartData
        }],
        exporting: {
            enabled: true,
            buttons: {
                contextButton: {
                    menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF']
                }
            }
        }
    });
}-*/;

এখানে:

• GWT কোড ব্যবহার করে Highcharts.chart মেথডের মাধ্যমে চার্ট তৈরি করা হয়েছে।
• exporting.enabled দিয়ে এক্সপোর্টিং অপশন সক্রিয় করা হয়েছে এবং contextButton.menuItems এর মাধ্যমে প্রিন্টিং অপশন এবং অন্যান্য এক্সপোর্ট ফরম্যাটগুলো নির্ধারণ করা হয়েছে।

সারাংশ

Highcharts-এ চার্ট প্রিন্ট করার অপশন খুবই সহজ এবং ব্যবহারকারী বান্ধব। Exporting module ব্যবহার করে আপনি চার্টটি PDF, PNG, JPEG ফরম্যাটে এক্সপোর্ট করার পাশাপাশি সরাসরি প্রিন্টও করতে পারেন। GWT ব্যবহার করে আপনি Highcharts এর প্রিন্ট অপশনসহ অন্যান্য এক্সপোর্ট অপশনগুলো সহজেই ইন্টিগ্রেট করতে পারবেন এবং আপনার ওয়েব অ্যাপ্লিকেশনে উন্নত ফিচার যোগ করতে পারবেন।

Highcharts এ Export এবং Print অপশনের জন্য কাস্টম কনফিগারেশন তৈরি করা অনেক সুবিধাজনক হতে পারে, বিশেষ করে যখন আপনি আপনার চার্টের এক্সপোর্ট ফিচারগুলিকে কাস্টমাইজ করতে চান বা ব্যবহারকারীদের জন্য বিশেষ এক্সপোর্ট প্যানেল তৈরি করতে চান। GWT-এ Highcharts এর Exporting এবং Print ফিচার কাস্টমাইজ করা যেতে পারে। এতে আপনি এক্সপোর্ট ফরম্যাট, বাটন অবস্থান, সাইজ এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে পারবেন।

নিচে Highcharts Export এবং Print এর জন্য কাস্টম কনফিগারেশন দেওয়া হলো:

১. Custom Export Button Configuration

Highcharts এর Export বাটন কাস্টমাইজ করার জন্য আপনি কাস্টম বাটন তৈরি করতে পারেন, যেখানে এক্সপোর্ট অপশনগুলি প্রদর্শন করা হবে। উদাহরণস্বরূপ, আপনি বিশেষ ফরম্যাট যেমন PNG, PDF, SVG, অথবা প্রিন্টিং অপশনগুলো কাস্টমাইজ করে প্রদর্শন করতে পারেন।

উদাহরণ: কাস্টম Export Button কনফিগারেশন

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Data'
    },
    series: [{
        name: 'Sales',
        data: [1, 3, 2, 4, 5]
    }],
    exporting: {
        enabled: true,  // এক্সপোর্টিং সক্রিয় করা
        buttons: {
            contextButton: {
                text: 'Custom Export',  // কাস্টম বাটনের টেক্সট
                menuItems: [
                    'downloadPNG',   // PNG ফরম্যাট
                    'downloadJPEG',  // JPEG ফরম্যাট
                    'downloadPDF',   // PDF ফরম্যাট
                    'downloadSVG',   // SVG ফরম্যাট
                    'printChart'     // প্রিন্ট অপশন
                ],
                align: 'right',  // বাটনের অবস্থান
                verticalAlign: 'top'
            }
        }
    }
});

ব্যাখ্যা:

• text: 'Custom Export': কাস্টম এক্সপোর্ট বাটনের টেক্সট।
• menuItems: এক্সপোর্ট করার জন্য যে ফরম্যাটগুলো প্রদান করা হবে, যেমন PNG, JPEG, PDF, SVG, এবং Print অপশন।
• align এবং verticalAlign: এক্সপোর্ট বাটনের অবস্থান কাস্টমাইজ করা হয়েছে।

২. Custom Print Button

Highcharts এ একটি কাস্টম প্রিন্ট বাটন তৈরি করা সম্ভব। এটি আপনাকে ব্যবহারকারীদের জন্য এক্সপোর্ট ফিচারের পাশাপাশি প্রিন্ট করার সুবিধাও প্রদান করবে। কাস্টম প্রিন্ট বাটন ব্যবহার করে আপনি নিজের টেক্সট এবং স্টাইল দিয়ে প্রিন্ট অপশনটি কাস্টমাইজ করতে পারেন।

উদাহরণ: কাস্টম Print Button কনফিগারেশন

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Product Sales'
    },
    series: [{
        name: 'Product A',
        data: [10, 20, 30, 40, 50]
    }],
    exporting: {
        enabled: true,
        buttons: {
            printButton: {
                text: 'Print Chart',  // প্রিন্ট বাটনের টেক্সট
                onclick: function () {
                    this.print();  // প্রিন্ট ফাংশন কল
                },
                align: 'center',  // বাটনের অবস্থান
                verticalAlign: 'bottom'
            }
        }
    }
});

ব্যাখ্যা:

• text: 'Print Chart': প্রিন্ট বাটনের টেক্সট।
• onclick: function () { this.print(); }: প্রিন্ট বাটনে ক্লিক করলে প্রিন্ট ফাংশন কল হবে এবং চার্টটি প্রিন্ট হবে।
• align এবং verticalAlign: প্রিন্ট বাটনের অবস্থান কাস্টমাইজ করা হয়েছে।

৩. Custom Export Size Configuration

Highcharts এ এক্সপোর্ট করার সময় আপনি চার্টের সাইজ কাস্টমাইজ করতে পারেন, যাতে এক্সপোর্ট করা ছবি বা PDF নির্দিষ্ট আকারে হয়। এটি গুরুত্বপূর্ণ যখন আপনি নিশ্চিত করতে চান যে চার্টটি বিশেষ প্রিন্ট বা ডাউনলোড সাইজে থাকবে।

উদাহরণ: কাস্টম এক্সপোর্ট সাইজ কনফিগারেশন

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sales Over Time'
    },
    series: [{
        name: 'Sales',
        data: [1, 3, 2, 4, 5]
    }],
    exporting: {
        enabled: true,
        sourceWidth: 800,  // এক্সপোর্ট করা ছবির প্রস্থ
        sourceHeight: 600,  // এক্সপোর্ট করা ছবির উচ্চতা
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadPDF']
            }
        }
    }
});

ব্যাখ্যা:

• sourceWidth: এক্সপোর্ট করা ছবির প্রস্থ কাস্টমাইজ করা হয়েছে।
• sourceHeight: এক্সপোর্ট করা ছবির উচ্চতা কাস্টমাইজ করা হয়েছে।

৪. কাস্টম এক্সপোর্ট ফর্ম্যাট এবং কাস্টম প্যানেল

Highcharts এ আপনি কাস্টম এক্সপোর্ট প্যানেল তৈরি করতে পারেন, যেখানে আপনি প্রয়োজনীয় এক্সপোর্ট ফরম্যাট এবং বাটন কাস্টমাইজ করতে পারেন। যেমন, আপনি নির্দিষ্ট ফরম্যাটে এক্সপোর্ট করার বিকল্প সরবরাহ করতে পারেন এবং এক্সপোর্ট প্যানেলটি সম্পূর্ণরূপে কাস্টমাইজ করতে পারেন।

উদাহরণ: কাস্টম এক্সপোর্ট প্যানেল

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Market Data'
    },
    series: [{
        name: 'Data Series',
        data: [10, 20, 30, 40, 50]
    }],
    exporting: {
        enabled: true,
        buttons: {
            contextButton: {
                text: 'Export Options',
                menuItems: [
                    'downloadPNG',  // PNG ফরম্যাট
                    'downloadJPEG', // JPEG ফরম্যাট
                    'downloadPDF',  // PDF ফরম্যাট
                    'downloadSVG'   // SVG ফরম্যাট
                ],
                align: 'left',  // এক্সপোর্ট বাটনের অবস্থান
                verticalAlign: 'top'
            }
        }
    }
});

ব্যাখ্যা:

• menuItems: এখানে আপনি এক্সপোর্ট অপশন কাস্টমাইজ করতে পারেন, যেমন PNG, JPEG, PDF এবং SVG ফরম্যাটে এক্সপোর্ট করা।

সারাংশ

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