How to create a dynamic chart or graph using jQuery



Image not found!!

Creating a dynamic chart or graph using jQuery is often done in conjunction with a charting library, as jQuery itself doesn't provide built-in charting capabilities. One popular library for this purpose is Chart.js. Here's a simple example of how you can use jQuery along with Chart.js to create a dynamic chart:

  1. Include jQuery and Chart.js in your HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Chart Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>

    <script>
        // Your JavaScript code will go here
    </script>
</body>
</html>
  1. Write the jQuery and Chart.js code:
javascript
$(document).ready(function () {
    // Sample data
    var data = {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Sample Data',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            data: [65, 59, 80, 81, 56],
        }]
    };

    // Chart configuration
    var options = {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    };

    // Create a new chart instance
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',  // Change the chart type as needed (bar, line, pie, etc.)
        data: data,
        options: options
    });

    // Update the chart with new data (you can call this dynamically, e.g., from an AJAX request)
    function updateChart(newData) {
        myChart.data.datasets[0].data = newData;
        myChart.update();
    }

    // Example of updating the chart with new data after a delay (for demonstration purposes)
    setTimeout(function () {
        var newData = [28, 48, 40, 19, 86];
        updateChart(newData);
    }, 3000); // 3000 milliseconds (3 seconds) delay for demonstration
});

In this example, the data object contains your initial dataset, and the options object contains the configuration for the chart (you can customize it according to your needs). The updateChart function allows you to dynamically update the chart with new data.

Remember to adapt the chart type, labels, colors, and other options according to your specific requirements. Also, you might need to adapt the code further based on your data source and how you plan to fetch or receive new data for the chart.

Category List