html,

body,

#container {

  width: 95%;

  height: 95%;

  margin: 0;

  padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

//create data for Summary

var summData1 = [

  {x: "Alignment", value: 4.8},

  {x: "Costs", value: 4.4},

  {x: "Efficiency", value: 4.5},

  {x: "Overall", value: 4.6},

];

​

var summData2 = [

  {x: "Alignment", value: 4.3},

  {x: "Costs", value: 3.3},

  {x: "Efficiency", value: 4.6},

  {x: "Overall", value: 4.2},

];

​

var summData3 = [

  {x: "Alignment", value: 4.2},

  {x: "Costs", value: 2.9},

  {x: "Efficiency", value: 4.3},

  {x: "Overall", value: 4.0},

];

​

//create data for Cost

var costData1 = [

  {x: "Aggregate costs", value: 4.3},

  {x: "-", value: 0},

  {x: "Cost structure and transparency", value: 4.4},

  {x: "~", value: 0},

];

​

var costData2 = [

  {x: "Aggregate costs", value: 2.8},

  {x: "-", value: 0},

  {x: "Cost structure and transparency", value: 3.7},

  {x: "~", value: 0},

];

​

var costData3 = [

  {x: "Aggregate costs", value: 2.8},

  {x: "-", value: 0},

  {x: "Cost structure and transparency", value: 3},

  {x: "~", value: 0},

];

​

//create data for Efficiency

var effData1 = [

  {x: "AO organisational effectiveness", value: 5.1},

  {x: "AM organisational effectiveness", value: 5.4},

  {x: "Long-term effectiveness/sustainability", value: 3.7},

  {x: "Value chain effectiveness", value: 3.7},

  {x: "Effective regulation", value: 4.4},

];

​

var effData2 = [

  {x: "AO organisational effectiveness", value: 4.4},

  {x: "AM organisational effectiveness", value: 5.8},

  {x: "Long-term effectiveness/sustainability", value: 3.9},

  {x: "Value chain effectiveness", value: 3.8},

  {x: "Effective regulation", value: 5},

];

​

var effData3 = [

  {x: "AO organisational effectiveness", value: 3.9},

  {x: "AM organisational effectiveness", value: 5.8},

  {x: "Long-term effectiveness/sustainability", value: 3.8},

  {x: "Value chain effectiveness", value: 3.5},

  {x: "Effective regulation", value: 4.4},

];

​

//create data for Alignment

var alignData1 = [

    { x: 'Trust measures', value: 5.2},

    { x: 'Transparency', value: 5},

    { x: 'Ethical condition', value: 5.6},

    { x: 'Incentives structure', value: 4.4},

    { x: 'Culture', value: 4.9},

    { x: 'Society', value: 3.9}

  ];

​

var alignData2 = [

    { x: 'Trust measures', value: 4},

    { x: 'Transparency', value: 4.3},

    { x: 'Ethical condition', value: 5.2},

    { x: 'Incentives structure', value: 3.7},

    { x: 'Culture', value: 4.6},

    { x: 'Society', value: 3.9}

  ];

​

var alignData3 = [

    { x: 'Trust measures', value: 4.4},

    { x: 'Transparency', value: 4.2},

    { x: 'Ethical condition', value: 5},

    { x: 'Incentives structure', value: 3.5},

    { x: 'Culture', value: 4},

    { x: 'Society', value: 0}

  ];

​

anychart.onDocumentReady(function () {

  // create polar chart

  var chart = anychart.polar();

​

  var columnSeries1 = chart.column(alignData1);

    // set series name

  columnSeries1.name('2023');

  var columnSeries2 = chart.column(alignData2);

  // set series name

  columnSeries2.name('2018');

  var columnSeries3 = chart.column(alignData3);

  // set series name

  columnSeries3.name('2015');

  // adjust chart settings

  var title = chart.title();

  // enable title

  title.enabled(true);

  // set padding

  title.padding(5);

  // set title text

  title.text("Investment industry scorecard 2023-2015");

  title.fontSize(20).fontColor('black');

  // settings for title background

  var titleBackground = chart.title().background();

  // enable background

  titleBackground.enabled(true);

  // set background inner color

  titleBackground.fill("#FFD700");

  // set background border

  titleBackground.stroke("#D8D8D8");

  // set type of background corners

  titleBackground.cornerType("round");

  // set corners size

  titleBackground.corners(10);

​

  // enable sorting points by x

  chart.sortPointsByX(true);

  // disable y-axis

  chart.yAxis(false);

​

  // set value prefix for tooltip

  chart.tooltip().valuePrefix('Score:');

​

  // set x-scale

  chart.xScale('ordinal');

​

  // set chart container id

  chart.container('container');

  // create the legend

  chart.legend().enabled(true).itemsLayout('vertical').position('right').fontColor('black');

  // configure the chart labels

  var labels = chart.xAxis().labels();

  labels.fontSize(20)

    .fontColor('black');

    // customize the series color

  columnSeries1.color('#83B8AE');

  columnSeries2.color('#DC911B');

  columnSeries3.color('#DDD65A');

  chart.padding(50, 0, 0, 0);

​

  // initiate chart drawing

  chart.draw();

  //function for switching to "Industry summary"

  var summary = function(){

    columnSeries1.data(summData1);

    columnSeries2.data(summData2);

    columnSeries3.data(summData3);

  }

  //function for switching to "Alignment"

  var alignment = function(){

    columnSeries1.data(alignData1);

    columnSeries2.data(alignData2);

    columnSeries3.data(alignData3);

  }

    //function for switching to "Cost"

  var cost = function(){

    columnSeries1.data(costData1);

    columnSeries2.data(costData2);

    columnSeries3.data(costData3);

  }

      //function for switching to "Efficiency"

  var efficiency = function(){

    columnSeries1.data(effData1);

    columnSeries2.data(effData2);

    columnSeries3.data(effData3);

  }

  //register a click on an button and fire according function

  document.getElementById("overall").addEventListener("click", summary);

  document.getElementById("alignment").addEventListener("click", alignment);

  document.getElementById("cost").addEventListener("click", cost)

  document.getElementById("efficiency").addEventListener("click", efficiency)

});

​

​