Examples of charts based on HI-API data and Highcharts

Requirements

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

  • jQuery for AJAX request to the HI-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/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.

API requests

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

  • jQuery for AJAX request to the HI-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

<!-- move to closing body tag -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/modules/exporting.js" crossorigin="anonymous"></script>

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

External documentation