Highcharts Demo

author(s): Torstein Hønsi

by J. Albert Bowden

HTML

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

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

JavaScript

$(function() {

  function addFilters() {
    var renderer = this.renderer,
      filter;

    filter = renderer.createElement('filter')
      .attr({
        id: 'main',
        'color-interpolation-filters': 'sRGB'
      }).add(renderer.defs);

    renderer.createElement('feGaussianBlur').attr({ in : 'SourceGraphic',
      stdDeviation: '3',
        result: 'blur',
    }).add(filter);
    renderer.createElement('feColorMatrix').attr({ in : 'blur',
      mode: 'matrix',
        result: 'cm',
        values: '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9'
    }).add(filter);

    renderer.createElement('feBlend').add(filter);
  }


  (function(H) {
    H.wrap(H.Series.prototype, 'render', function(p) {
      p.apply(this, [].slice.call(arguments, 1));
      if (this.markerGroup) {
        this.markerGroup.css({
          filter: 'url(#main)'
        });
      }
    });
  })(Highcharts)

  $('#container').highcharts({

    chart: {
      type: 'bubble',
      plotBorderWidth: 1,
      zoomType: 'xy',
      events: {
        load: function() {
          var chart = this;
          addFilters.call(chart);

          setTimeout(function() {
            chart.series[0].setData([
              [42, 38, 20],
              [6, 18, 1],
              [1, 93, 55],
              [57, 2, 90],
              [80, 76, 22],
              [11, 74, 96],
              [88, 56, 10],
              [30, 47, 49],
              [57, 62, 98],
              [4, 16, 16],
              [46, 5, 11],
              [22, 87, 89],
              [57, 91, 82],
              [45, 15, 98]
            ], true, {
            	duration: 2000
            });
          }, 1000);
        }
      }
    },

    title: {
      text: 'Highcharts bubbles with radial gradient fill'
    },

    xAxis: {
      gridLineWidth: 1
    },

    yAxis: {
      startOnTick: false,
      endOnTick: false
    },

    series: [{
      data: [
        [9, 81, 63],
        [98, 5, 89],
        [51, 50, 73],
        [41, 22,...