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/10.2/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 Fund-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/?language=en', 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/10.2/highcharts.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/10.2/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/10.2/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/10.2/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/?language=de', 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/10.2/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/10.2/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/?language=de', 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/10.2/highcharts.js" crossorigin="anonymous"></script>
<!-- use Highcharts exporting plugin only in necessary -->
<script src="https://code.highcharts.com/10.2/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/?language=de', 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)
}
});
});