chartjs_example.js

/*
  chartJS references:
  https://www.chartjs.org/docs/latest/getting-started/installation.html
  https://cdnjs.com/libraries/Chart.js
*/

/*
 html:
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <canvas id="cve-chart"></canvas>
*/
const CHART_DATA_CVE = 'https://files.oxl.at/data/cve_statistics.json';

var CHART_CVE_LABELS = [];
var CHART_CVE_COUNT = [];
var CHART_CVE_LOW = [];
var CHART_CVE_MED = [];
var CHART_CVE_HIGH = [];
var CHART_CVE_CRIT = [];

function fetchChartData(url, callback) {
    var http = new XMLHttpRequest();
    http.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            let resp = JSON.parse(this.responseText);
            callback(resp);
        }
    };
    http.open("GET", url, true);
    http.send();
}

function renderCVEChart() {
    var mixChart = new Chart(document.getElementById("cve-chart").getContext('2d'), {
        type: 'bar',
        data: {
            labels: CHART_CVE_LABELS,
            datasets: [
                {
                    type: 'line',
                    label: "Low",
                    data: CHART_CVE_LOW,
                    borderColor: 'rgba(238, 210, 2, 0.9)',
                    backgroundColor: 'rgba(238, 210, 2, 0.9)',
                },
                {
                    type: 'line',
                    label: "Medium",
                    data: CHART_CVE_MED,
                    borderColor: 'rgba(255, 120, 0, 0.9)',
                    backgroundColor: 'rgba(255, 120, 0, 0.9)',
                },
                {
                    type: 'line',
                    label: "High",
                    data: CHART_CVE_HIGH,
                    borderColor: 'rgba(237, 67, 55, 0.9)',
                    backgroundColor: 'rgba(237, 67, 55, 0.9)',
                },
                {
                    type: 'line',
                    label: "Critical",
                    data: CHART_CVE_CRIT,
                    borderColor: 'rgba(139, 0, 0, 0.9)',
                    backgroundColor: 'rgba(139, 0, 0, 0.9)',
                },
                {
                    label: "Overall",
                    data: CHART_CVE_COUNT,
                    borderColor: 'rgba(0, 0, 0, 0)',
                    backgroundColor: 'rgba(244, 233, 140, 0.8)',
                }
            ]
        },
        options: {
        responsive: true,
            title: {
                display: true,
                text: 'Reported Vulnerabilities'
            },
            tooltips: {
                mode: 'index',
                intersect: true
            },
            scales: {
                xAxes: [{
                    stacked: true,
                }]
            }
        }
    });
}

function updateCVEChart(resp) {
    for (let [year, values] of Object.entries(resp)) {
        CHART_CVE_LABELS.push(year);
        CHART_CVE_COUNT.push(values.count);
        CHART_CVE_LOW.push(values.count_severity.low);
        CHART_CVE_MED.push(values.count_severity.med);
        CHART_CVE_HIGH.push(values.count_severity.high);
        CHART_CVE_CRIT.push(values.count_severity.crit + values.count_severity.dis);
        console.log(year, values);
    }
    renderCVEChart();
}

function buildCVEChart() {
    fetchChartData(CHART_DATA_CVE, updateCVEChart);
}

buildCVEChart();