Integration in a Web Page

1 minute read

In this post, I will show how to integrate the Portfolio Optimizer Web API in a web page.

As a working example, I will display the mean-variance minimum variance frontier¹ of 4 indexes.

In addition, I will also display the returns and the volatilities of portfolios made of random weights, to allow a visual comparison between mean-variance return-efficient portfolios and random portfolios.

Note: A fully functional web page corresponding to this post is available … right before your eyes ! Just check the source code of this page.

Integration of the Portfolio Optimizer API in a web pagePermalink

Cross-origin requests are supported by the Portfolio Optimizer API.

This allows to easily integrate Portfolio Optimizer in a web page through the browsers native JavaScript XMLHttpRequest objects, or through any JavaScript library offering AJAX capabilities, like jQuery.

As an example, the following native JavaScript function calls the Arithmetic Returns API endpoint, like it is done in the web page you are currently viewing:

	function arithmeticReturns(assetsPrices) {
	var xhr = new XMLHttpRequest();
	var url = "https://api.portfoliooptimizer.io/v1/assets/returns";
	xhr.open("POST", url, true);
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.onreadystatechange = function () {
	if (this.readyState === XMLHttpRequest.DONE) {
	// Status 200 == all good
	if (this.status === 200) {
	// Parse the response as JSON
	var json = JSON.parse(xhr.responseText);

	// Decode the assets returns, c.f. the documentation
	// at https://docs.portfoliooptimizer.io/
	var assets = json.assets;

	// Do whatever is needed with the assets returns
	//
	}
	// Status 429 == there are too many requests in parallel
	//
	// Waiting 1s before sending the same XHR query again is required with
	// the free usage of Portfolio Optimizer
	else if (this.status === 429) {
	setTimeout(function(){ arithmeticReturns(assetsPrices) }, 1000); ;
	}
	}
	};
	var data = JSON.stringify({"assets": assetsPrices.length,
	"assetsPrices":assetsPrices});
	xhr.send(data);
	}

view raw arithmetic_returns_from_webpage.js hosted with ❤ by GitHub

Example of integration: displaying the mean-variance minimum variance frontierPermalink

I will use Portfolio Optimizer to display the mean-variance minimum variance frontier of the following 4 indexes:

ICE US Treasury Short Bond
ICE US Treasury 20+ Year Bond
S&P 500
Gold spot price

PricesPermalink

Note: The index prices come from https://backtest.curvo.eu/. Be sure to check this site if you are an European investor in ETFs!

Average returns and covariance matrixPermalink

One of the first step in an historical mean-variance analysis is to compute:

The historical mean arithmetic returns of the analyzed assets
The historical covariance matrix of the analyzed assets

With Portfolio Optimizer, this is done thanks to the following API endpoints:

/v1/assets/returns, to compute the assets arithmetic returns from the assets prices
/v1/assets/returns/mean, to compute the assets arithmetic mean returns from the assets arithmetic returns
/v1/assets/covariance/matrix/estimation/empirical, to compute the (empirical) covariance matrix of the assets arithmetic returns

Which gives:

Mean-variance minimum variance frontierPermalink

Thanks to the computed average arithmetic returns and covariance matrix, it is possible to plot the mean-variance minimum variance frontier of the analyzed assets.

With Portfolio Optimizer, this is done thanks to the /v1/portfolio/analysis/mean-variance/minimum-variance-frontier API endpoint.

Which gives:

Random portfoliosPermalink

With Portfolio Optimizer, it is also possible to simulate random portfolios, which are portfolios made of random assets weights.

This is done thanks to the /v1/portfolios/simulation/random API endpoint.

Which gives, on the same graph as the mean-variance minimum variance frontier:

The mean-variance minimum variance frontier is the set of portfolios in the (V,E) plane with the lowest volatility for any given return. ↩