<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Open bugs over time</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script>
</head>

<body>
  <canvas id="bugChart" width="800" height="400"></canvas>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const jsonData = [];

    var labels = jsonData.map(function(pair) { return pair[0]; });
    var data = jsonData.map(function(pair) { return pair[1]; });

    var ctx = document.getElementById('bugChart').getContext('2d');

    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Open bugs over time',
                backgroundColor: 'rgba(0, 123, 255, 0.5)',
                borderColor: 'rgba(0, 123, 255, 1)',
                borderWidth: 1,
                data: data
            }]
        },

        options: {
            plugins: {
                zoom: {
                    pan: {
                        enabled: true,
                    },
                    zoom: {
                        wheel: { enabled: true },
                        pinch: { enabled: true },
                        mode: 'xy',
                    }
                }
            },
            scales: {
                x: {
                    type: 'time',
                    time: {unit: 'month'}
                },
                y: {
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        }
    });
});
</script>

</body>
</html>