test/fixtures/bubble.js
angular.module('app', ['chart.js'])
.config(['ChartJsProvider', function (ChartJsProvider) {
'use strict';
ChartJsProvider.setOptions({
tooltips: { enabled: false }
});
}])
.controller('BubbleCtrl', ['$scope',function ($scope) {
'use strict';
$scope.colors = [
{
backgroundColor: 'rgba(151,187,205,0.2)',
pointBackgroundColor: 'rgba(151,187,205,1)',
pointHoverBackgroundColor: 'rgba(151,187,205,0.8)',
borderColor: 'rgba(151,187,205,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
},
{
backgroundColor: 'rgba(220,220,220,0.2)',
pointBackgroundColor: 'rgba(220,220,220,1)',
pointHoverBackgroundColor: 'rgba(220,220,220,0.8)',
borderColor: 'rgba(220,220,220,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(220,220,220,1)'
},
{
backgroundColor: 'rgba(247,70,74,0.2)',
pointBackgroundColor: 'rgba(247,70,74,1)',
pointHoverBackgroundColor: 'rgba(247,70,74,0.8)',
borderColor: 'rgba(247,70,74,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(247,70,74,1)'
},
{
backgroundColor: 'rgba(70,191,189,0.2)',
pointBackgroundColor: 'rgba(70,191,189,1)',
pointHoverBackgroundColor: 'rgba(70,191,189,0.8)',
borderColor: 'rgba(70,191,189,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(70,191,189,1)'
},
{
backgroundColor: 'rgba(253,180,92,0.2)',
pointBackgroundColor: 'rgba(253,180,92,1)',
pointHoverBackgroundColor: 'rgba(253,180,92,0.8)',
borderColor: 'rgba(253,180,92,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(253,180,92,1)'
},
{
backgroundColor: 'rgba(148,159,177,0.2)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointHoverBackgroundColor: 'rgba(148,159,177,0.8)',
borderColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,1)'
},
{
backgroundColor: 'rgba(77,83,96,0.2)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointHoverBackgroundColor: 'rgba(77,83,96,0.8)',
borderColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
},
{
backgroundColor: 'rgba(151,57,74,0.2)',
pointBackgroundColor: 'rgba(151,57,74,1)',
pointHoverBackgroundColor: 'rgba(151,57,74,0.8)',
borderColor: 'rgba(151,57,74,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,57,74,1)'
},
{
backgroundColor: 'rgba(198,232,17,0.2)',
pointBackgroundColor: 'rgba(198,232,17,1)',
pointHoverBackgroundColor: 'rgba(198,232,17,0.8)',
borderColor: 'rgba(198,232,17,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(198,232,17,1)'
},
{
backgroundColor: 'rgba(39,249,229,0.2)',
pointBackgroundColor: 'rgba(39,249,229,1)',
pointHoverBackgroundColor: 'rgba(39,249,229,0.8)',
borderColor: 'rgba(39,249,229,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(39,249,229,1)'
},
{
backgroundColor: 'rgba(98,128,233,0.2)',
pointBackgroundColor: 'rgba(98,128,233,1)',
pointHoverBackgroundColor: 'rgba(98,128,233,0.8)',
borderColor: 'rgba(98,128,233,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(98,128,233,1)'
},
{
backgroundColor: 'rgba(195,99,4,0.2)',
pointBackgroundColor: 'rgba(195,99,4,1)',
pointHoverBackgroundColor: 'rgba(195,99,4,0.8)',
borderColor: 'rgba(195,99,4,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(195,99,4,1)'
},
{
backgroundColor: 'rgba(81,204,249,0.2)',
pointBackgroundColor: 'rgba(81,204,249,1)',
pointHoverBackgroundColor: 'rgba(81,204,249,0.8)',
borderColor: 'rgba(81,204,249,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(81,204,249,1)'
},
{
backgroundColor: 'rgba(159,197,163,0.2)',
pointBackgroundColor: 'rgba(159,197,163,1)',
pointHoverBackgroundColor: 'rgba(159,197,163,0.8)',
borderColor: 'rgba(159,197,163,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(159,197,163,1)'
},
{
backgroundColor: 'rgba(122,68,60,0.2)',
pointBackgroundColor: 'rgba(122,68,60,1)',
pointHoverBackgroundColor: 'rgba(122,68,60,0.8)',
borderColor: 'rgba(122,68,60,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(122,68,60,1)'
},
{
backgroundColor: 'rgba(183,199,142,0.2)',
pointBackgroundColor: 'rgba(183,199,142,1)',
pointHoverBackgroundColor: 'rgba(183,199,142,0.8)',
borderColor: 'rgba(183,199,142,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(183,199,142,1)'
},
{
backgroundColor: 'rgba(33,125,4,0.2)',
pointBackgroundColor: 'rgba(33,125,4,1)',
pointHoverBackgroundColor: 'rgba(33,125,4,0.8)',
borderColor: 'rgba(33,125,4,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(33,125,4,1)'
},
{
backgroundColor: 'rgba(100,33,169,0.2)',
pointBackgroundColor: 'rgba(100,33,169,1)',
pointHoverBackgroundColor: 'rgba(100,33,169,0.8)',
borderColor: 'rgba(100,33,169,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(100,33,169,1)'
},
{
backgroundColor: 'rgba(10,128,69,0.2)',
pointBackgroundColor: 'rgba(10,128,69,1)',
pointHoverBackgroundColor: 'rgba(10,128,69,0.8)',
borderColor: 'rgba(10,128,69,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(10,128,69,1)'
},
{
backgroundColor: 'rgba(55,144,44,0.2)',
pointBackgroundColor: 'rgba(55,144,44,1)',
pointHoverBackgroundColor: 'rgba(55,144,44,0.8)',
borderColor: 'rgba(55,144,44,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(55,144,44,1)'
},
{
backgroundColor: 'rgba(111,248,27,0.2)',
pointBackgroundColor: 'rgba(111,248,27,1)',
pointHoverBackgroundColor: 'rgba(111,248,27,0.8)',
borderColor: 'rgba(111,248,27,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(111,248,27,1)'
},
{
backgroundColor: 'rgba(241,104,154,0.2)',
pointBackgroundColor: 'rgba(241,104,154,1)',
pointHoverBackgroundColor: 'rgba(241,104,154,0.8)',
borderColor: 'rgba(241,104,154,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(241,104,154,1)'
},
{
backgroundColor: 'rgba(158,253,143,0.2)',
pointBackgroundColor: 'rgba(158,253,143,1)',
pointHoverBackgroundColor: 'rgba(158,253,143,0.8)',
borderColor: 'rgba(158,253,143,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(158,253,143,1)'
},
{
backgroundColor: 'rgba(186,25,134,0.2)',
pointBackgroundColor: 'rgba(186,25,134,1)',
pointHoverBackgroundColor: 'rgba(186,25,134,0.8)',
borderColor: 'rgba(186,25,134,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(186,25,134,1)'
},
{
backgroundColor: 'rgba(81,34,77,0.2)',
pointBackgroundColor: 'rgba(81,34,77,1)',
pointHoverBackgroundColor: 'rgba(81,34,77,0.8)',
borderColor: 'rgba(81,34,77,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(81,34,77,1)'
},
{
backgroundColor: 'rgba(254,6,184,0.2)',
pointBackgroundColor: 'rgba(254,6,184,1)',
pointHoverBackgroundColor: 'rgba(254,6,184,0.8)',
borderColor: 'rgba(254,6,184,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(254,6,184,1)'
},
{
backgroundColor: 'rgba(4,230,203,0.2)',
pointBackgroundColor: 'rgba(4,230,203,1)',
pointHoverBackgroundColor: 'rgba(4,230,203,0.8)',
borderColor: 'rgba(4,230,203,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(4,230,203,1)'
},
{
backgroundColor: 'rgba(204,31,79,0.2)',
pointBackgroundColor: 'rgba(204,31,79,1)',
pointHoverBackgroundColor: 'rgba(204,31,79,0.8)',
borderColor: 'rgba(204,31,79,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(204,31,79,1)'
},
{
backgroundColor: 'rgba(95,152,82,0.2)',
pointBackgroundColor: 'rgba(95,152,82,1)',
pointHoverBackgroundColor: 'rgba(95,152,82,0.8)',
borderColor: 'rgba(95,152,82,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(95,152,82,1)'
},
{
backgroundColor: 'rgba(120,249,206,0.2)',
pointBackgroundColor: 'rgba(120,249,206,1)',
pointHoverBackgroundColor: 'rgba(120,249,206,0.8)',
borderColor: 'rgba(120,249,206,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(120,249,206,1)'
},
{
backgroundColor: 'rgba(229,137,70,0.2)',
pointBackgroundColor: 'rgba(229,137,70,1)',
pointHoverBackgroundColor: 'rgba(229,137,70,0.8)',
borderColor: 'rgba(229,137,70,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(229,137,70,1)'
},
{
backgroundColor: 'rgba(54,98,166,0.2)',
pointBackgroundColor: 'rgba(54,98,166,1)',
pointHoverBackgroundColor: 'rgba(54,98,166,0.8)',
borderColor: 'rgba(54,98,166,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(54,98,166,1)'
},
{
backgroundColor: 'rgba(22,81,208,0.2)',
pointBackgroundColor: 'rgba(22,81,208,1)',
pointHoverBackgroundColor: 'rgba(22,81,208,0.8)',
borderColor: 'rgba(22,81,208,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(22,81,208,1)'
},
{
backgroundColor: 'rgba(139,248,40,0.2)',
pointBackgroundColor: 'rgba(139,248,40,1)',
pointHoverBackgroundColor: 'rgba(139,248,40,0.8)',
borderColor: 'rgba(139,248,40,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(139,248,40,1)'
},
{
backgroundColor: 'rgba(139,221,190,0.2)',
pointBackgroundColor: 'rgba(139,221,190,1)',
pointHoverBackgroundColor: 'rgba(139,221,190,0.8)',
borderColor: 'rgba(139,221,190,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(139,221,190,1)'
},
{
backgroundColor: 'rgba(230,218,251,0.2)',
pointBackgroundColor: 'rgba(230,218,251,1)',
pointHoverBackgroundColor: 'rgba(230,218,251,0.8)',
borderColor: 'rgba(230,218,251,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(230,218,251,1)'
},
{
backgroundColor: 'rgba(245,21,15,0.2)',
pointBackgroundColor: 'rgba(245,21,15,1)',
pointHoverBackgroundColor: 'rgba(245,21,15,0.8)',
borderColor: 'rgba(245,21,15,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(245,21,15,1)'
},
{
backgroundColor: 'rgba(36,166,81,0.2)',
pointBackgroundColor: 'rgba(36,166,81,1)',
pointHoverBackgroundColor: 'rgba(36,166,81,0.8)',
borderColor: 'rgba(36,166,81,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(36,166,81,1)'
},
{
backgroundColor: 'rgba(177,41,153,0.2)',
pointBackgroundColor: 'rgba(177,41,153,1)',
pointHoverBackgroundColor: 'rgba(177,41,153,0.8)',
borderColor: 'rgba(177,41,153,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(177,41,153,1)'
},
{
backgroundColor: 'rgba(44,173,178,0.2)',
pointBackgroundColor: 'rgba(44,173,178,1)',
pointHoverBackgroundColor: 'rgba(44,173,178,0.8)',
borderColor: 'rgba(44,173,178,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(44,173,178,1)'
},
{
backgroundColor: 'rgba(134,50,197,0.2)',
pointBackgroundColor: 'rgba(134,50,197,1)',
pointHoverBackgroundColor: 'rgba(134,50,197,0.8)',
borderColor: 'rgba(134,50,197,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(134,50,197,1)'
},
{
backgroundColor: 'rgba(176,188,149,0.2)',
pointBackgroundColor: 'rgba(176,188,149,1)',
pointHoverBackgroundColor: 'rgba(176,188,149,0.8)',
borderColor: 'rgba(176,188,149,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(176,188,149,1)'
},
{
backgroundColor: 'rgba(92,9,164,0.2)',
pointBackgroundColor: 'rgba(92,9,164,1)',
pointHoverBackgroundColor: 'rgba(92,9,164,0.8)',
borderColor: 'rgba(92,9,164,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(92,9,164,1)'
},
{
backgroundColor: 'rgba(184,93,102,0.2)',
pointBackgroundColor: 'rgba(184,93,102,1)',
pointHoverBackgroundColor: 'rgba(184,93,102,0.8)',
borderColor: 'rgba(184,93,102,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(184,93,102,1)'
},
{
backgroundColor: 'rgba(1,235,91,0.2)',
pointBackgroundColor: 'rgba(1,235,91,1)',
pointHoverBackgroundColor: 'rgba(1,235,91,0.8)',
borderColor: 'rgba(1,235,91,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(1,235,91,1)'
},
{
backgroundColor: 'rgba(148,100,155,0.2)',
pointBackgroundColor: 'rgba(148,100,155,1)',
pointHoverBackgroundColor: 'rgba(148,100,155,0.8)',
borderColor: 'rgba(148,100,155,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(148,100,155,1)'
},
{
backgroundColor: 'rgba(17,253,128,0.2)',
pointBackgroundColor: 'rgba(17,253,128,1)',
pointHoverBackgroundColor: 'rgba(17,253,128,0.8)',
borderColor: 'rgba(17,253,128,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(17,253,128,1)'
},
{
backgroundColor: 'rgba(107,59,91,0.2)',
pointBackgroundColor: 'rgba(107,59,91,1)',
pointHoverBackgroundColor: 'rgba(107,59,91,0.8)',
borderColor: 'rgba(107,59,91,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(107,59,91,1)'
},
{
backgroundColor: 'rgba(105,111,203,0.2)',
pointBackgroundColor: 'rgba(105,111,203,1)',
pointHoverBackgroundColor: 'rgba(105,111,203,0.8)',
borderColor: 'rgba(105,111,203,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(105,111,203,1)'
},
{
backgroundColor: 'rgba(86,123,134,0.2)',
pointBackgroundColor: 'rgba(86,123,134,1)',
pointHoverBackgroundColor: 'rgba(86,123,134,0.8)',
borderColor: 'rgba(86,123,134,1)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(86,123,134,1)'
}
];
$scope.options = {
scales: {
xAxes: [{
display: false,
ticks: {
max: 125,
min: -125,
stepSize: 10
}
}],
yAxes: [{
display: false,
ticks: {
max: 125,
min: -125,
stepSize: 10
}
}]
}
};
$scope.data = [
[
{
x: -8,
y: -72,
r: 20.5
}
],
[
{
x: -14,
y: -32,
r: 14.25
}
],
[
{
x: 0,
y: 86,
r: 15
}
],
[
{
x: -13,
y: 58,
r: 7.75
}
],
[
{
x: 22,
y: -60,
r: 9.25
}
],
[
{
x: 84,
y: -25,
r: 15.25
}
],
[
{
x: 14,
y: 85,
r: 23.25
}
],
[
{
x: -2,
y: 37,
r: 10.75
}
],
[
{
x: -40,
y: 69,
r: 0.75
}
],
[
{
x: -62,
y: -46,
r: 19.5
}
],
[
{
x: 4,
y: -1,
r: 0.25
}
],
[
{
x: -34,
y: 67,
r: 17.5
}
],
[
{
x: -21,
y: -88,
r: 16.25
}
],
[
{
x: 90,
y: 80,
r: 24.75
}
],
[
{
x: 7,
y: 93,
r: 20.75
}
],
[
{
x: 48,
y: 39,
r: 7.75
}
],
[
{
x: 99,
y: -20,
r: 2.75
}
],
[
{
x: -48,
y: 52,
r: 4.5
}
],
[
{
x: -57,
y: -39,
r: 21
}
],
[
{
x: 31,
y: -58,
r: 3.25
}
],
[
{
x: 96,
y: 62,
r: 10.25
}
],
[
{
x: 58,
y: -54,
r: 19.5
}
],
[
{
x: 8,
y: 73,
r: 12
}
],
[
{
x: 67,
y: 97,
r: 8.5
}
],
[
{
x: -47,
y: -57,
r: 25
}
],
[
{
x: 0,
y: -97,
r: 23.5
}
],
[
{
x: -55,
y: -27,
r: 2
}
],
[
{
x: 68,
y: 9,
r: 12.25
}
],
[
{
x: -5,
y: 63,
r: 20.75
}
],
[
{
x: 80,
y: 31,
r: 18.75
}
],
[
{
x: 47,
y: -21,
r: 2.5
}
],
[
{
x: -72,
y: 94,
r: 1.25
}
],
[
{
x: 11,
y: -90,
r: 5.25
}
],
[
{
x: 45,
y: -20,
r: 3.5
}
],
[
{
x: 99,
y: 42,
r: 8.5
}
],
[
{
x: -8,
y: -65,
r: 11
}
],
[
{
x: -30,
y: -68,
r: 19
}
],
[
{
x: -56,
y: 19,
r: 1
}
],
[
{
x: -22,
y: 46,
r: 9
}
],
[
{
x: 8,
y: 25,
r: 1
}
],
[
{
x: -36,
y: -64,
r: 0.5
}
],
[
{
x: 13,
y: -6,
r: 23.5
}
],
[
{
x: 41,
y: 45,
r: 3.75
}
],
[
{
x: -84,
y: 39,
r: 10.25
}
],
[
{
x: 27,
y: -96,
r: 23.5
}
],
[
{
x: -14,
y: -83,
r: 25
}
],
[
{
x: -89,
y: -78,
r: 1
}
],
[
{
x: -43,
y: -6,
r: 2.5
}
],
[
{
x: 3,
y: 71,
r: 0
}
],
[
{
x: 11,
y: 53,
r: 4.25
}
]
];
}]);