Highcharts Demo

author(s): Torstein Hønsi

by wergeld

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500"></div>

JavaScript

var options = {
  chart: {
    type: 'pie',
    renderTo: 'container',
    width: null,
    height: 800,
    events: {
      load: function() {
        var chart = this;
        var currWidth = chart.chartWidth;
        var currHeight = chart.chartHeight;
        var seriesList = chart.series;
        var seriesCount = seriesList.length;
        var piesize = CalcSize(currWidth, currHeight, seriesCount);
        var numCols;
        var numRows;
        var locArray = [];

        if (seriesCount == 6) {
          numCols = 2;
          numRows = 3;
          for (nR = 0; nR < numRows; nR++) {
            for (nC = 0; nC < numCols; nC++) {
              if (locArray.length <= seriesCount - 1) {
                locArray.push([((piesize / 2) + (piesize * nC)) + 60, (piesize / 2) + (piesize * nR)])
              }
            }
          }
        } else {
          numCols = currWidth / piesize;
          numRows = Math.floor(currHeight / piesize);
          for (nR = 0; nR < numRows; nR++) {
            for (nC = 0; nC < numCols; nC++) {
              if (locArray.length <= seriesCount - 1) {
                locArray.push([(piesize / 2) + (piesize * nC), ((piesize / 2) + (piesize * nR)) - 75])
              }
            }
          }
        }

        locArray.sort();

        $(seriesList).each(function(j) {
          seriesList[j].update({
            size: piesize,
            center: locArray[j]
          })
        });

        //console.log(currWidth);
        //console.log(currHeight);
        //console.log(seriesCount);
        //console.log(piesize);
        //console.log(numCols);
        //console.log(numRows);
        //console.log(locArray);
        //console.log(seriesList);
      },
      resize: function() {
        var chart = this;
        $(seriesList).each(function(j) {
          seriesList[j].update({
            center: [chart.series[0].data[1].plotX - 20, chart.series[0].data[1].plotY - 65]
          })
        });
      }
    }
  },
 ...