Skip to content
This repository was archived by the owner on Nov 25, 2021. It is now read-only.

Commit 27047fd

Browse files
dvvanessastoiberdvvanessastoiber
authored
Merge branch 'master' into release-2.4.0
2 parents c79f535 + 05a2fdb commit 27047fd

File tree

3 files changed

+146
-2
lines changed

3 files changed

+146
-2
lines changed

‎samples/vertical_segment.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Box Plot Chart</title>
6+
<script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
7+
<script src="../build/Chart.BoxPlot.js" type="text/javascript"></script>
8+
<script src="https://unpkg.com/d3-random@latest/dist/d3-random.js"></script>
9+
<script src="./utils.js"></script>
10+
<style>
11+
canvas {
12+
-moz-user-select: none;
13+
-webkit-user-select: none;
14+
-ms-user-select: none;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<div id="container" style="width: 75%;">
21+
<canvas id="canvas"></canvas>
22+
</div>
23+
<button id="randomizeData">Randomize Data</button>
24+
<button id="addDataset">Add Dataset</button>
25+
<button id="removeDataset">Remove Dataset</button>
26+
<button id="addData">Add Data</button>
27+
<button id="removeData">Remove Data</button>
28+
<script>
29+
const samples = this.Samples.utils;
30+
var color = Chart.helpers.color;
31+
var b = d3.randomNormal();
32+
var random = (min, max) => () => (b() * ((max || 1) - (min || 0))) + (min || 0);
33+
var boxplotData = {
34+
labels: samples.months({count: 7}),
35+
datasets: [{
36+
label: 'Dataset 1',
37+
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
38+
borderColor: window.chartColors.red,
39+
borderWidth: 1,
40+
medianColor:"green",
41+
segmentColor:'blue',
42+
data: samples.boxplots({count: 7, random: random}).map((x)=>{
43+
x.segment = 45;
44+
return x
45+
}),
46+
outlierColor: '#999999'
47+
}]
48+
49+
};
50+
51+
window.onload = function() {
52+
var ctx = document.getElementById("canvas").getContext("2d");
53+
window.myBar = new Chart(ctx, {
54+
type: 'boxplot',
55+
data: boxplotData,
56+
options: {
57+
responsive: true,
58+
legend: {
59+
position: 'top',
60+
},
61+
title: {
62+
display: true,
63+
text: 'Chart.js Box Plot Chart'
64+
},
65+
scales: {
66+
xAxes: [{
67+
// Specific to Bar Controller
68+
categoryPercentage: 0.9,
69+
barPercentage: 0.8
70+
}]
71+
}
72+
}
73+
});
74+
75+
};
76+
77+
document.getElementById('randomizeData').addEventListener('click', function() {
78+
boxplotData.datasets.forEach(function(dataset) {
79+
dataset.data = samples.boxplots({count: 7});
80+
81+
});
82+
window.myBar.update();
83+
});
84+
85+
var colorNames = Object.keys(window.chartColors);
86+
document.getElementById('addDataset').addEventListener('click', function() {
87+
var colorName = colorNames[boxplotData.datasets.length % colorNames.length];
88+
var dsColor = window.chartColors[colorName];
89+
var newDataset = {
90+
label: 'Dataset ' + boxplotData.datasets.length,
91+
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
92+
borderColor: dsColor,
93+
borderWidth: 1,
94+
data: samples.boxplots({count: boxplotData.labels.length})
95+
};
96+
97+
boxplotData.datasets.push(newDataset);
98+
window.myBar.update();
99+
});
100+
101+
document.getElementById('addData').addEventListener('click', function() {
102+
if (boxplotData.datasets.length > 0) {
103+
var month = samples.nextMonth(boxplotData.labels.length);
104+
boxplotData.labels.push(month);
105+
106+
for (var index = 0; index < boxplotData.datasets.length; ++index) {
107+
//window.myBar.addData(randomBoxPlot(), index);
108+
boxplotData.datasets[index].data.push(samples.randomBoxPlot());
109+
}
110+
111+
window.myBar.update();
112+
}
113+
});
114+
115+
document.getElementById('removeDataset').addEventListener('click', function() {
116+
boxplotData.datasets.splice(0, 1);
117+
window.myBar.update();
118+
});
119+
120+
document.getElementById('removeData').addEventListener('click', function() {
121+
boxplotData.labels.splice(-1, 1); // remove the label first
122+
123+
boxplotData.datasets.forEach(function(dataset, datasetIndex) {
124+
dataset.data.pop();
125+
});
126+
127+
window.myBar.update();
128+
});
129+
</script>
130+
</body>
131+
132+
</html>

‎src/controllers/base.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export function toFixed(value) {
2525
return Number.parseFloat(value).toFixed(decimals);
2626
}
2727

28-
const configKeys = ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'hitPadding', 'outlierHitRadius', 'lowerColor'];
29-
const configKeyIsColor = [false, false, false, true, true, true, true, false, false, true];
28+
const configKeys = ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'segmentColor', 'hitPadding', 'outlierHitRadius', 'lowerColor'];
29+
const configKeyIsColor = [false, false, false, true, true, true, true, true, false, false, true];
3030

3131
const array = {
3232
_elementOptions() {

‎src/elements/boxandwhiskers.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,19 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
104104
ctx.beginPath();
105105
ctx.moveTo(x0, boxplot.median);
106106
ctx.lineTo(x0 + width, boxplot.median);
107+
ctx.closePath();
108+
ctx.stroke();
107109

110+
// Draw the segment line
111+
if (boxplot.segment != null) {
112+
if (vm.segmentColor) {
113+
ctx.strokeStyle = vm.segmentColor;
114+
}
115+
ctx.beginPath();
116+
ctx.moveTo(x0, boxplot.segment);
117+
ctx.lineTo(x0 + width, boxplot.segment);
118+
ctx.closePath();
119+
}
108120
// fill the part below the median with lowerColor
109121
if (vm.lowerColor) {
110122
ctx.fillStyle = vm.lowerColor;

0 commit comments

Comments
 (0)