JSON এবং XML ডেটা হ্যান্ডলিং

Google Charts API এবং GWT (Google Web Toolkit) ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার সময় ডেটার উৎস হিসেবে JSON এবং XML ব্যবহার করা হয়। JSON এবং XML উভয়ই সাধারণ ডেটা ফরম্যাট, এবং গুগল চার্ট API সেগুলিকে ইন্টারপ্রেট করে ডাটা ভিজ্যুয়ালাইজেশন প্রদর্শন করতে সক্ষম। এই টিউটোরিয়ালে আমরা দেখব কীভাবে GWT ব্যবহার করে JSON এবং XML ডেটা হ্যান্ডলিং করা যায় এবং সেগুলিকে Google Charts এ রেন্ডার করা যায়।

JSON ডেটা হ্যান্ডলিং

JSON (JavaScript Object Notation) একটি জনপ্রিয় ডেটা ফরম্যাট যা হালকা ও মানব-পাঠযোগ্য। Google Charts API JSON ডেটাকে ইনপুট হিসেবে গ্রহণ করতে পারে। JSON ডেটা সাধারণত ওয়েব সার্ভার থেকে বা API এর মাধ্যমে আসে।

JSON ডেটা থেকে Google Chart তৈরি করা

আপনি যদি JSON ফরম্যাটে ডেটা পেয়ে থাকেন, তবে সেই ডেটাকে DataTable এ রূপান্তর করে Google Chart তৈরি করা যেতে পারে। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে JSON ডেটা ব্যবহার করে একটি Bar Chart তৈরি করা হয়েছে।

JSON ডেটা এবং Google Chart এর উদাহরণ

public class JsonDataExample {
    public native void drawChartWithJson() /*-{
        var jsonData = '{"cols":[{"id":"","label":"Year","type":"string"},{"id":"","label":"Sales","type":"number"}],"rows":[{"c":[{"v":"2013"},{"v":1000}]},{"c":[{"v":"2014"},{"v":1170}]},{"c":[{"v":"2015"},{"v":1250}]},{"c":[{"v":"2016"},{"v":1530}]}]}';
        
        var data = new $wnd.google.visualization.DataTable(jsonData);
        
        var options = {
            title: 'Company Sales Performance',
            hAxis: {title: 'Year'},
            vAxis: {title: 'Sales ($)'}
        };
        
        var chart = new $wnd.google.visualization.BarChart($doc.getElementById('chart_div'));
        chart.draw(data, options);
    }-*/;
}

এখানে, JSON ফরম্যাটে ডেটা প্রদান করা হয়েছে এবং সেটি google.visualization.DataTable এ রূপান্তরিত করা হয়েছে। এরপর সেই ডেটা দিয়ে Bar Chart রেন্ডার করা হয়েছে।

JSON ডেটা পার্সিং ও লোডিং

JSON ফরম্যাটের উদাহরণ:

{
    "cols": [
        {"id": "", "label": "Year", "type": "string"},
        {"id": "", "label": "Sales", "type": "number"}
    ],
    "rows": [
        {"c":[{"v":"2013"},{"v":1000}]},
        {"c":[{"v":"2014"},{"v":1170}]},
        {"c":[{"v":"2015"},{"v":1250}]},
        {"c":[{"v":"2016"},{"v":1530}]}
    ]
}

এখানে, cols অংশে কলামের তথ্য দেওয়া হয়েছে এবং rows অংশে ডেটা রেকর্ড রাখা হয়েছে।

XML ডেটা হ্যান্ডলিং

XML (eXtensible Markup Language) একটি টেক্সট-বেসড ডেটা ফরম্যাট যা গঠনমূলক ডেটার জন্য ব্যবহৃত হয়। XML ডেটা অনেক ক্ষেত্রেই API বা সার্ভারের মাধ্যমে আসে। Google Charts API XML ডেটা থেকেও ডেটা লোড করতে পারে, তবে XML ডেটাকে প্রথমে JSON বা DataTable ফরম্যাটে রূপান্তর করতে হয়।

XML ডেটা থেকে Google Chart তৈরি করা

XML ডেটা লোড করে Google Charts এর জন্য DataTable তৈরি করতে JavaScript বা GWT ব্যবহার করা যায়। নীচে একটি উদাহরণ দেওয়া হলো, যেখানে XML ডেটা ব্যবহার করে একটি Pie Chart তৈরি করা হয়েছে।

XML ডেটা এবং Google Chart এর উদাহরণ

public class XmlDataExample {
    public native void drawChartWithXml() /*-{
        var xmlData = '<chart><data><year>2013</year><sales>1000</sales></data><data><year>2014</year><sales>1170</sales></data><data><year>2015</year><sales>1250</sales></data><data><year>2016</year><sales>1530</sales></data></chart>';
        
        var parser = new $wnd.DOMParser();
        var xmlDoc = parser.parseFromString(xmlData, "text/xml");
        var data = new $wnd.google.visualization.DataTable();
        
        // Parse XML data and add to DataTable
        var rows = xmlDoc.getElementsByTagName('data');
        for (var i = 0; i < rows.length; i++) {
            var year = rows[i].getElementsByTagName('year')[0].childNodes[0].nodeValue;
            var sales = rows[i].getElementsByTagName('sales')[0].childNodes[0].nodeValue;
            data.addRow([year, sales]);
        }

        var options = {
            title: 'Company Sales Performance',
            hAxis: {title: 'Year'},
            vAxis: {title: 'Sales ($)'}
        };
        
        var chart = new $wnd.google.visualization.PieChart($doc.getElementById('chart_div'));
        chart.draw(data, options);
    }-*/;
}

এখানে, XML ডেটা একটি স্ট্রিং হিসেবে ব্যবহার করা হয়েছে এবং DOMParser ব্যবহার করে XML ডেটা পার্স করা হয়েছে। পরে সেই ডেটা google.visualization.DataTable এ যোগ করে Pie Chart রেন্ডার করা হয়েছে।

XML ডেটার উদাহরণ:

<chart>
    <data>
        <year>2013</year>
        <sales>1000</sales>
    </data>
    <data>
        <year>2014</year>
        <sales>1170</sales>
    </data>
    <data>
        <year>2015</year>
        <sales>1250</sales>
    </data>
    <data>
        <year>2016</year>
        <sales>1530</sales>
    </data>
</chart>

এখানে, data ট্যাগের মধ্যে প্রতিটি রেকর্ডের year এবং sales এর মান রয়েছে, যা XML ডেটা থেকে পার্স করে DataTable এ যোগ করা হয়েছে।

JSON এবং XML ডেটা হ্যান্ডলিং এর সুবিধা

১. ডেটা সোর্সের নমনীয়তা

JSON এবং XML উভয়ই ওয়েব অ্যাপ্লিকেশনে ডেটা সঞ্চালনের জন্য খুবই জনপ্রিয় ফরম্যাট। আপনি JSON অথবা XML ফরম্যাটে যেকোনো ধরনের ডেটা এক্সচেঞ্জ করতে পারেন, যা আপনার অ্যাপ্লিকেশনের জন্য খুবই উপকারী।

২. ডেটার সহজ ব্যবহার

Google Charts API JSON এবং XML ডেটাকে খুব সহজেই গ্রহণ করে এবং ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে। GWT এর মাধ্যমে আপনি এই ডেটাগুলো ডায়নামিকভাবে চার্টে রেন্ডার করতে পারেন।

৩. বিভিন্ন ফরম্যাটে এক্সপোর্ট

JSON এবং XML ডেটার মাধ্যমে ডেটা এক্সপোর্ট করা সহজ। আপনি API এর মাধ্যমে বিভিন্ন ফরম্যাটে ডেটা সংগ্রহ করতে পারেন এবং তারপর তা চার্টে রেন্ডার করতে পারবেন।

JSON এবং XML ডেটা হ্যান্ডলিং GWT এবং Google Charts এর জন্য একটি অত্যন্ত গুরুত্বপূর্ণ ফিচার, যা ডেটা এক্সচেঞ্জ এবং ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। GWT ব্যবহার করে এই ডেটা ফরম্যাট থেকে সহজেই ডেটা রেন্ডার এবং চার্ট তৈরি করা সম্ভব।