Skip to content

Instantly share code, notes, and snippets.

@fclaeys

fclaeys/index.html

Forked from anonymous/index.html
Created October 11, 2016 08:45
Show Gist options
  • Save fclaeys/0117230b4209a6e0abdaa71b9db2f25b to your computer and use it in GitHub Desktop.
Save fclaeys/0117230b4209a6e0abdaa71b9db2f25b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin chartjs and angular-chart.js pattern tests // source https://jsbin.com/sirewo
Raw
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>
Raw
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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment