Virkdata
Opret gratis konto Log ind

ChartJS + CVR API: Visualisering af Finansielle Data

I denne vejledning vil vi gå igennem, hvordan man kan integrere data fra Virkdata API'en med ChartJS for at visualisere finansielle oplysninger i en graf på en web side. Vi vil fokusere på at vise balancestatus over tid for et specifikt firma.

8. april 2024 · 3 minutters læsning
ChartJS + CVR API: Visualisering af Finansielle Data
Start med HTML-strukturen

Først opretter vi en simpel HTML-fil, som inkluderer de nødvendige biblioteker og opsætter grundstrukturen. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Virkdata + ChartJS</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
  <canvas id="chart"></canvas>
</div>
</body>
</html>
JavaScript for Datahåndtering og Grafopbygning

Herefter tilføjer vi JavaScript, som henter data fra Virkdata API'en, og anvender Chart.js til at tegne grafen.

Opsætning af XMLHttpRequest

Vi starter med at oprette en XMLHttpRequest for at hente data. Vi sætter withCredentials til true for at tillade cookies og godkendelsesheaders over domæner, hvis det er nødvendigt. 

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
Håndtering af Respons

Når vi har sendt forespørgslen, håndterer vi svaret fra serveren ved at lytte til readystatechange eventet. Når data er fuldt modtaget (this.readyState === this.DONE), parser vi JSON-responsen.

xhr.addEventListener('readystatechange', function () {
if (this.readyState === this.DONE) {
    const response = JSON.parse(this.responseText);
    const financialData = response.financial_summary;
    financialData.reverse(); // Vend data for at vise det nyeste først
Forberedelse af Data til Grafen

Vi udtrækker årene og balancestatus fra det finansielle dataset, og bruger disse som data og labels til grafen.

const years = financialData.map(item => item.year);
const balanceSheetStatus = financialData.map(item => parseInt(item.balance_sheet_status));
Opsætning af Chart.js

Vi opretter et nyt Chart.js objekt ved at bruge getContext('2d') fra vores canvas-element. Vi formaterer også tal med dansk nummerformat.

const ctx = document.querySelector('#chart').getContext('2d');
const danishNumberFormatter = new Intl.NumberFormat('da-DK', {
    style: 'decimal',
    maximumFractionDigits: 0
});

new Chart(ctx, {
    type: 'line', // eller 'bar' for stolpediagram
    data: {
        labels: years,
        datasets: [{
            label: 'Årets resultat',
            data: balanceSheetStatus,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
        }]
    },
Konfiguration af Grafens Muligheder

Vi tilpasser yderligere indstillinger såsom aksemarkeringer og tooltips for at forbedre brugeroplevelsen.

            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return danishNumberFormatter.format(value) + ' DKK';
                            }
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.dataset.label + ': ' + danishNumberFormatter.format(tooltipItem.parsed.y) + ' DKK';
                            }
                        }
                    },
                },
                responsive: true,
                maintainAspectRatio: false,
            }
        });
    }
});
Send Forespørgslen

Til sidst sender vi forespørgslen til API'et med den nødvendige godkendelsesheader.

xhr.open('GET', 'https://virkdata.dk/api/?search=firmanavn&financial_summary=true');
xhr.setRequestHeader('Authorization', 'YOUR_API_KEY');
xhr.send();
Resultat

Sådan vil resultatet se ud i din browser. Her er eksempel hvor vi peger musen over året 2022 som viser årets resultat. Dette er muligt på hele grafen.

ChartJS + Virkdata API: Visualisering af Finansielle Data Resultat

Komplet kode

Her er den komplette kode:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Virkdata + ChartJS</title>
    
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
  // Set up the XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener('readystatechange', function () {
    if (this.readyState === this.DONE) {
        const response = JSON.parse(this.responseText);
        const financialData = response.financial_summary;
        
        financialData.reverse();
        
        // Prepare the data for the chart
        const years = financialData.map(item => item.year);
        const balanceSheetStatus = financialData.map(item => parseInt(item.balance_sheet_status));

        // Get the canvas context
        const ctx = document.querySelector('#chart').getContext('2d');
        
        const danishNumberFormatter = new Intl.NumberFormat('da-DK', {
            style: 'decimal', // This ensures numerical formatting without currency symbols
            maximumFractionDigits: 0 // Assuming no fractional parts are needed; adjust as necessary
        });

        // Instantiate the chart
        new Chart(ctx, {
            type: 'line', // Change to 'bar' type
            data: {
                labels: years,
                datasets: [{
                    label: 'Årets resultat',
                    data: balanceSheetStatus,
                    borderWidth: 1,
                    fill: true,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return danishNumberFormatter.format(value) + ' DKK'; // Formatting with Danish Kroner
                            }
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.dataset.label + ': ' + danishNumberFormatter.format(tooltipItem.parsed.y) + ' DKK';
                            }
                        }
                    },
                    filler: {
                        propagate: false,
                    },
                    title: {
                        display: false
                    },
                    legend: {
                        display: false
                    },
                
                },
                interaction: {
                        intersect: false,
                    },
                
                responsive: true,
                maintainAspectRatio: false,
            }
        });
    }
});

xhr.open('GET', 'https://virkdata.dk/api/?search=firmanavn&financial_summary=true');
xhr.setRequestHeader('Authorization', 'YOUR_API_KEY');

// Send the request
xhr.send();

</script>    
    
</head>

<body>
    
    
<div>
  <canvas id="chart"></canvas>
</div>

    
</body>
</html>
Konklusion

Ved at følge denne vejledning, vil du kunne visualisere finansielle data fra Virkdata API'en ved brug af Chart.js. Denne teknik kan tilpasses til at vise forskellige typer af data og er en kraftfuld måde at præsentere information på en interaktiv og visuelt tiltalende måde.

Flere Artikler

Praktiske råd, detaljerede guides og opdaterede nyheder

Vis alle artikler