DXN Release

Daily release of DXN for the first 10 years.

by jarosciak

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Include the annotation plugin for Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
    <script src="script.js"></script> <!-- External JS file -->
</head>
<body>
    <canvas id="chart"></canvas>
</body>
</html>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('chart');
    canvas.width = window.innerWidth * 0.9;
    canvas.height = window.innerHeight * 0.9;

    const ctx = canvas.getContext('2d');
    const totalYears = 10;
    const numDays = 365 * totalYears;  // 10 years
    const startingDXN = 10000;

    function generateChartData() {
        const data = [];
        let value = startingDXN;
        for (let day = 1; day <= numDays; day++) {
            value = value * (1 - 0.002);
            const percentage = ((startingDXN - value) / startingDXN * 100).toFixed(2);
            data.push({ x: day/365, y: value.toFixed(10), p: percentage });  // x value is now in years
        }
        return data;
    }

    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'DBXEN (DXN) RELEASE (first 10 years)',
                data: generateChartData(),
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                pointRadius: 1,
                pointHitRadius: 1,
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    type: 'linear',
                    title: {
                        display: true,
                        text: 'Year',
                    },
                    grid: {
                        borderDash: [2],
                        drawBorder: false,
                    },
                    min: 0,
                    max: totalYears,  // 10 years
                    ticks: {
                        stepSize: 1,
                        callback: function(value) {
                            return value.toFixed(0);  // Display whole years
                        }
                    }
                },
                y: {
                    title: {
                       ...