Bubble Idea - client-side summary

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function() {

  Highcharts.SVGRenderer.prototype.symbols.star = function(x, y, w, h) {
    return [
      'M', x, y + 0.4 * h,
      'L', x + 0.35 * w, y + 0.35 * h,
      'L', x + 0.5 * w, y,
      'L', x + 0.65 * w, y + 0.35 * h,
      'L', x + w, y + 0.4 * h,
      'L', x + 0.75 * w, y + 0.65 * h,
      'L', x + 0.85 * w, y + h,
      'L', x + 0.5 * w, y + 0.8 * h,
      'L', x + w * 0.15, y + h,
      'L', x + 0.25 * w, y + 0.65 * h,
      'Z'
    ];
  };

  if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.star = Highcharts.SVGRenderer.prototype.symbols.star;
  }

  // Small plugin to allow marker symbol settings to affect bubbles
  Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'translate', function(proceed) {
    var renderer = this.chart.renderer,
      symbol = this.options.marker.symbol;

    proceed.call(this);
    if (symbol && renderer.symbols[symbol]) {
      Highcharts.each(this.data, function(point) {
        point.shapeType = 'path';
        point.shapeArgs = {
          d: renderer.symbols[symbol](
            point.dlBox.x,
            point.dlBox.y,
            point.dlBox.width,
            point.dlBox.height
          ),
          r: 0
        };
      });
    }
  });

  Highcharts.chart('container', {

    chart: {
      type: 'bubble',
      plotBorderWidth: 1,
      zoomType: null
    },

    credits: {
      enabled: false
    },

    legend: {
      enabled: false
    },

    title: {
      text: ''
    },

    subtitle: {
      text: ''
    },

    xAxis: {
      min: -1,
      max: 1, // update if result is greater
      startOnTick: true,
      endOnTick: true,
      gridLineWidth: 1,
      title: {
        text: 'Concept 1 (33% of Variance)'
      },
      labels: {
        format: ''
      },

    },

    yAxis: {
      min: -1,
      max: 1, // update if result is greater
      startOnTick: false,
      endOnTick: false,
      title: {
        text: 'Concept 2 (15% of Variance)'
      },
     ...