github.com/diadata-org/diadata@v1.4.593/frontend/interestRates/createCharts/ownChart_v2.js

// ------------------------------------------------------------------------------------------------
// General variables and functions
// ------------------------------------------------------------------------------------------------

// // Load meta information on rates before page loads
var dateUrl = 'https://api.diadata.org/v1/interestrates';
$.holdReady(true);
var firstPublications = null;
$.getJSON(dateUrl, function(data) {
    firstPublications = data;
    $.holdReady(false);
});

let today = new Date().toISOString().slice(0, 10);
var yourOwnChart;
var firstPublications = {};

function addDays(date, days) {
    var result = new Date(date).getTime();
    result += days * 864e5
    result = new Date(result);
    return result.toISOString()
}

// getHistoric fetches historic data from our API with address @url
function getData(url, callback) {
    
	// Instantiate request object
	var request = new XMLHttpRequest()
	request.open('GET', url, true)

	// Load data in GET request
	request.onload = function() {
		var data = JSON.parse(this.response)
		if(this.status == 200) {
			if (typeof callback === "function") {
				callback(data)
			}
		} else if(this.status == 404) {
			console.log('Not found error')
		}
	}
	request.onerror = function() {
		console.log('Request error.')
    }
    request.send()
}

function makechart(rate, loading) {
    
	yourOwnChart = Highcharts.stockChart(rate.container, {
		rangeSelector: {
			buttonTheme: {
				   width: 20,
			},
			inputBoxWidth: 75,
	   	}, 
		chart: {
            type: 'spline',
		},
		credits: {
			text: 'DIADATA',
			href: 'https://diadata.org'
		},
        title: {
			text: rate.name,
			style: {
				fontSize: '20px',
			},
        },
        xAxis: {
            tickPixelInterval: 150,
			maxZoom: 20 * 1000,
			title: {
				margin: 10,
			}
		},
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Index value',
                margin: 80
			}	
        },
        series: [
			{
				name: rate.name,
				data: []
            },
		]
    });
    if(loading) {
        yourOwnChart.showLoading();
    }
}

// ------------------------------------------------------------------------------------------------
// First fill of chart when loading the page
// ------------------------------------------------------------------------------------------------

// Rate info for the first fill
var RateInfo = {
	name: 'SOFR30',
	container: 'yourOwnContainer',
    firstPublication: "2018-04-03",
    url: 'https://api.diadata.org/v1/compoundedAvg/SOFR/30/360?dateInit=2018-05-14&dateFinal=' + today,    
};

// Initial fill
getData(RateInfo.url, function(obj) {
    prefillArray = []
    for(i = 0; i < obj.length; i++) {
        var value = obj[i].Value;
        // prefillArray.push([Date.parse(obj[i].EffectiveDate), +value.toFixed(document.getElementById('rounding').value)]);
        prefillArray.push([Date.parse(obj[i].EffectiveDate), +value.toFixed(4)]);
    }
    prefillArray.sort()
    yourOwnChart.series[0].setData(prefillArray)
    // yourOwnChartSOFR.redraw();               
});
makechart(RateInfo, false);

// ------------------------------------------------------------------------------------------------
// Update upon clicking button
// ------------------------------------------------------------------------------------------------
function updateChart() {

    // Retrieve user data --------------------------------------------------------------------
    var lenPeriod = document.getElementById('lenPeriod').value;
    var dpy = document.getElementById('dpy').value;
    var symbol = document.getElementById('symbol').value;
    var rounding = document.getElementById('rounding').value;
    var dia = document.getElementById('DIA').checked;

    // update rate information ---------------------------------------------------------------     
    // retrieve first publication date
    const found = Object.values(firstPublications).find(element => element.Symbol == symbol);
    RateInfo.firstPublication = found.FirstDate.slice(0,10);
    // Increase initial date according to observation period
    dateInit = addDays(RateInfo.firstPublication, lenPeriod).slice(0,10);       
    // Check which Index should be displayed 
    if(dia) {
        RateInfo.name = symbol + lenPeriod + '_by_DIA';
        RateInfo.url = 'http://localhost:8081/v1/compoundedAvgDIA/' + symbol + '/' + lenPeriod + '/' + dpy + '?dateInit=' + dateInit + '&dateFinal=' + today;
    } else {
        RateInfo.name = symbol + lenPeriod;
        RateInfo.url = 'https://api.diadata.org/v1/compoundedAvg/' + symbol + '/' + lenPeriod + '/' + dpy + '?dateInit=' + dateInit + '&dateFinal=' + today;
    }

    // update rate information ---------------------------------------------------------------
    getData(RateInfo.url, function(obj) {

        var prefillArray = [];
        for(i = 0; i < obj.length; i++) {
            var value = obj[i].Value;
            prefillArray.push([Date.parse(obj[i].EffectiveDate), +value.toFixed(rounding)]);
            // prefillArray.push([Date.parse(obj[i].EffectiveDate), parseFloat(value.toFixed(rounding))]);
        }
        yourOwnChart.series[0].setData(prefillArray);
        yourOwnChart.hideLoading();
    });

    makechart(RateInfo, true);

};