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

Commit 6c35cc2

Browse files
author
Tom Scanlan
committed
Added segment line control flow, verified color applied, added demo page
1 parent f7e6a66 commit 6c35cc2

File tree

3 files changed

+148
-6
lines changed

3 files changed

+148
-6
lines changed

‎samples/vertical_segment.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
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: 5,
40+
segmentColor:'blue',
41+
data: samples.boxplots({count: 7, random: random}).map((x)=>{
42+
x.segment = 45;
43+
return x
44+
}),
45+
outlierColor: '#999999',
46+
lowerColor: '#461e7d'
47+
}, {
48+
label: 'Dataset 2',
49+
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
50+
borderColor: window.chartColors.blue,
51+
borderWidth: 1,
52+
data: samples.boxplotsArray({count: 7, random: random}),
53+
outlierColor: '#999999',
54+
lowerColor: '#461e7d'
55+
}]
56+
57+
};
58+
59+
window.onload = function() {
60+
var ctx = document.getElementById("canvas").getContext("2d");
61+
window.myBar = new Chart(ctx, {
62+
type: 'boxplot',
63+
data: boxplotData,
64+
options: {
65+
responsive: true,
66+
legend: {
67+
position: 'top',
68+
},
69+
title: {
70+
display: true,
71+
text: 'Chart.js Box Plot Chart'
72+
},
73+
scales: {
74+
xAxes: [{
75+
// Specific to Bar Controller
76+
categoryPercentage: 0.9,
77+
barPercentage: 0.8
78+
}]
79+
}
80+
}
81+
});
82+
83+
};
84+
85+
document.getElementById('randomizeData').addEventListener('click', function() {
86+
boxplotData.datasets.forEach(function(dataset) {
87+
dataset.data = samples.boxplots({count: 7});
88+
89+
});
90+
window.myBar.update();
91+
});
92+
93+
var colorNames = Object.keys(window.chartColors);
94+
document.getElementById('addDataset').addEventListener('click', function() {
95+
var colorName = colorNames[boxplotData.datasets.length % colorNames.length];
96+
var dsColor = window.chartColors[colorName];
97+
var newDataset = {
98+
label: 'Dataset ' + boxplotData.datasets.length,
99+
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
100+
borderColor: dsColor,
101+
borderWidth: 1,
102+
data: samples.boxplots({count: boxplotData.labels.length})
103+
};
104+
105+
boxplotData.datasets.push(newDataset);
106+
window.myBar.update();
107+
});
108+
109+
document.getElementById('addData').addEventListener('click', function() {
110+
if (boxplotData.datasets.length > 0) {
111+
var month = samples.nextMonth(boxplotData.labels.length);
112+
boxplotData.labels.push(month);
113+
114+
for (var index = 0; index < boxplotData.datasets.length; ++index) {
115+
//window.myBar.addData(randomBoxPlot(), index);
116+
boxplotData.datasets[index].data.push(samples.randomBoxPlot());
117+
}
118+
119+
window.myBar.update();
120+
}
121+
});
122+
123+
document.getElementById('removeDataset').addEventListener('click', function() {
124+
boxplotData.datasets.splice(0, 1);
125+
window.myBar.update();
126+
});
127+
128+
document.getElementById('removeData').addEventListener('click', function() {
129+
boxplotData.labels.splice(-1, 1); // remove the label first
130+
131+
boxplotData.datasets.forEach(function(dataset, datasetIndex) {
132+
dataset.data.pop();
133+
});
134+
135+
window.myBar.update();
136+
});
137+
</script>
138+
</body>
139+
140+
</html>

‎src/controllers/base.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ 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'];
28+
const configKeys = ['outlierRadius', 'itemRadius', 'itemStyle', 'itemBackgroundColor', 'itemBorderColor', 'outlierColor', 'medianColor', 'segmentColor', 'hitPadding', 'outlierHitRadius', 'lowerColor'];
2929
const configKeyIsColor = [false, false, false, true, true, true, true, false, false, true];
3030

3131
const array = {

‎src/elements/boxandwhiskers.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,14 @@ const BoxAndWiskers = Chart.elements.BoxAndWhiskers = ArrayElementBase.extend({
106106
ctx.lineTo(x0 + width, boxplot.median);
107107

108108
// Draw the segment line
109-
if (vm.segmentColor) {
110-
ctx.strokeStyle = vm.segmentColor;
109+
if (boxplot.segment != null) {
110+
if (vm.segmentColor) {
111+
ctx.strokeStyle = vm.segmentColor;
112+
}
113+
ctx.beginPath();
114+
ctx.moveTo(x0, boxplot.segment);
115+
ctx.lineTo(x0 + width, boxplot.segment);
111116
}
112-
ctx.beginPath();
113-
ctx.moveTo(x0, boxplot.segment);
114-
ctx.lineTo(x0 + width, boxplot.segment);
115117

116118
// fill the part below the median with lowerColor
117119
if (vm.lowerColor) {

0 commit comments

Comments
 (0)