Examples of investment structure pie charts

Chart container

The chart container is identified by the ID attribute. Be sure to use the same ID in HTML and the Highcharts script.

<div id="chartcontainer"></div>

Basic JS includes

The basic JS includes are JQuery and Highcharts.

<!-- 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 -->

Formatting

The functions getCategories and periodsFormatted are mandatory to format the API data for use in Highcharts.

// Get categories/labels from data
function getCategories(data) {
    var categories = [];
    for (index = 0; index < data.length; ++index) {
        categories.push(data[index].name);
    }

    return categories;
}

// Reformat data from JSON API structure to Highcharts
function formatData(data) {
    var formatted = [];
    for (index = 0; index < data.length; ++index) {
        var bar = [data[index].name, data[index].percent];
        formatted.push(bar);
    }

    return formatted;
}

Highcharts options

There are some base Highcharts options which have to be set (e.g. language specific).

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

AJAX request to the HI-API and instantiating of the Highcharts chart

This is the central code for generating the chart.

// Get investment strucuture data for fund with ISIN DE0008479023
$.getJSON('https://api.hansainvest.com/api/v1/investment_structure-index_structure/DE0008479023/', function (json_data) {
    
        // Generate chart
        var chartpie1 = new Highcharts.Chart(
            {
                "title": {
                    "text": json_data.fund.name + ' – '
                    + json_data.fund.isin + ' – '
                    + json_data.structure.type,
                },
                "chart": {
                    "renderTo": "chartcontainer",
                    "type": "pie",
                    "backgroundColor": "#ffffff"
                },
                "legend": {
                    "enabled": true,
                    "adjustLegend": true,
                    "itemDistance": 20,
                    "layout": "vertical",
                    "align": "right",
                    "verticalAlign": "top",
                    "x": 15,
                    "y": 15,
                    "labelFormat": "{name} ({y:.1f} %)"
                },
                "credits": {
                    "enabled": false
                },
                "plotOptions": {
                    "pie": {
                        "allowPointSelect": true,
                        "cursor": "pointer",
                        "showInLegend": true,
                        "startAngle": 90,
                        "dataLabels": {
                            "enabled": true,
                            "align": "right",
                            "distance": 30,
                            "connectorShape": 'straight',
                            "format": "{point.y:.1f} %",
                            "color": "#000000",
                            "connectorColor": "#000000",
                            "style": {
                                "fontSize": "13px",
                                "fontWeight": "bold",
                                "textShadow": "none"
                            }
                        },
                        "colors": ["#466e8c", "#648caa",
                            "#7b9db7", "#92aec4",
                            "#aac0d0", "#c1d1dd",
                            "#6e0532", "#8c2350",
                            "#9d446a", "#ae6585",
                            "#c0869f", "#d1a7b9"]
                    }
                },
                "exporting": {
                    "chartOptions": {
                        "title": {
                            "text": json_data.fund.name
                            + " "
                            + json_data.structure.type
                        }
                    },
                    "filename": json_data.fund.isin
                    + "_-_"
                    + json_data.structure.type
                },
                "series": [{
                    "name": json_data.structure.type,
                    "colorByPoint": true,
                    "data": formatData(json_data.structure.data)
                }],
                "xAxis": {
                    "categories": getCategories(json_data.structure.data)
                }
            });
    
    });

Optional parts

Exporting

The basic JS includes including the Highcharts exporting plugin

<!-- 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 -->

Resizing

Resizing of the chart if the viewport or the visibility of the chart changes.

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

Pie chart

<div id="chart-pie-1"></div>

<!-- 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>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/modules/exporting.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->
function getCategories(data) {
    var categories = [];
    for (index = 0; index < data.length; ++index) {
        categories.push(data[index].name);
    }

    return categories;
}

function formatData(data) {
    var formatted = [];
    for (index = 0; index < data.length; ++index) {
        var bar = [data[index].name, data[index].percent];
        formatted.push(bar);
    }

    return formatted;
}

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

// Get investment strucuture data for fund with ISIN DE0008479023
$.getJSON('https://api.hansainvest.com/api/v1/investment_structure-index_structure/DE0008479023/', function (json_data) {

    // Generate chart
    var chartpie1 = new Highcharts.Chart(
        {
            "title": {
                "text": json_data.fund.name + ' – '
                + json_data.fund.isin + ' – '
                + json_data.structure.type,
            },
            "chart": {
                "renderTo": "chart-pie-1",
                "type": "pie",
                "backgroundColor": "#ffffff"
            },
            "legend": {
                "enabled": true,
                "adjustLegend": true,
                "itemDistance": 20,
                "layout": "vertical",
                "align": "right",
                "verticalAlign": "top",
                "x": 15,
                "y": 15,
                "labelFormat": "{name} ({y:.1f} %)"
            },
            "credits": {
                "enabled": false
            },
            "plotOptions": {
                "pie": {
                    "allowPointSelect": true,
                    "cursor": "pointer",
                    "showInLegend": true,
                    "startAngle": 90,
                    "dataLabels": {
                        "enabled": true,
                        "align": "right",
                        "distance": 30,
                        "connectorShape": 'straight',
                        "format": "{point.y:.1f} %",
                        "color": "#000000",
                        "connectorColor": "#000000",
                        "style": {
                            "fontSize": "13px",
                            "fontWeight": "bold",
                            "textShadow": "none"
                        }
                    },
                    "colors": ["#466e8c", "#648caa",
                        "#7b9db7", "#92aec4",
                        "#aac0d0", "#c1d1dd",
                        "#6e0532", "#8c2350",
                        "#9d446a", "#ae6585",
                        "#c0869f", "#d1a7b9"]
                }
            },
            "exporting": {
                "chartOptions": {
                    "title": {
                        "text": json_data.fund.name
                        + " "
                        + json_data.structure.type
                    }
                },
                "filename": json_data.fund.isin
                + "_-_"
                + json_data.structure.type
            },
            "series": [{
                "name": json_data.structure.type,
                "colorByPoint": true,
                "data": formatData(json_data.structure.data)
            }],
            "xAxis": {
                "categories": getCategories(json_data.structure.data)
            }
        });

});

Pie chart - different colors

<div id="chart-pie-2"></div>

<!-- 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>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/modules/exporting.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->
function getCategories(data) {
    var categories = [];
    for (index = 0; index < data.length; ++index) {
        categories.push(data[index].name);
    }

    return categories;
}

function formatData(data) {
    var formatted = [];
    for (index = 0; index < data.length; ++index) {
        var bar = [data[index].name, data[index].percent];
        formatted.push(bar);
    }

    return formatted;
}

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {
        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'
    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

// Get investment strucuture data for fund with ISIN DE0009766212
$.getJSON('https://api.hansainvest.com/api/v1/investment_structure-countries/DE0009766212/', function (json_data) {

    // Generate chart
    var chartpie2 = new Highcharts.Chart({
        "title": {
            "text": json_data.fund.name + ' – '
            + json_data.fund.isin + ' – '
            + json_data.structure.type,
        },
        "chart": {
            "renderTo": "chart-pie-2",
            "type": "pie",
            "backgroundColor": "#ffffff"
        },
        "legend": {
            "enabled": true,
            "adjustLegend": true,
            "itemDistance": 20,
            "layout": "vertical",
            "align": "right",
            "verticalAlign": "top",
            "x": 15,
            "y": 15,
            "labelFormat": "{name} ({y:.1f} %)"
        },
        "credits": {
            "enabled": false
        },
        "plotOptions": {
            "pie": {
                "allowPointSelect": true,
                "cursor": "pointer",
                "showInLegend": true,
                "startAngle": 90,
                "dataLabels": {
                    "enabled": true,
                    "align": "right",
                    "distance": 30,
                    "connectorShape": 'straight',
                    "format": "{point.y:.1f} %",
                    "color": "#666",
                    "connectorColor": "#666",
                    "style": {
                        "fontSize": "13px",
                        "fontWeight": "bold",
                        "textShadow": "none"
                    }
                },
                "colors": ["#5AD", "#C21515",
                    "#7A2D15", "#0D355A",
                    "#59A27A", "#7E7E215",
                    "#FA5732", "#60D",
                    "#6A5", "#C00C00",
                    "#1A5E25", "#5EABED"]
            }
        },
        "exporting": {
            "chartOptions": {
                "title": {
                    "text": json_data.fund.name
                    + " "
                    + json_data.structure.type
                }
            },
            "filename": json_data.fund.isin
            + "_-_"
            + json_data.structure.type
        },
        "series": [{
            "name": json_data.structure.type,
            "colorByPoint": true,
            "data": formatData(json_data.structure.data)
        }],
        "xAxis": {
            "categories": getCategories(json_data.structure.data)
        }
    });

});

Pie chart - generate code for custom colors

<div id="chart-pie-cg"></div>

<!-- 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>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/modules/exporting.js" crossorigin="anonymous"></script>

<!-- place the individual Highcharts code below as inline script or include -->
function getCategories(data) {
    var categories = [];
    for (index = 0; index < data.length; ++index) {
        categories.push(data[index].name);
    }

    return categories;
}

function formatData(data) {
    var formatted = [];
    for (index = 0; index < data.length; ++index) {
        var bar = [data[index].name, data[index].percent];
        formatted.push(bar);
    }

    return formatted;
}

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null)
            && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(
                function () { // for only visible charts container in the curent context
                    $container = $(this); // context container
                    $container.find('div[id^="chart-"]').each(
                        function () { // for only chart
                            $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                            $chart.setSize($container.width(),
                                $chart.chartHeight,
                                doAnimation = true); // adjust chart size with animation transition
                        });
                });
        } else {
            chart.setSize($('.chart-container:visible').width(),
                chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

$(function (H) {

    $(window).resize(function () {
        if (this.resizeTO)
            clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));
        }, 500);
    });

});

// Global options
Highcharts.setOptions({
    global: {
        timezoneOffset: 0 * 60
    },
    lang: {

        months: ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni",
            "Juli", "August", "September", "Oktober", "November",
            "Dezember"],
        shortMonths: ["Jan", "Feb", "M\u00e4r", "Apr", "Mai", "Jun",
            "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        weekdays: ["Sonntag", "Montag", "Dienstag", "Mittwoch",
            "Donnerstag", "Freitag", "Samstag"],
        rangeSelectorZoom: '',
        rangeSelectorFrom: 'Von',
        rangeSelectorTo: 'Bis',
        thousandsSep: '.',
        decimalPoint: ',',
        downloadJPEG: 'als JPG herunterladen',
        downloadPDF: 'als PDF herunterladen',
        downloadPNG: 'als PNG herunterladen',
        downloadSVG: 'als SVG herunterladen',
        printChart: 'Chart drucken'

    },
    title: {
        style: {
            color: '#648caa'
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                symbolStroke: '#648caa',
                symbolFill: '#fff',
                theme: {
                    'stroke-width': 1,
                    r: 0,
                    states: {
                        hover: {
                            fill: '#fff',
                            stroke: '#648caa'
                        },
                        select: {
                            fill: '#fff'
                        }
                    }
                }
            }
        },
        scale: 2,
        chartOptions: {
            events: {
                load: function () {
                    this.legend.render();
                }
            },
            rangeSelector: {
                buttons: []
            }
        }
    }
});

// Get investment strucuture data for fund with ISIN DE0008479023
$.getJSON('https://api.hansainvest.com/api/v1/investment_structure-countries/DE0009766212/', function (json_data) {

    // Generate chart
    var chartpiecg = new Highcharts.Chart(
        {
            "title": {
                "text": json_data.fund.name + ' – '
                + json_data.fund.isin + ' – '
                + json_data.structure.type,
            },
            "chart": {
                "renderTo": "chart-pie-cg",
                "type": "pie",
                "backgroundColor": "#ffffff"
            },
            "legend": {
                "enabled": true,
                "adjustLegend": true,
                "itemDistance": 20,
                "layout": "vertical",
                "align": "right",
                "verticalAlign": "top",
                "x": 15,
                "y": 15,
                "labelFormat": "{name} ({y:.1f} %)"
            },
            "credits": {
                "enabled": false
            },
            "plotOptions": {
                "pie": {
                    "allowPointSelect": true,
                    "cursor": "pointer",
                    "showInLegend": true,
                    "startAngle": 90,
                    "dataLabels": {
                        "enabled": true,
                        "align": "right",
                        "distance": 30,
                        "connectorShape": 'straight',
                        "format": "{point.y:.1f} %",
                        "color": "",
                        "connectorColor": "",
                        "style": {
                            "fontSize": "13px",
                            "fontWeight": "bold",
                            "textShadow": "none"
                        }
                    },
                    "colors": ["", "",
                        "", "",
                        "", "",
                        "", "",
                        "", "",
                        "", ""]
                }
            },
            "exporting": {
                "chartOptions": {
                    "title": {
                        "text": json_data.fund.name
                        + " "
                        + json_data.structure.type
                    }
                },
                "filename": json_data.fund.isin
                + "_-_"
                + json_data.structure.type
            },
            "series": [{
                "name": json_data.structure.type,
                "colorByPoint": true,
                "data": formatData(json_data.structure.data)
            }],
            "xAxis": {
                "categories": getCategories(json_data.structure.data)
            }
        });

});