fclaeys/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="chartjs and angular-chart.js pattern tests">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="app" ng-controller="BubbleCtrl">
<canvas id="base" class="chart-bubble" chart-data="data"
  chart-series="series" chart-dataset-override="over">
</canvas>

<canvas id="bubble2" class="chart-bubble">
</canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/1.0.3/angular-chart.js"></script>
<script id="jsbin-javascript">
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.pattern = global.pattern || {})));
}(this, function (exports) { 'use strict';

  function generateShape(size) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.width = size;
    canvas.height = size;

    return {
      canvas: canvas,
      context: context
    };
  }

  function square(width) {
    var shape = generateShape(width);
    var height = width;

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.4)';
    shape.context.fillRect(0, 0, width / 2, height / 2);
    shape.context.fillRect(width / 2, height / 2, width / 2, height / 2);

    return shape.canvas;
  }

  function circle(diameter) {
    var shape = generateShape(diameter);
    var radius = diameter / 2;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.4)';

    shape.context.arc(radius / 2, radius / 2, radius / 2, 0, 2 * Math.PI);
    shape.context.arc(radius * 1.5, radius * 1.5, radius / 2, 0, 2 * Math.PI);
    shape.context.fill();

    return shape.canvas;
  }

  function diamond(width) {
    var shape = generateShape(width);
    var canvasWidth = shape.canvas.width;
    var canvasHeight = shape.canvas.height;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(canvasWidth / 4, 0);
    shape.context.lineTo(canvasWidth / 2, canvasHeight / 4);
    shape.context.lineTo(canvasWidth / 4, canvasHeight / 2);
    shape.context.lineTo(0, canvasHeight / 4);
    shape.context.lineTo(canvasWidth / 4, 0);

    shape.context.moveTo(canvasWidth * 0.75, 0);
    shape.context.lineTo(canvasWidth, canvasHeight / 4);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight / 2);
    shape.context.lineTo(canvasWidth / 2, canvasHeight / 4);
    shape.context.lineTo(canvasWidth * 0.75, 0);

    shape.context.moveTo(canvasWidth / 4, canvasHeight / 2);
    shape.context.lineTo(canvasWidth / 2, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth / 4, canvasHeight);
    shape.context.lineTo(0, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth / 4, canvasHeight / 2);

    shape.context.moveTo(canvasWidth * 0.75, canvasHeight / 2);
    shape.context.lineTo(canvasWidth, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight);
    shape.context.lineTo(canvasWidth / 2, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight / 2);

    shape.context.fill();

    return shape.canvas;
  }

  function lineHorizontal(width) {
    var thickness = width / 4;
    var shape = generateShape(width);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
    shape.context.fillRect(0, 0, width, thickness);
    shape.context.fillRect(0, thickness * 2, width, thickness);

    return shape.canvas;
  }

  function lineVertical(width) {
    var thickness = width / 4;
    var shape = generateShape(width);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
    shape.context.fillRect(0, 0, thickness, width);
    shape.context.fillRect(thickness * 2, 0, thickness, width);

    return shape.canvas;
  }

  function lineDiagonalLeftToRight(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(thickness, -thickness);
    shape.context.lineTo(width + thickness, height - thickness);
    shape.context.stroke();

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(-thickness, thickness);
    shape.context.lineTo(width - thickness, height + thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function lineDiagonalRightToLeft(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(width + thickness, thickness);
    shape.context.lineTo(thickness, height + thickness);
    shape.context.stroke();

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(width - thickness, -thickness);
    shape.context.lineTo(-thickness, height - thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function triangle(size) {
    var shape = generateShape(size);
    size = size / 2;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(size / 2, 0);
    shape.context.lineTo(size, size);
    shape.context.lineTo(0, size);
    shape.context.lineTo(size / 2, 0);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, 0);
    shape.context.lineTo(size * 2, size);
    shape.context.lineTo(size, size);

    shape.context.moveTo(size * 2, size);
    shape.context.lineTo(size * 2, size * 2);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size * 2, size);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(size, size);

    shape.context.moveTo(0, size);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(0, size * 2);
    shape.context.lineTo(0, size);

    shape.context.fill();

    return shape.canvas;
  }

  function triangleInverted(size) {
    var shape = generateShape(size);
    size = size / 2;

    shape.context.beginPath();
    shape.context.translate(size * 2, size * 2);
    shape.context.rotate(3.14);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(size / 2, 0);
    shape.context.lineTo(size, size);
    shape.context.lineTo(0, size);
    shape.context.lineTo(size / 2, 0);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, 0);
    shape.context.lineTo(size * 2, size);
    shape.context.lineTo(size, size);

    shape.context.moveTo(size * 2, size);
    shape.context.lineTo(size * 2, size * 2);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size * 2, size);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(size, size);

    shape.context.moveTo(0, size);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(0, size * 2);
    shape.context.lineTo(0, size);

    shape.context.fill();

    return shape.canvas;
  }

  function zigzagVertical(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(thickness, -thickness);
    shape.context.lineTo(width - thickness, height / 2);
    shape.context.lineTo(thickness, height + thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function zigzagHorizontal(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(-thickness, thickness);
    shape.context.lineTo(width / 2, height - thickness);
    shape.context.lineTo(width + thickness, thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  var shapes = {
    'square': square,
    'circle': circle,
    'diamond': diamond,
    'triangle': triangle,
    'triangle-inverted': triangleInverted,
    'line-horizontal': lineHorizontal,
    'line-vertical': lineVertical,
    'line-diagonal-lr': lineDiagonalLeftToRight,
    'line-diagonal-rl': lineDiagonalRightToLeft,
    'zigzag-vertical': zigzagHorizontal,
    'zigzag-horizontal': zigzagVertical
  };

  function draw() {
    var shapeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'square';
    var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'rgba(100, 100, 100, 0.7)';
    var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(255, 255, 255, 0.7)';
    var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;

    var outerSize = size * 2;
    var patternCanvas = document.createElement('canvas');
    var patternContext = patternCanvas.getContext('2d');
    var shape = shapes[shapeType];
    var pattern = void 0,
        patternFill = void 0;

    patternCanvas.width = outerSize;
    patternCanvas.height = outerSize;

    patternContext.fillStyle = backgroundColor;
    patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);

    pattern = patternContext.createPattern(shape.call(shape, size), 'repeat');
    patternContext.fillStyle = pattern;
    patternContext.fillRect(0, 0, outerSize, outerSize);

    patternFill = patternContext.createPattern(patternCanvas, 'repeat');
    patternFill.shapeType = shapeType;

    return patternFill;
  }

  function generate(colorList) {
    var previousShapeType = null;

    return colorList.map(function (color) {
      var shapeType = getRandomShape(previousShapeType);
      previousShapeType = shapeType;

      return draw(shapeType, color);
    });
  }

  function getRandomShape(excludedShapeType) {
    var shapesList = Object.keys(shapes);

    if (excludedShapeType !== null) {
      shapesList.splice(shapesList.indexOf(excludedShapeType), 1);
    }

    var randomIndex = Math.floor(Math.random() * shapesList.length);

    return shapesList[randomIndex];
  }

  exports.draw = draw;
  exports.generate = generate;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

angular.module("app", ["chart.js"]).controller("BubbleCtrl",
  function ($scope) {
    // see examples/bubble.js for random bubbles source code
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [{
        x: 40,
        y: 10,
        r: 20
      }],
      [{
        x: 10,
        y: 40,
        r: 50
      }]
    ];

   $scope.over = [
     {borderWidth: 3,
       hoverBackgroundColor: 'rgba(255,99,132,0.4)',
       hoverBorderColor: 'rgba(255,99,132,1)',
       backgroundColor: pattern.draw('circle', '#36a2eb')
     },
   {borderWidth: 5,
       hoverBackgroundColor: 'rgba(255,99,132,0.4)',
       hoverBorderColor: 'rgba(255,99,132,1)',
       backgroundColor: pattern.draw('circle', '#36a2eb')
     }]
});

var ctx = document.getElementById("bubble2").getContext("2d");
var chartData = {
    datasets: [{
        data: [
                {
                    x: 20,
                    y: 30,
                    r: 15
                },
                {
                    x: 40,
                    y: 10,
                    r: 10
                }
            ],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: chartData,
    options: {
        elements: {
            points: {
                borderWidth: 1,
                borderColor: 'rgb(0, 0, 0)'
            }
        }
    }
});

console.log(pattern.draw('circle', '#36a2eb'));
</script>


<script id="jsbin-source-javascript" type="text/javascript">(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.pattern = global.pattern || {})));
}(this, function (exports) { 'use strict';

  function generateShape(size) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.width = size;
    canvas.height = size;

    return {
      canvas: canvas,
      context: context
    };
  }

  function square(width) {
    var shape = generateShape(width);
    var height = width;

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.4)';
    shape.context.fillRect(0, 0, width / 2, height / 2);
    shape.context.fillRect(width / 2, height / 2, width / 2, height / 2);

    return shape.canvas;
  }

  function circle(diameter) {
    var shape = generateShape(diameter);
    var radius = diameter / 2;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.4)';

    shape.context.arc(radius / 2, radius / 2, radius / 2, 0, 2 * Math.PI);
    shape.context.arc(radius * 1.5, radius * 1.5, radius / 2, 0, 2 * Math.PI);
    shape.context.fill();

    return shape.canvas;
  }

  function diamond(width) {
    var shape = generateShape(width);
    var canvasWidth = shape.canvas.width;
    var canvasHeight = shape.canvas.height;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(canvasWidth / 4, 0);
    shape.context.lineTo(canvasWidth / 2, canvasHeight / 4);
    shape.context.lineTo(canvasWidth / 4, canvasHeight / 2);
    shape.context.lineTo(0, canvasHeight / 4);
    shape.context.lineTo(canvasWidth / 4, 0);

    shape.context.moveTo(canvasWidth * 0.75, 0);
    shape.context.lineTo(canvasWidth, canvasHeight / 4);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight / 2);
    shape.context.lineTo(canvasWidth / 2, canvasHeight / 4);
    shape.context.lineTo(canvasWidth * 0.75, 0);

    shape.context.moveTo(canvasWidth / 4, canvasHeight / 2);
    shape.context.lineTo(canvasWidth / 2, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth / 4, canvasHeight);
    shape.context.lineTo(0, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth / 4, canvasHeight / 2);

    shape.context.moveTo(canvasWidth * 0.75, canvasHeight / 2);
    shape.context.lineTo(canvasWidth, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight);
    shape.context.lineTo(canvasWidth / 2, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight / 2);

    shape.context.fill();

    return shape.canvas;
  }

  function lineHorizontal(width) {
    var thickness = width / 4;
    var shape = generateShape(width);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
    shape.context.fillRect(0, 0, width, thickness);
    shape.context.fillRect(0, thickness * 2, width, thickness);

    return shape.canvas;
  }

  function lineVertical(width) {
    var thickness = width / 4;
    var shape = generateShape(width);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
    shape.context.fillRect(0, 0, thickness, width);
    shape.context.fillRect(thickness * 2, 0, thickness, width);

    return shape.canvas;
  }

  function lineDiagonalLeftToRight(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(thickness, -thickness);
    shape.context.lineTo(width + thickness, height - thickness);
    shape.context.stroke();

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(-thickness, thickness);
    shape.context.lineTo(width - thickness, height + thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function lineDiagonalRightToLeft(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(width + thickness, thickness);
    shape.context.lineTo(thickness, height + thickness);
    shape.context.stroke();

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(width - thickness, -thickness);
    shape.context.lineTo(-thickness, height - thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function triangle(size) {
    var shape = generateShape(size);
    size = size / 2;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(size / 2, 0);
    shape.context.lineTo(size, size);
    shape.context.lineTo(0, size);
    shape.context.lineTo(size / 2, 0);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, 0);
    shape.context.lineTo(size * 2, size);
    shape.context.lineTo(size, size);

    shape.context.moveTo(size * 2, size);
    shape.context.lineTo(size * 2, size * 2);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size * 2, size);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(size, size);

    shape.context.moveTo(0, size);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(0, size * 2);
    shape.context.lineTo(0, size);

    shape.context.fill();

    return shape.canvas;
  }

  function triangleInverted(size) {
    var shape = generateShape(size);
    size = size / 2;

    shape.context.beginPath();
    shape.context.translate(size * 2, size * 2);
    shape.context.rotate(3.14);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(size / 2, 0);
    shape.context.lineTo(size, size);
    shape.context.lineTo(0, size);
    shape.context.lineTo(size / 2, 0);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, 0);
    shape.context.lineTo(size * 2, size);
    shape.context.lineTo(size, size);

    shape.context.moveTo(size * 2, size);
    shape.context.lineTo(size * 2, size * 2);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size * 2, size);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(size, size);

    shape.context.moveTo(0, size);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(0, size * 2);
    shape.context.lineTo(0, size);

    shape.context.fill();

    return shape.canvas;
  }

  function zigzagVertical(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(thickness, -thickness);
    shape.context.lineTo(width - thickness, height / 2);
    shape.context.lineTo(thickness, height + thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function zigzagHorizontal(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(-thickness, thickness);
    shape.context.lineTo(width / 2, height - thickness);
    shape.context.lineTo(width + thickness, thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  var shapes = {
    'square': square,
    'circle': circle,
    'diamond': diamond,
    'triangle': triangle,
    'triangle-inverted': triangleInverted,
    'line-horizontal': lineHorizontal,
    'line-vertical': lineVertical,
    'line-diagonal-lr': lineDiagonalLeftToRight,
    'line-diagonal-rl': lineDiagonalRightToLeft,
    'zigzag-vertical': zigzagHorizontal,
    'zigzag-horizontal': zigzagVertical
  };

  function draw() {
    var shapeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'square';
    var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'rgba(100, 100, 100, 0.7)';
    var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(255, 255, 255, 0.7)';
    var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;

    var outerSize = size * 2;
    var patternCanvas = document.createElement('canvas');
    var patternContext = patternCanvas.getContext('2d');
    var shape = shapes[shapeType];
    var pattern = void 0,
        patternFill = void 0;

    patternCanvas.width = outerSize;
    patternCanvas.height = outerSize;

    patternContext.fillStyle = backgroundColor;
    patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);

    pattern = patternContext.createPattern(shape.call(shape, size), 'repeat');
    patternContext.fillStyle = pattern;
    patternContext.fillRect(0, 0, outerSize, outerSize);

    patternFill = patternContext.createPattern(patternCanvas, 'repeat');
    patternFill.shapeType = shapeType;

    return patternFill;
  }

  function generate(colorList) {
    var previousShapeType = null;

    return colorList.map(function (color) {
      var shapeType = getRandomShape(previousShapeType);
      previousShapeType = shapeType;

      return draw(shapeType, color);
    });
  }

  function getRandomShape(excludedShapeType) {
    var shapesList = Object.keys(shapes);

    if (excludedShapeType !== null) {
      shapesList.splice(shapesList.indexOf(excludedShapeType), 1);
    }

    var randomIndex = Math.floor(Math.random() * shapesList.length);

    return shapesList[randomIndex];
  }

  exports.draw = draw;
  exports.generate = generate;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

angular.module("app", ["chart.js"]).controller("BubbleCtrl",
  function ($scope) {
    // see examples/bubble.js for random bubbles source code
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [{
        x: 40,
        y: 10,
        r: 20
      }],
      [{
        x: 10,
        y: 40,
        r: 50
      }]
    ];

   $scope.over = [
     {borderWidth: 3,
       hoverBackgroundColor: 'rgba(255,99,132,0.4)',
       hoverBorderColor: 'rgba(255,99,132,1)',
       backgroundColor: pattern.draw('circle', '#36a2eb')
     },
   {borderWidth: 5,
       hoverBackgroundColor: 'rgba(255,99,132,0.4)',
       hoverBorderColor: 'rgba(255,99,132,1)',
       backgroundColor: pattern.draw('circle', '#36a2eb')
     }]
});

var ctx = document.getElementById("bubble2").getContext("2d");
var chartData = {
    datasets: [{
        data: [
                {
                    x: 20,
                    y: 30,
                    r: 15
                },
                {
                    x: 40,
                    y: 10,
                    r: 10
                }
            ],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: chartData,
    options: {
        elements: {
            points: {
                borderWidth: 1,
                borderColor: 'rgb(0, 0, 0)'
            }
        }
    }
});

console.log(pattern.draw('circle', '#36a2eb'));</script></body>
</html>

## jsbin.sirewo.js
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.pattern = global.pattern || {})));
}(this, function (exports) { 'use strict';

  function generateShape(size) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.width = size;
    canvas.height = size;

    return {
      canvas: canvas,
      context: context
    };
  }

  function square(width) {
    var shape = generateShape(width);
    var height = width;

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.4)';
    shape.context.fillRect(0, 0, width / 2, height / 2);
    shape.context.fillRect(width / 2, height / 2, width / 2, height / 2);

    return shape.canvas;
  }

  function circle(diameter) {
    var shape = generateShape(diameter);
    var radius = diameter / 2;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.4)';

    shape.context.arc(radius / 2, radius / 2, radius / 2, 0, 2 * Math.PI);
    shape.context.arc(radius * 1.5, radius * 1.5, radius / 2, 0, 2 * Math.PI);
    shape.context.fill();

    return shape.canvas;
  }

  function diamond(width) {
    var shape = generateShape(width);
    var canvasWidth = shape.canvas.width;
    var canvasHeight = shape.canvas.height;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(canvasWidth / 4, 0);
    shape.context.lineTo(canvasWidth / 2, canvasHeight / 4);
    shape.context.lineTo(canvasWidth / 4, canvasHeight / 2);
    shape.context.lineTo(0, canvasHeight / 4);
    shape.context.lineTo(canvasWidth / 4, 0);

    shape.context.moveTo(canvasWidth * 0.75, 0);
    shape.context.lineTo(canvasWidth, canvasHeight / 4);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight / 2);
    shape.context.lineTo(canvasWidth / 2, canvasHeight / 4);
    shape.context.lineTo(canvasWidth * 0.75, 0);

    shape.context.moveTo(canvasWidth / 4, canvasHeight / 2);
    shape.context.lineTo(canvasWidth / 2, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth / 4, canvasHeight);
    shape.context.lineTo(0, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth / 4, canvasHeight / 2);

    shape.context.moveTo(canvasWidth * 0.75, canvasHeight / 2);
    shape.context.lineTo(canvasWidth, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight);
    shape.context.lineTo(canvasWidth / 2, canvasHeight * 0.75);
    shape.context.lineTo(canvasWidth * 0.75, canvasHeight / 2);

    shape.context.fill();

    return shape.canvas;
  }

  function lineHorizontal(width) {
    var thickness = width / 4;
    var shape = generateShape(width);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
    shape.context.fillRect(0, 0, width, thickness);
    shape.context.fillRect(0, thickness * 2, width, thickness);

    return shape.canvas;
  }

  function lineVertical(width) {
    var thickness = width / 4;
    var shape = generateShape(width);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
    shape.context.fillRect(0, 0, thickness, width);
    shape.context.fillRect(thickness * 2, 0, thickness, width);

    return shape.canvas;
  }

  function lineDiagonalLeftToRight(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(thickness, -thickness);
    shape.context.lineTo(width + thickness, height - thickness);
    shape.context.stroke();

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(-thickness, thickness);
    shape.context.lineTo(width - thickness, height + thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function lineDiagonalRightToLeft(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(width + thickness, thickness);
    shape.context.lineTo(thickness, height + thickness);
    shape.context.stroke();

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(width - thickness, -thickness);
    shape.context.lineTo(-thickness, height - thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function triangle(size) {
    var shape = generateShape(size);
    size = size / 2;

    shape.context.beginPath();
    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(size / 2, 0);
    shape.context.lineTo(size, size);
    shape.context.lineTo(0, size);
    shape.context.lineTo(size / 2, 0);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, 0);
    shape.context.lineTo(size * 2, size);
    shape.context.lineTo(size, size);

    shape.context.moveTo(size * 2, size);
    shape.context.lineTo(size * 2, size * 2);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size * 2, size);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(size, size);

    shape.context.moveTo(0, size);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(0, size * 2);
    shape.context.lineTo(0, size);

    shape.context.fill();

    return shape.canvas;
  }

  function triangleInverted(size) {
    var shape = generateShape(size);
    size = size / 2;

    shape.context.beginPath();
    shape.context.translate(size * 2, size * 2);
    shape.context.rotate(3.14);

    shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

    shape.context.moveTo(size / 2, 0);
    shape.context.lineTo(size, size);
    shape.context.lineTo(0, size);
    shape.context.lineTo(size / 2, 0);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, 0);
    shape.context.lineTo(size * 2, size);
    shape.context.lineTo(size, size);

    shape.context.moveTo(size * 2, size);
    shape.context.lineTo(size * 2, size * 2);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size * 2, size);

    shape.context.moveTo(size, size);
    shape.context.lineTo(size * 1.5, size * 2);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(size, size);

    shape.context.moveTo(0, size);
    shape.context.lineTo(size / 2, size * 2);
    shape.context.lineTo(0, size * 2);
    shape.context.lineTo(0, size);

    shape.context.fill();

    return shape.canvas;
  }

  function zigzagVertical(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(thickness, -thickness);
    shape.context.lineTo(width - thickness, height / 2);
    shape.context.lineTo(thickness, height + thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  function zigzagHorizontal(width) {
    var thickness = width / 4;
    var shape = generateShape(width);
    var height = width;

    shape.context.beginPath();
    shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    shape.context.lineWidth = thickness;
    shape.context.moveTo(-thickness, thickness);
    shape.context.lineTo(width / 2, height - thickness);
    shape.context.lineTo(width + thickness, thickness);
    shape.context.stroke();

    return shape.canvas;
  }

  var shapes = {
    'square': square,
    'circle': circle,
    'diamond': diamond,
    'triangle': triangle,
    'triangle-inverted': triangleInverted,
    'line-horizontal': lineHorizontal,
    'line-vertical': lineVertical,
    'line-diagonal-lr': lineDiagonalLeftToRight,
    'line-diagonal-rl': lineDiagonalRightToLeft,
    'zigzag-vertical': zigzagHorizontal,
    'zigzag-horizontal': zigzagVertical
  };

  function draw() {
    var shapeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'square';
    var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'rgba(100, 100, 100, 0.7)';
    var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(255, 255, 255, 0.7)';
    var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;

    var outerSize = size * 2;
    var patternCanvas = document.createElement('canvas');
    var patternContext = patternCanvas.getContext('2d');
    var shape = shapes[shapeType];
    var pattern = void 0,
        patternFill = void 0;

    patternCanvas.width = outerSize;
    patternCanvas.height = outerSize;

    patternContext.fillStyle = backgroundColor;
    patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);

    pattern = patternContext.createPattern(shape.call(shape, size), 'repeat');
    patternContext.fillStyle = pattern;
    patternContext.fillRect(0, 0, outerSize, outerSize);

    patternFill = patternContext.createPattern(patternCanvas, 'repeat');
    patternFill.shapeType = shapeType;

    return patternFill;
  }

  function generate(colorList) {
    var previousShapeType = null;

    return colorList.map(function (color) {
      var shapeType = getRandomShape(previousShapeType);
      previousShapeType = shapeType;

      return draw(shapeType, color);
    });
  }

  function getRandomShape(excludedShapeType) {
    var shapesList = Object.keys(shapes);

    if (excludedShapeType !== null) {
      shapesList.splice(shapesList.indexOf(excludedShapeType), 1);
    }

    var randomIndex = Math.floor(Math.random() * shapesList.length);

    return shapesList[randomIndex];
  }

  exports.draw = draw;
  exports.generate = generate;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

angular.module("app", ["chart.js"]).controller("BubbleCtrl",
  function ($scope) {
    // see examples/bubble.js for random bubbles source code
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [{
        x: 40,
        y: 10,
        r: 20
      }],
      [{
        x: 10,
        y: 40,
        r: 50
      }]
    ];

   $scope.over = [
     {borderWidth: 3,
       hoverBackgroundColor: 'rgba(255,99,132,0.4)',
       hoverBorderColor: 'rgba(255,99,132,1)',
       backgroundColor: pattern.draw('circle', '#36a2eb')
     },
   {borderWidth: 5,
       hoverBackgroundColor: 'rgba(255,99,132,0.4)',
       hoverBorderColor: 'rgba(255,99,132,1)',
       backgroundColor: pattern.draw('circle', '#36a2eb')
     }]
});

var ctx = document.getElementById("bubble2").getContext("2d");
var chartData = {
    datasets: [{
        data: [
                {
                    x: 20,
                    y: 30,
                    r: 15
                },
                {
                    x: 40,
                    y: 10,
                    r: 10
                }
            ],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: chartData,
    options: {
        elements: {
            points: {
                borderWidth: 1,
                borderColor: 'rgb(0, 0, 0)'
            }
        }
    }
});

console.log(pattern.draw('circle', '#36a2eb'));
	(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(factory((global.pattern = global.pattern \|\| {})));
	}(this, function (exports) { 'use strict';

	function generateShape(size) {
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');

	canvas.width = size;
	canvas.height = size;

	return {
	canvas: canvas,
	context: context
	};
	}

	function square(width) {
	var shape = generateShape(width);
	var height = width;

	shape.context.fillStyle = 'rgba(255, 255, 255, 0.4)';
	shape.context.fillRect(0, 0, width / 2, height / 2);
	shape.context.fillRect(width / 2, height / 2, width / 2, height / 2);

	return shape.canvas;
	}

	function circle(diameter) {
	var shape = generateShape(diameter);
	var radius = diameter / 2;

	shape.context.beginPath();
	shape.context.fillStyle = 'rgba(255, 255, 255, 0.4)';

	shape.context.arc(radius / 2, radius / 2, radius / 2, 0, 2 * Math.PI);
	shape.context.arc(radius * 1.5, radius * 1.5, radius / 2, 0, 2 * Math.PI);
	shape.context.fill();

	return shape.canvas;
	}

	function diamond(width) {
	var shape = generateShape(width);
	var canvasWidth = shape.canvas.width;
	var canvasHeight = shape.canvas.height;

	shape.context.beginPath();
	shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

	shape.context.moveTo(canvasWidth / 4, 0);
	shape.context.lineTo(canvasWidth / 2, canvasHeight / 4);
	shape.context.lineTo(canvasWidth / 4, canvasHeight / 2);
	shape.context.lineTo(0, canvasHeight / 4);
	shape.context.lineTo(canvasWidth / 4, 0);

	shape.context.moveTo(canvasWidth * 0.75, 0);
	shape.context.lineTo(canvasWidth, canvasHeight / 4);
	shape.context.lineTo(canvasWidth * 0.75, canvasHeight / 2);
	shape.context.lineTo(canvasWidth / 2, canvasHeight / 4);
	shape.context.lineTo(canvasWidth * 0.75, 0);

	shape.context.moveTo(canvasWidth / 4, canvasHeight / 2);
	shape.context.lineTo(canvasWidth / 2, canvasHeight * 0.75);
	shape.context.lineTo(canvasWidth / 4, canvasHeight);
	shape.context.lineTo(0, canvasHeight * 0.75);
	shape.context.lineTo(canvasWidth / 4, canvasHeight / 2);

	shape.context.moveTo(canvasWidth * 0.75, canvasHeight / 2);
	shape.context.lineTo(canvasWidth, canvasHeight * 0.75);
	shape.context.lineTo(canvasWidth * 0.75, canvasHeight);
	shape.context.lineTo(canvasWidth / 2, canvasHeight * 0.75);
	shape.context.lineTo(canvasWidth * 0.75, canvasHeight / 2);

	shape.context.fill();

	return shape.canvas;
	}

	function lineHorizontal(width) {
	var thickness = width / 4;
	var shape = generateShape(width);

	shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
	shape.context.fillRect(0, 0, width, thickness);
	shape.context.fillRect(0, thickness * 2, width, thickness);

	return shape.canvas;
	}

	function lineVertical(width) {
	var thickness = width / 4;
	var shape = generateShape(width);

	shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
	shape.context.fillRect(0, 0, thickness, width);
	shape.context.fillRect(thickness * 2, 0, thickness, width);

	return shape.canvas;
	}

	function lineDiagonalLeftToRight(width) {
	var thickness = width / 4;
	var shape = generateShape(width);
	var height = width;

	shape.context.beginPath();
	shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
	shape.context.lineWidth = thickness;
	shape.context.moveTo(thickness, -thickness);
	shape.context.lineTo(width + thickness, height - thickness);
	shape.context.stroke();

	shape.context.beginPath();
	shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
	shape.context.lineWidth = thickness;
	shape.context.moveTo(-thickness, thickness);
	shape.context.lineTo(width - thickness, height + thickness);
	shape.context.stroke();

	return shape.canvas;
	}

	function lineDiagonalRightToLeft(width) {
	var thickness = width / 4;
	var shape = generateShape(width);
	var height = width;

	shape.context.beginPath();
	shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
	shape.context.lineWidth = thickness;
	shape.context.moveTo(width + thickness, thickness);
	shape.context.lineTo(thickness, height + thickness);
	shape.context.stroke();

	shape.context.beginPath();
	shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
	shape.context.lineWidth = thickness;
	shape.context.moveTo(width - thickness, -thickness);
	shape.context.lineTo(-thickness, height - thickness);
	shape.context.stroke();

	return shape.canvas;
	}

	function triangle(size) {
	var shape = generateShape(size);
	size = size / 2;

	shape.context.beginPath();
	shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

	shape.context.moveTo(size / 2, 0);
	shape.context.lineTo(size, size);
	shape.context.lineTo(0, size);
	shape.context.lineTo(size / 2, 0);

	shape.context.moveTo(size, size);
	shape.context.lineTo(size * 1.5, 0);
	shape.context.lineTo(size * 2, size);
	shape.context.lineTo(size, size);

	shape.context.moveTo(size * 2, size);
	shape.context.lineTo(size * 2, size * 2);
	shape.context.lineTo(size * 1.5, size * 2);
	shape.context.lineTo(size * 2, size);

	shape.context.moveTo(size, size);
	shape.context.lineTo(size * 1.5, size * 2);
	shape.context.lineTo(size / 2, size * 2);
	shape.context.lineTo(size, size);

	shape.context.moveTo(0, size);
	shape.context.lineTo(size / 2, size * 2);
	shape.context.lineTo(0, size * 2);
	shape.context.lineTo(0, size);

	shape.context.fill();

	return shape.canvas;
	}

	function triangleInverted(size) {
	var shape = generateShape(size);
	size = size / 2;

	shape.context.beginPath();
	shape.context.translate(size * 2, size * 2);
	shape.context.rotate(3.14);

	shape.context.fillStyle = 'rgba(255, 255, 255, 0.5)';

	shape.context.moveTo(size / 2, 0);
	shape.context.lineTo(size, size);
	shape.context.lineTo(0, size);
	shape.context.lineTo(size / 2, 0);

	shape.context.moveTo(size, size);
	shape.context.lineTo(size * 1.5, 0);
	shape.context.lineTo(size * 2, size);
	shape.context.lineTo(size, size);

	shape.context.moveTo(size * 2, size);
	shape.context.lineTo(size * 2, size * 2);
	shape.context.lineTo(size * 1.5, size * 2);
	shape.context.lineTo(size * 2, size);

	shape.context.moveTo(size, size);
	shape.context.lineTo(size * 1.5, size * 2);
	shape.context.lineTo(size / 2, size * 2);
	shape.context.lineTo(size, size);

	shape.context.moveTo(0, size);
	shape.context.lineTo(size / 2, size * 2);
	shape.context.lineTo(0, size * 2);
	shape.context.lineTo(0, size);

	shape.context.fill();

	return shape.canvas;
	}

	function zigzagVertical(width) {
	var thickness = width / 4;
	var shape = generateShape(width);
	var height = width;

	shape.context.beginPath();
	shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
	shape.context.lineWidth = thickness;
	shape.context.moveTo(thickness, -thickness);
	shape.context.lineTo(width - thickness, height / 2);
	shape.context.lineTo(thickness, height + thickness);
	shape.context.stroke();

	return shape.canvas;
	}

	function zigzagHorizontal(width) {
	var thickness = width / 4;
	var shape = generateShape(width);
	var height = width;

	shape.context.beginPath();
	shape.context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
	shape.context.lineWidth = thickness;
	shape.context.moveTo(-thickness, thickness);
	shape.context.lineTo(width / 2, height - thickness);
	shape.context.lineTo(width + thickness, thickness);
	shape.context.stroke();

	return shape.canvas;
	}

	var shapes = {
	'square': square,
	'circle': circle,
	'diamond': diamond,
	'triangle': triangle,
	'triangle-inverted': triangleInverted,
	'line-horizontal': lineHorizontal,
	'line-vertical': lineVertical,
	'line-diagonal-lr': lineDiagonalLeftToRight,
	'line-diagonal-rl': lineDiagonalRightToLeft,
	'zigzag-vertical': zigzagHorizontal,
	'zigzag-horizontal': zigzagVertical
	};

	function draw() {
	var shapeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'square';
	var backgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'rgba(100, 100, 100, 0.7)';
	var patternColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(255, 255, 255, 0.7)';
	var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;

	var outerSize = size * 2;
	var patternCanvas = document.createElement('canvas');
	var patternContext = patternCanvas.getContext('2d');
	var shape = shapes[shapeType];
	var pattern = void 0,
	patternFill = void 0;

	patternCanvas.width = outerSize;
	patternCanvas.height = outerSize;

	patternContext.fillStyle = backgroundColor;
	patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);

	pattern = patternContext.createPattern(shape.call(shape, size), 'repeat');
	patternContext.fillStyle = pattern;
	patternContext.fillRect(0, 0, outerSize, outerSize);

	patternFill = patternContext.createPattern(patternCanvas, 'repeat');
	patternFill.shapeType = shapeType;

	return patternFill;
	}

	function generate(colorList) {
	var previousShapeType = null;

	return colorList.map(function (color) {
	var shapeType = getRandomShape(previousShapeType);
	previousShapeType = shapeType;

	return draw(shapeType, color);
	});
	}

	function getRandomShape(excludedShapeType) {
	var shapesList = Object.keys(shapes);

	if (excludedShapeType !== null) {
	shapesList.splice(shapesList.indexOf(excludedShapeType), 1);
	}

	var randomIndex = Math.floor(Math.random() * shapesList.length);

	return shapesList[randomIndex];
	}

	exports.draw = draw;
	exports.generate = generate;

	Object.defineProperty(exports, '__esModule', { value: true });

	}));

	angular.module("app", ["chart.js"]).controller("BubbleCtrl",
	function ($scope) {
	// see examples/bubble.js for random bubbles source code
	$scope.series = ['Series A', 'Series B'];

	$scope.data = [
	[{
	x: 40,
	y: 10,
	r: 20
	}],
	[{
	x: 10,
	y: 40,
	r: 50
	}]
	];

	$scope.over = [
	{borderWidth: 3,
	hoverBackgroundColor: 'rgba(255,99,132,0.4)',
	hoverBorderColor: 'rgba(255,99,132,1)',
	backgroundColor: pattern.draw('circle', '#36a2eb')
	},
	{borderWidth: 5,
	hoverBackgroundColor: 'rgba(255,99,132,0.4)',
	hoverBorderColor: 'rgba(255,99,132,1)',
	backgroundColor: pattern.draw('circle', '#36a2eb')
	}]
	});

	var ctx = document.getElementById("bubble2").getContext("2d");
	var chartData = {
	datasets: [{
	data: [
	{
	x: 20,
	y: 30,
	r: 15
	},
	{
	x: 40,
	y: 10,
	r: 10
	}
	],
	backgroundColor: [
	pattern.draw('square', '#ff6384'),
	pattern.draw('circle', '#36a2eb'),
	pattern.draw('diamond', '#cc65fe'),
	pattern.draw('triangle', '#ffce56'),
	]
	}],
	labels: ['Red', 'Blue', 'Purple', 'Yellow']
	};

	var myBubbleChart = new Chart(ctx,{
	type: 'bubble',
	data: chartData,
	options: {
	elements: {
	points: {
	borderWidth: 1,
	borderColor: 'rgb(0, 0, 0)'
	}
	}
	}
	});

	console.log(pattern.draw('circle', '#36a2eb'));