Examples of charts based on Fund-API data and Highcharts

Requirements

There are minimal requirements for using this charts implementation based on Highcharts.

jQuery for AJAX request to the Fund-API
Highcharts itself for the charts generation

<!-- move to closing body tag -->
<!-- use jQuery only in necessary -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Highcharts is mandatory -->
<script src="https://code.highcharts.com/10.2/highcharts.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->

It is possible to use all the scripts locally, e.g. by using Highcharts download builder.

The individual scripts for XHR/AJAX loading funds data in the examples require jQuery, so does Highcharts. You are able to use it in the way provided in the examples, load it on your own way (e.g. locally) or implement the jQuery parts in vanilla JS instead. There is a HighchartsAdapter to use Highcharts without jQuery.

The scripts for the chart generation require Highcharts, so it may be necessary to load these scripts at last or put them inline below the jQuery/Highcharts includes.

There are currently some bugs in the released version 10.3x of the JS-Library HighCharts. If you use this version, we highly suggest to use version 10.2.x and wait until the bugs are fixed. If you would like to read more about this topic see: Update Highcharts v10.3.0 some charts don't work anymore

Please note that HANSAINVEST is not responsible for third-party products and does not provide any support for them. HANSAINVEST only makes data available via this interface.

API requests

All requests to the Fund-API can be made by jQuery's AJAX functions.

jQuery for AJAX request to the Fund-API
Highcharts itself for the charts generation

// Get investment structure data for fund with ISIN DE0005321459
$.getJSON('https://api.hansainvest.com/api/v1/investment_structure-asset_structure/DE0005321459/', function (json_data) {
    // do something with var json_data
    console.log(json_data);
});

If you already use jQuery, it may be not necessary to include it a second time.

It is possible to use all the scripts locally, e.g. by using Highcharts download builder.

Chart examples

There are these basis chart examples including code generators. The width of the charts ist always the full width of the surrounding HTML element if not set explicitely to the chart container.

Optional components

Exporting of charts

Exporting of charts in different data types is possible by using the Highcharts export module