<!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>