Integration in a web page

2 minute read

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

As a working example, I will display the mean-variance minimum variance frontier1 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 :eyes:! Just check the source code of this page.

Integration of the Portfolio Optimizer API in a web page

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:

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

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


Note: The index prices come from Be sure to check this site if you are an European investor in ETFs!

Average returns and covariance matrix

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

  • The average returns of the analyzed assets
  • The covariance matrix of the analyzed assets

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

Which gives:

Mean-variance minimum variance frontier

Using the indexes average returns and covariance matrix, it is possible to draw the indexes mean-variance minimum variance frontier.

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

Which gives:

Random portfolios

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/portfolio/construction/random API endpoint.

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

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