Chart.js এবং JSON Data Integration

চার্টজেএস (Chart.js) - Web Development

225

Chart.js এর মাধ্যমে আপনি JSON ডেটা ব্যবহার করে চার্ট তৈরি করতে পারেন। JSON (JavaScript Object Notation) হলো একটি লাইটওয়েট ডেটা বিনিময় ফরম্যাট যা JavaScript-এ ব্যবহৃত হয়। JSON ফাইল থেকে ডেটা রিড করে, আপনি Chart.js-এর মাধ্যমে সেটি ভিজ্যুয়ালাইজ করতে পারেন।

এখানে আমরা দেখব কিভাবে JSON ডেটা থেকে Chart.js ব্যবহার করে ডেটা লোড এবং প্রদর্শন করা যায়।

১. JSON Data Structure

একটি JSON ফাইল সাধারণত এমন একটি স্ট্রাকচার থাকবে যেখানে labels এবং datasets থাকবে। উদাহরণস্বরূপ:

{
    "labels": ["January", "February", "March", "April", "May", "June"],
    "datasets": [
        {
            "label": "Sales Data",
            "data": [12, 19, 3, 5, 2, 3],
            "backgroundColor": "rgba(75, 192, 192, 0.2)",
            "borderColor": "rgba(75, 192, 192, 1)",
            "borderWidth": 1
        }
    ]
}

এই JSON ডেটা এক্সটার্নাল ফাইল (যেমন data.json) থেকে লোড করা যেতে পারে অথবা আপনি এটি JavaScript অবজেক্ট হিসেবে ব্যবহার করতে পারেন।

২. JSON Data থেকে Chart.js এ ডেটা লোড করা

Chart.js এর মাধ্যমে JSON ডেটা লোড করতে, আপনি সাধারণত AJAX (Asynchronous JavaScript and XML) অথবা Fetch API ব্যবহার করে JSON ডেটা এনে তা Chart.js এ ইনপুট হিসেবে দিতে পারেন।

উদাহরণ ১: JSON ডেটা ফাইল থেকে ডেটা লোড করা (Fetch API ব্যবহার)

ধরা যাক, আপনার একটি JSON ফাইল রয়েছে যা থেকে আপনি ডেটা লোড করতে চান।

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js with JSON Data</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Chart.js with JSON Data</h1>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script src="script.js"></script>
</body>
</html>

JSON File (data.json):

{
    "labels": ["January", "February", "March", "April", "May", "June"],
    "datasets": [
        {
            "label": "Sales Data",
            "data": [12, 19, 3, 5, 2, 3],
            "backgroundColor": "rgba(75, 192, 192, 0.2)",
            "borderColor": "rgba(75, 192, 192, 1)",
            "borderWidth": 1
        }
    ]
}

JavaScript (script.js):

// Fetch the JSON data
fetch('data.json')
    .then(response => response.json()) // Parse JSON data
    .then(data => {
        // Create the chart with fetched data
        const ctx = document.getElementById('myChart').getContext('2d');
        
        const myChart = new Chart(ctx, {
            type: 'bar', // Bar chart type
            data: {
                labels: data.labels, // Labels from JSON
                datasets: data.datasets // Datasets from JSON
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error loading the JSON data: ', error));

বর্ণনা:

fetch('data.json'): fetch API ব্যবহার করে JSON ফাইলটি সার্ভার বা লোকাল ফোল্ডার থেকে লোড করা হচ্ছে।
response.json(): লোড হওয়া JSON ডেটা পার্স করা হচ্ছে।
data.labels এবং data.datasets: JSON থেকে ডেটা নিয়ে Chart.js-এর জন্য ডেটা সেট তৈরি করা হচ্ছে।

৩. JSON Data Inline (JavaScript Object হিসেবে)

আপনি যদি JSON ডেটা সরাসরি আপনার স্ক্রিপ্টে ব্যবহার করতে চান, তবে আপনি JSON ডেটাকে JavaScript অবজেক্ট হিসেবে রাখতে পারেন।

উদাহরণ ২: JSON ডেটা JavaScript অবজেক্ট হিসেবে ব্যবহার

// Inline JSON data
const jsonData = {
    "labels": ["January", "February", "March", "April", "May", "June"],
    "datasets": [
        {
            "label": "Sales Data",
            "data": [12, 19, 3, 5, 2, 3],
            "backgroundColor": "rgba(75, 192, 192, 0.2)",
            "borderColor": "rgba(75, 192, 192, 1)",
            "borderWidth": 1
        }
    ]
};

// Create the chart with inline JSON data
const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar', // Bar chart type
    data: {
        labels: jsonData.labels, // Labels from JSON
        datasets: jsonData.datasets // Datasets from JSON
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

বর্ণনা:

এখানে JSON ডেটা সরাসরি একটি JavaScript অবজেক্ট হিসেবে দেওয়া হয়েছে এবং এটি Chart.js এর মাধ্যমে ভিজ্যুয়ালাইজ করা হয়েছে।
আপনি এভাবে সরাসরি ডেটা ব্যবহার করে চার্ট তৈরি করতে পারেন, যা সহজ এবং দ্রুত।

৪. Dynamic JSON Data Integration

Real-time বা Dynamic JSON Data এর জন্য আপনি API ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি সার্ভার থেকে রিয়েল-টাইম ডেটা এনে, সেটি চার্টে প্রদর্শন করতে পারেন।

উদাহরণ: Dynamic JSON Data Integration using API

// API থেকে রিয়েল-টাইম ডেটা নিয়ে আসা
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        const ctx = document.getElementById('myChart').getContext('2d');
        
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: [{
                    label: 'Real-time Data',
                    data: data.values,
                    fill: false,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error fetching the data:', error));

বর্ণনা:

এই উদাহরণে fetch ব্যবহার করে একটি API থেকে রিয়েল-টাইম ডেটা নেওয়া হচ্ছে এবং সেটি Chart.js এর মধ্যে প্রদর্শন করা হচ্ছে।
data.labels এবং data.values JSON থেকে পাওয়া ডেটা।

সারাংশ

JSON ডেটা ব্যবহার করে Chart.js-এ ডেটা প্রদর্শন করা একটি সহজ এবং কার্যকর পদ্ধতি।
আপনি JSON ডেটা ফাইল থেকে লোড করতে পারেন অথবা JavaScript অবজেক্ট হিসেবে সরাসরি ডেটা ব্যবহার করতে পারেন।
Real-time বা Dynamic ডেটা ইনটিগ্রেশন করতে, API ব্যবহার করে ডেটা ফেচ এবং চার্টে আপডেট করা যায়।

Chart.js এবং JSON ডেটার এই ইন্টিগ্রেশন ওয়েব অ্যাপ্লিকেশনগুলোতে ডেটা ভিজ্যুয়ালাইজেশনকে আরও শক্তিশালী এবং আকর্ষণীয় করে তোলে।

Content added By

SATT Academy

JSON ফাইল থেকে ডেটা লোড করা

177

Chart.js-এ JSON ফাইল থেকে ডেটা লোড করা খুবই সহজ। JSON ফাইলটি সার্ভার বা লোকাল ফোল্ডারে থাকতে পারে এবং AJAX (বা Fetch API) ব্যবহার করে সেই ডেটা ফাইলটি চার্টে লোড করা যায়। এই পদ্ধতিতে আপনি সহজেই ডেটা লোড করে রিয়েল-টাইম চার্ট তৈরি করতে পারেন।

নিচে আমরা একটি JSON ফাইল থেকে ডেটা লোড করার উদাহরণ দেখব এবং সেটি Chart.js-এ প্রদর্শন করব।

1. JSON ফাইলের উদাহরণ

ধরা যাক, আমাদের একটি data.json নামক ফাইল আছে, যা কিছু ডেটা ধারণ করে। এটি সার্ভারে বা লোকাল ফোল্ডারে থাকতে পারে।

data.json (এটি একটি উদাহরণ JSON ফাইল)

{
  "labels": ["January", "February", "March", "April", "May"],
  "datasets": [
    {
      "label": "Sales Data",
      "data": [10, 20, 30, 40, 50],
      "backgroundColor": "rgba(54, 162, 235, 0.2)",
      "borderColor": "rgba(54, 162, 235, 1)",
      "borderWidth": 1
    }
  ]
}

এই JSON ফাইলটি একটি চার্টের জন্য প্রয়োজনীয় ডেটা ধারণ করে:

labels: এক্স-অক্ষের লেবেলগুলির একটি অ্যারে।
datasets: চার্টের ডেটা এবং গ্রাফের জন্য রং এবং বর্ডারের তথ্য।

2. HTML ফাইল

Chart.js এবং JavaScript ফাইলের মাধ্যমে JSON ডেটা লোড করার জন্য আমাদের একটি সাধারণ HTML ফাইল তৈরি করতে হবে।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js from JSON</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>

    <script src="script.js"></script>
</body>
</html>

এই HTML ফাইলে একটি canvas এলিমেন্ট রাখা হয়েছে, যেখানে চার্টটি রেন্ডার হবে। এছাড়া Chart.js লাইব্রেরিটি CDN এর মাধ্যমে অন্তর্ভুক্ত করা হয়েছে এবং একটি script.js ফাইল লিংক করা হয়েছে, যেখানে আমরা JavaScript কোড লিখব।

3. JavaScript ফাইল (AJAX বা Fetch API)

এখন, আমরা JavaScript ফাইলটি তৈরি করব যা JSON ফাইল থেকে ডেটা লোড করবে এবং সেটি Chart.js-এ রেন্ডার করবে।

script.js (Fetch API ব্যবহার করে JSON থেকে ডেটা লোড করা)

// Canvas এলিমেন্টকে target করা
const ctx = document.getElementById('myChart').getContext('2d');

// JSON ফাইল থেকে ডেটা লোড করা
fetch('data.json')  // JSON ফাইলের পাথ
  .then(response => response.json())  // JSON ডেটা পেতে
  .then(data => {
    // Chart.js কনফিগারেশন সেট করা
    const myChart = new Chart(ctx, {
      type: 'bar',  // চার্ট টাইপ
      data: {
        labels: data.labels,  // JSON থেকে লেবেল
        datasets: data.datasets  // JSON থেকে ডেটাসেট
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  })
  .catch(error => console.error('Error loading the JSON file:', error));

কী হচ্ছে এখানে?

fetch(): এটি AJAX এর একটি আধুনিক পদ্ধতি, যা সার্ভার থেকে ডেটা নিয়ে আসে।
response.json(): JSON ফাইলের ডেটা পার্স করা হচ্ছে।
data.labels এবং data.datasets: JSON থেকে ডেটা নিয়ে Chart.js-এর ডেটা অবজেক্টে সেট করা হচ্ছে।

এটি Chart.js-এ ডেটা লোড করার একটি সাধারণ উদাহরণ, যেখানে ডেটা সরাসরি JSON ফাইল থেকে চার্টে লোড হচ্ছে।

4. লকেল JSON ফাইল ব্যবহার

যদি আপনি লকেল ফোল্ডারে JSON ফাইল ব্যবহার করতে চান (যেমন ডেভেলপমেন্ট পরিবেশে), তখন file:// প্রোটোকল ব্যবহার করতে হবে। তবে এটি ব্রাউজারে শুধুমাত্র ডেভেলপমেন্ট পরিবেশে কাজ করবে।

এছাড়া, আপনার সার্ভারে যদি Node.js বা অন্য কোন সার্ভার রান করানো থাকে, তাহলে আপনি সার্ভার থেকে সরাসরি JSON ফাইল ব্যবহার করতে পারবেন।

5. সার্ভার থেকে JSON ডেটা লোড করা

আপনার JSON ফাইল সার্ভারে থাকলে আপনি সরাসরি URL ব্যবহার করে ডেটা লোড করতে পারবেন, যেমন:

fetch('https://example.com/api/data')  // সার্ভার URL

এটি Web API এর মাধ্যমে AJAX কল করবে এবং ডেটা লোড করবে।

6. Chart.js এর অন্যান্য কাস্টমাইজেশন

আপনি JSON থেকে ডেটা লোড করার পর, Chart.js-এ আরও অনেক কাস্টমাইজেশন করতে পারবেন:

backgroundColor: বারের রঙ।
borderColor: বর্ডারের রঙ।
hoverBackgroundColor: হোভার করার সময় বারের রঙ পরিবর্তন।
tooltip: টুলটিপ কাস্টমাইজেশন।

সারাংশ

Chart.js-এ JSON ফাইল থেকে ডেটা লোড করা খুবই সহজ এবং এক্সটেনসিবল। আপনি AJAX বা Fetch API ব্যবহার করে সরাসরি সার্ভার বা লোকাল ফোল্ডার থেকে JSON ডেটা লোড করে তা Chart.js এর মধ্যে প্রদর্শন করতে পারেন। এটি ডাইনামিক চার্ট তৈরি করতে এবং ওয়েব অ্যাপ্লিকেশনগুলিতে লাইভ ডেটা ভিজ্যুয়ালাইজ করতে সাহায্য করে।

Content added By

SATT Academy

JSON Data Binding এর মাধ্যমে চার্ট তৈরি করা

298

Chart.js-এ JSON ডেটা ব্যবহার করে চার্ট তৈরি করা একটি সাধারণ পদ্ধতি, বিশেষ করে যখন আপনার ডেটা একটি সার্ভার থেকে প্রাপ্ত হয় বা স্ট্যাটিকভাবে JSON ফাইলের মধ্যে থাকে। JSON ডেটা থেকে Chart.js-এ চার্ট তৈরি করতে, আপনি JSON ডেটা পাস করে সেটি চার্টে রেন্ডার করতে পারেন।

এখানে আমরা দেখাবো কীভাবে JSON Data Binding এর মাধ্যমে Chart.js-এ ডেটা ব্যবহার করে চার্ট তৈরি করা যায়।

1. JSON Data Structure:

ধরা যাক, আমাদের কাছে একটি JSON ডেটা আছে যা সেলস ডেটার তথ্য সংরক্ষণ করছে।

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

{
    "labels": ["January", "February", "March", "April", "May", "June"],
    "datasets": [
        {
            "label": "Sales Data",
            "data": [12, 19, 3, 5, 2, 3],
            "backgroundColor": "rgba(75, 192, 192, 0.2)",
            "borderColor": "rgba(75, 192, 192, 1)",
            "borderWidth": 1
        }
    ]
}

2. Chart.js-এ JSON Data ব্যবহার করে Chart তৈরি করা

Chart.js-এ JSON ডেটা ব্যবহারের জন্য আপনাকে JSON ডেটা লোড করতে হবে (যদি তা API থেকে আসছে)। এরপর, JSON ডেটাকে চার্টের ডেটাতে ম্যাপ করে চার্ট তৈরি করা হয়।

উদাহরণ: JSON Data Binding এর মাধ্যমে Chart তৈরি

HTML ফাইল (একটি <canvas> এলিমেন্ট সহ):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js with JSON Data</title>
</head>
<body>
    <h1>Sales Data</h1>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript ফাইল (Chart.js দিয়ে JSON Data দিয়ে Chart তৈরি করা):

// JSON ডেটা
const jsonData = {
    "labels": ["January", "February", "March", "April", "May", "June"],
    "datasets": [
        {
            "label": "Sales Data",
            "data": [12, 19, 3, 5, 2, 3],
            "backgroundColor": "rgba(75, 192, 192, 0.2)",
            "borderColor": "rgba(75, 192, 192, 1)",
            "borderWidth": 1
        }
    ]
};

// Canvas এলিমেন্টে চার্ট রেন্ডার করা
const ctx = document.getElementById('myChart').getContext('2d');

// Chart.js দিয়ে Chart তৈরি করা
const myChart = new Chart(ctx, {
    type: 'bar',  // বার চার্ট
    data: jsonData,  // JSON ডেটা প্রদান
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true  // Y-অক্ষ শূন্য থেকে শুরু হবে
            }
        }
    }
});

ব্যাখ্যা:

JSON ডেটা: আমরা একটি JSON অবজেক্ট ব্যবহার করেছি, যেখানে labels হল এক্স-অক্ষের লেবেল এবং datasets এর মধ্যে সেলস ডেটা, রঙ এবং বর্ডার প্রপার্টি রয়েছে।
Chart.js কনফিগারেশন: myChart.data এ সরাসরি JSON ডেটা প্রদান করা হয়েছে।
type: 'bar': এটি আমাদের চার্টের ধরন—এখানে একটি বার চার্ট তৈরি হবে।
options: চার্টের অপশন যেমন scales কাস্টমাইজ করা হয়েছে।

3. AJAX বা Fetch API ব্যবহার করে JSON ডেটা লোড করা

যদি আপনার JSON ডেটা API থেকে আসছে, তবে আপনি AJAX বা Fetch API ব্যবহার করে সার্ভার থেকে ডেটা লোড করতে পারেন।

উদাহরণ: Fetch API দিয়ে JSON ডেটা লোড করা

// Fetch API দিয়ে JSON ডেটা লোড করা
fetch('https://example.com/api/sales')  // আপনার API URL এখানে
    .then(response => response.json())
    .then(data => {
        const ctx = document.getElementById('myChart').getContext('2d');

        // Chart.js দিয়ে Chart তৈরি করা
        const myChart = new Chart(ctx, {
            type: 'line',  // লাইন চার্ট
            data: {
                labels: data.labels,  // API থেকে লেবেলস
                datasets: [{
                    label: 'Sales Data',
                    data: data.datasets[0].data,  // API থেকে ডেটা
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                    fill: false
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error:', error));

ব্যাখ্যা:

fetch(): fetch() মেথড ব্যবহার করে API থেকে JSON ডেটা লোড করা হয়।
data: API থেকে পাওয়া ডেটা JSON ফরম্যাটে নেয়া হয় এবং সেটি Chart.js এর data প্রপার্টি হিসেবে ব্যবহৃত হয়।

4. JSON Data এর মাধ্যমে Multiple Datasets (একাধিক ডেটাসেট)

আপনি একাধিক ডেটাসেট ব্যবহার করে একাধিক সিরিজের চার্ট তৈরি করতে পারেন। প্রতিটি ডেটাসেট JSON ফরম্যাটে থাকবে এবং Chart.js এ সেটি ব্যবহার করা যাবে।

উদাহরণ: Multiple Datasets

const jsonData = {
    "labels": ["January", "February", "March", "April", "May", "June"],
    "datasets": [
        {
            "label": "Sales Data",
            "data": [12, 19, 3, 5, 2, 3],
            "backgroundColor": 'rgba(255, 99, 132, 0.2)',
            "borderColor": 'rgba(255, 99, 132, 1)',
            "borderWidth": 1
        },
        {
            "label": "Profit Data",
            "data": [8, 16, 2, 7, 3, 4],
            "backgroundColor": 'rgba(54, 162, 235, 0.2)',
            "borderColor": 'rgba(54, 162, 235, 1)',
            "borderWidth": 1
        }
    ]
};

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar',
    data: jsonData,  // JSON ডেটা ব্যবহার
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

এখানে, datasets এর মধ্যে দুটি ডেটাসেট ব্যবহার করা হয়েছে — Sales Data এবং Profit Data।

সারাংশ

Chart.js-এ JSON Data Binding এর মাধ্যমে আপনি সহজেই ডেটা লোড করে চার্ট তৈরি করতে পারেন। আপনি JSON ডেটাকে সরাসরি চার্টের data প্রপার্টি হিসেবে ব্যবহার করতে পারেন অথবা AJAX বা Fetch API এর মাধ্যমে ডেটা সার্ভার থেকে নিয়ে আসতে পারেন। এই পদ্ধতিগুলি ডায়নামিক ডেটা লোডিং এবং রিয়েল-টাইম চার্ট আপডেটের জন্য খুবই কার্যকর।

Content added By

SATT Academy

AJAX ব্যবহার করে JSON Data Dynamic লোড করা

184

Chart.js-এ AJAX ব্যবহার করে JSON ডেটা ডাইনামিকভাবে লোড করা একটি সাধারণ এবং শক্তিশালী উপায়, যা ওয়েবসাইটে রিয়েল-টাইম ডেটা বা চেঞ্জিং ডেটা প্রদর্শন করতে সাহায্য করে। এই পদ্ধতি ব্যবহার করে আপনি সার্ভার থেকে ডেটা অ্যাক্সেস করতে পারেন এবং সেই ডেটার ভিত্তিতে চার্ট আপডেট করতে পারেন।

নিচে Chart.js এবং AJAX এর মাধ্যমে JSON ডেটা লোড করার একটি উদাহরণ দেয়া হয়েছে।

১. AJAX কল দিয়ে JSON Data লোড করা

এখানে একটি উদাহরণ দেওয়া হচ্ছে যেখানে AJAX কল ব্যবহার করে একটি API থেকে JSON ডেটা ফেচ করা হবে এবং সেই ডেটা দিয়ে Chart.js-এ চার্ট আপডেট করা হবে।

উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js with Dynamic JSON Data</title>
</head>
<body>
    <h1>Dynamic Chart with AJAX and JSON</h1>
    <canvas id="myChart" width="400" height="200"></canvas>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Chart.js চার্ট কনফিগারেশন
        const ctx = document.getElementById('myChart').getContext('2d');

        // AJAX কলের মাধ্যমে JSON ডেটা লোড করা
        function fetchData() {
            // একটি API থেকে ডেটা ফেচ করা (এটি একটি উদাহরণ API)
            fetch('https://api.example.com/data') // আপনার API URL এখানে দিবেন
                .then(response => response.json()) // JSON ডেটাতে রূপান্তর
                .then(data => {
                    // চার্ট ডেটা কনফিগারেশন সেট করা
                    const chartData = {
                        labels: data.labels, // X-অক্ষের লেবেল
                        datasets: [{
                            label: 'Sales Data',
                            data: data.values, // Y-অক্ষের ডেটা
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1
                        }]
                    };

                    // চার্ট আপডেট করা
                    const myChart = new Chart(ctx, {
                        type: 'bar', // চার্ট টাইপ
                        data: chartData, // ডেটা
                        options: {
                            responsive: true,
                            scales: {
                                y: {
                                    beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
                                }
                            }
                        }
                    });
                })
                .catch(error => console.error('Error loading the data:', error));
        }

        // ডেটা লোড করা
        fetchData();
    </script>
</body>
</html>

ব্যাখ্যা:

AJAX কল (Fetch API):
- fetch() ব্যবহার করে একটি API থেকে ডেটা আনা হয়। এখানে 'https://api.example.com/data' API এর উদাহরণ হিসেবে দেওয়া হয়েছে, তবে আপনাকে আপনার নিজস্ব API URL ব্যবহার করতে হবে।
- response.json() ব্যবহার করে JSON ডেটা পার্স করা হয়।
Chart.js কনফিগারেশন:
- labels: JSON ডেটা থেকে প্রাপ্ত লেবেলগুলি (X-অক্ষের মান) data.labels থেকে নেয়া হয়।
- datasets: Y-অক্ষের মান data.values থেকে নেওয়া হয়, যা মূলত বার চার্টের উচ্চতা নির্ধারণ করবে।
- backgroundColor এবং borderColor কাস্টমাইজ করা হয় বার চার্টের রং ঠিক করতে।
Chart.js update() ফাংশন:
- এই উদাহরণে, ডেটা লোড হওয়ার পর চার্ট তৈরি করা হয়েছে, তবে আপনি চাইলে ডেটা আপডেট করার জন্য update() ফাংশনও ব্যবহার করতে পারেন।

২. JSON ডেটার উদাহরণ

এই উদাহরণে API থেকে ফেরত আসা JSON ডেটা কেমন হতে পারে তা নিচে দেখানো হলো:

{
    "labels": ["January", "February", "March", "April", "May"],
    "values": [12, 19, 3, 5, 2]
}

labels: এক্স-অক্ষের মান (মাসের নাম)।
values: প্রতিটি মাসের জন্য Y-অক্ষের মান (যেমন বিক্রয় বা অন্যান্য পরিমাপ)।

৩. Real-time Data Update

আপনি যদি real-time data ইন্টিগ্রেশন করতে চান, যেখানে চার্ট প্রতি কয়েক সেকেন্ড পর পর আপডেট হবে, তাহলে setInterval ব্যবহার করতে পারেন, যা নিয়মিতভাবে AJAX কল করে চার্ট আপডেট করবে।

উদাহরণ: প্রতি ৫ সেকেন্ড পর পর ডেটা আপডেট

setInterval(fetchData, 5000); // প্রতি ৫ সেকেন্ড পর পর ফাংশনটি কল হবে

এটি AJAX কলের মাধ্যমে প্রতি ৫ সেকেন্ডে নতুন ডেটা নিয়ে এবং চার্ট আপডেট করবে।

সারাংশ

Chart.js এবং AJAX ব্যবহার করে আপনি ডাইনামিক এবং রিয়েল-টাইম চার্ট তৈরি করতে পারেন। JSON ডেটা ফেচ করে সেটি Chart.js-এ ব্যবহার করে চার্ট আপডেট করা হয়। আপনি AJAX বা WebSocket ব্যবহার করে ডেটা আপডেট করতে পারেন, যা ওয়েব অ্যাপ্লিকেশনের জন্য অত্যন্ত কার্যকরী।

Content added By

SATT Academy

JSON Data Manipulation এবং Chart.js

186

Chart.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা সহজেই ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়তা করে। অনেক সময় আমাদের ডেটা বিভিন্ন সোর্স থেকে আসে, যেমন JSON ফাইল বা API। এই ডেটা সাধারণত সঠিক ফরম্যাটে Chart.js এ প্রদর্শন করতে হয়। JSON (JavaScript Object Notation) ডেটা প্রক্রিয়াকরণ এবং Chart.js এ উপস্থাপনা নিয়ে কাজ করার জন্য কিছু কৌশল জানা প্রয়োজন।

এখানে আমরা দেখব কিভাবে JSON ডেটা ম্যানিপুলেশন এবং Chart.js এর মাধ্যমে তা ভিজ্যুয়ালাইজ করা যায়।

JSON ডেটার সঙ্গে Chart.js এর ইন্টিগ্রেশন

JSON ফাইল বা API থেকে ডেটা গ্রহণ করে সেটি Chart.js এর ডেটা ফরম্যাটে কনভার্ট করা হয়। এখানে JSON ডেটা ম্যানিপুলেশন করে সেটি চার্টে রেন্ডার করা হবে।

JSON Data Structure Example

ধরি, আমাদের কাছে একটি JSON ডেটা আছে যা একটি বিক্রয়ের ডেটা প্রদর্শন করছে, যেখানে প্রতি মাসের বিক্রয় মান এবং তারিখ দেওয়া রয়েছে:

[
    {"month": "January", "sales": 10},
    {"month": "February", "sales": 15},
    {"month": "March", "sales": 20},
    {"month": "April", "sales": 25},
    {"month": "May", "sales": 30}
]

এটি একটি সাধারণ JSON ডেটা, যেখানে প্রতিটি মাসের জন্য বিক্রয়ের মান দেওয়া রয়েছে।

JSON ডেটা প্রক্রিয়াকরণ এবং Chart.js এ ব্যবহার

Chart.js এ JSON ডেটা উপস্থাপনের জন্য, প্রথমে JSON ডেটা থেকে ডেটা সংগ্রহ করতে হবে এবং তারপর সেটি Chart.js এর জন্য উপযুক্ত ফরম্যাটে রূপান্তর করতে হবে।

১. JSON ডেটা Chart.js এ লোড এবং প্রক্রিয়া করা

এখানে JSON ডেটা কে এক্সট্রাক্ট এবং Chart.js ডেটা ফরম্যাটে রূপান্তর করা হবে। আমরা JSON ডেটার month এবং sales ভ্যালু ব্যবহার করে একটি Bar Chart তৈরি করব।

JavaScript Example (JSON Data Manipulation):

// JSON ডেটা
const jsonData = [
    {"month": "January", "sales": 10},
    {"month": "February", "sales": 15},
    {"month": "March", "sales": 20},
    {"month": "April", "sales": 25},
    {"month": "May", "sales": 30}
];

// এক্স এবং ওয়াই ডেটা আলাদা করা
const months = jsonData.map(item => item.month);
const sales = jsonData.map(item => item.sales);

// Chart.js দিয়ে চার্ট তৈরি করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // চার্ট টাইপ
    data: {
        labels: months, // এক্স-অক্ষের লেবেল (মাস)
        datasets: [{
            label: 'Monthly Sales', // ডেটাসেটের নাম
            data: sales, // ওয়াই-অক্ষের ডেটা (বিক্রয়)
            backgroundColor: 'rgba(75, 192, 192, 0.6)', // বার রঙ
            borderColor: 'rgba(75, 192, 192, 1)', // বর্ডার রঙ
            borderWidth: 1 // বর্ডারের প্রস্থ
        }]
    },
    options: {
        responsive: true, // রেসপন্সিভ
        scales: {
            y: {
                beginAtZero: true // Y অক্ষ শূন্য থেকে শুরু
            }
        }
    }
});

ব্যাখ্যা:

JSON ডেটা: JSON ডেটা প্রথমে jsonData ভ্যারিয়েবলে রাখা হয়েছে।
map() ফাংশন ব্যবহার করে:
- months অ্যারে তৈরি করা হয়েছে যেটিতে মাসের নাম রয়েছে।
- sales অ্যারে তৈরি করা হয়েছে যেটিতে বিক্রয়ের পরিমাণ রয়েছে।
Chart.js দিয়ে ডেটাকে labels (এক্স-অক্ষ) এবং datasets (ওয়াই-অক্ষ) হিসেবে মাপ করা হয়েছে।

JSON থেকে ডেটা নিয়ে API ব্যবহার করে Chart.js এ রেন্ডার করা

ধরা যাক, JSON ডেটা একটি API থেকে আসছে এবং সেটি থেকে ডেটা রিট্রিভ করে Chart.js এ প্রদর্শন করতে হবে। আপনি fetch() API ব্যবহার করে JSON ডেটা নিতে পারেন।

উদাহরণ: API থেকে JSON ডেটা নিয়ে Chart.js এ প্রদর্শন

// API থেকে JSON ডেটা ফেচ করা
fetch('https://api.example.com/sales')
    .then(response => response.json())
    .then(data => {
        // JSON ডেটা থেকে এক্স এবং ওয়াই ডেটা প্রস্তুত করা
        const months = data.map(item => item.month);
        const sales = data.map(item => item.sales);

        // Chart.js দিয়ে চার্ট তৈরি করা
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line', // লাইন চার্ট
            data: {
                labels: months,
                datasets: [{
                    label: 'Monthly Sales',
                    data: sales,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error fetching data:', error));

ব্যাখ্যা:

fetch() API ব্যবহার করে একটি https://api.example.com/sales API থেকে ডেটা ফেচ করা হয়েছে।
response.json() ব্যবহার করে JSON ডেটা রিট্রিভ করা হয়েছে।
তারপর ডেটাকে months এবং sales অ্যারেতে আলাদা করা হয়েছে।
Chart.js দিয়ে এটি রেন্ডার করা হয়েছে।

JSON ডেটা ম্যানিপুলেশন এবং চার্ট কাস্টমাইজেশন

ডেটা ফিল্টার করা: আপনি JSON ডেটা থেকে নির্দিষ্ট মান (যেমন, মাসের জন্য বিক্রয়ের পরিমাণ বেশি বা কম) ফিল্টার করতে পারেন এবং সেগুলি চার্টে প্রদর্শন করতে পারেন।
উদাহরণ:
```
const filteredData = jsonData.filter(item => item.sales > 20);
```
ডেটা সোর্ট করা: JSON ডেটা সোর্ট করে চার্টে রেন্ডার করা যেতে পারে। যেমন, আপনি মাসের বিক্রয় থেকে সর্বাধিক বিক্রয় পাওয়া মাসকে প্রথমে দেখাতে পারেন।
উদাহরণ:
```
const sortedData = jsonData.sort((a, b) => b.sales - a.sales);
```
Dynamic Chart Update: JSON ডেটা পরিবর্তিত হলে, আপনি myChart.update() ব্যবহার করে চার্ট ডাইনামিকালি আপডেট করতে পারেন।

সারাংশ

Chart.js এর মাধ্যমে JSON ডেটা ম্যানিপুলেশন খুবই সহজ এবং শক্তিশালী। আপনি JSON ডেটা বিভিন্ন সোর্স থেকে (ফাইল বা API) গ্রহণ করতে পারেন এবং তা Chart.js এর জন্য উপযুক্ত ফরম্যাটে কনভার্ট করে চার্টে উপস্থাপন করতে পারেন। JSON ডেটা ম্যানিপুলেশন এর মাধ্যমে ডেটাকে ফিল্টার, সোর্ট, অথবা আপডেট করতে পারেন, এবং সেটি আপনার চার্টের উপস্থাপনায় উন্নতি আনতে সাহায্য করে।

Content added By

SATT Academy

Chart.js এর পরিচিতি Chart.js সেটআপ এবং ইনস্টলেশন Chart.js এর বেসিক কনফিগারেশন Chart.js এর বিভিন্ন ধরনের চার্ট Chart.js এর অ্যাডভান্সড কনফিগারেশন

Chart.js এবং JSON Data Integration

১. JSON Data Structure

২. JSON Data থেকে Chart.js এ ডেটা লোড করা

উদাহরণ ১: JSON ডেটা ফাইল থেকে ডেটা লোড করা (Fetch API ব্যবহার)

বর্ণনা:

৩. JSON Data Inline (JavaScript Object হিসেবে)

উদাহরণ ২: JSON ডেটা JavaScript অবজেক্ট হিসেবে ব্যবহার

বর্ণনা:

৪. Dynamic JSON Data Integration

উদাহরণ: Dynamic JSON Data Integration using API

বর্ণনা:

সারাংশ

JSON ফাইল থেকে ডেটা লোড করা

1. JSON ফাইলের উদাহরণ

2. HTML ফাইল

3. JavaScript ফাইল (AJAX বা Fetch API)

4. লকেল JSON ফাইল ব্যবহার

5. সার্ভার থেকে JSON ডেটা লোড করা

6. Chart.js এর অন্যান্য কাস্টমাইজেশন

সারাংশ

JSON Data Binding এর মাধ্যমে চার্ট তৈরি করা

1. JSON Data Structure:

2. Chart.js-এ JSON Data ব্যবহার করে Chart তৈরি করা

উদাহরণ: JSON Data Binding এর মাধ্যমে Chart তৈরি

ব্যাখ্যা:

3. AJAX বা Fetch API ব্যবহার করে JSON ডেটা লোড করা

উদাহরণ: Fetch API দিয়ে JSON ডেটা লোড করা

ব্যাখ্যা:

4. JSON Data এর মাধ্যমে Multiple Datasets (একাধিক ডেটাসেট)

উদাহরণ: Multiple Datasets

সারাংশ

AJAX ব্যবহার করে JSON Data Dynamic লোড করা

১. AJAX কল দিয়ে JSON Data লোড করা

উদাহরণ:

ব্যাখ্যা:

২. JSON ডেটার উদাহরণ

৩. Real-time Data Update

উদাহরণ: প্রতি ৫ সেকেন্ড পর পর ডেটা আপডেট

সারাংশ

JSON Data Manipulation এবং Chart.js

JSON ডেটার সঙ্গে Chart.js এর ইন্টিগ্রেশন

JSON Data Structure Example

JSON ডেটা প্রক্রিয়াকরণ এবং Chart.js এ ব্যবহার

১. JSON ডেটা Chart.js এ লোড এবং প্রক্রিয়া করা

ব্যাখ্যা:

JSON থেকে ডেটা নিয়ে API ব্যবহার করে Chart.js এ রেন্ডার করা

উদাহরণ: API থেকে JSON ডেটা নিয়ে Chart.js এ প্রদর্শন

ব্যাখ্যা:

JSON ডেটা ম্যানিপুলেশন এবং চার্ট কাস্টমাইজেশন

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!