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

Commit c1daa9b

Browse files
author
Holger Stitz
authored
Merge pull request #40 from datavisyn:sluger/39_fix_violin
check data array to fix #39
2 parents e443b9b + 240ff25 commit c1daa9b

File tree

2 files changed

+136
-1
lines changed

2 files changed

+136
-1
lines changed

‎samples/violinSingle.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Violin 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+
30+
function randomValues(count, min, max) {
31+
const delta = max - min;
32+
return Array.from({length: count}).map(() => Math.random() * delta + min);
33+
}
34+
35+
const samples = this.Samples.utils;
36+
var color = Chart.helpers.color;
37+
var b = d3.randomNormal();
38+
var random = (min, max) => () => (b() * ((max || 1) - (min || 0))) + (min || 0);
39+
var boxplotData = {
40+
labels: samples.months({count: 2}),
41+
datasets: [{
42+
label: 'Dataset 1',
43+
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
44+
borderColor: window.chartColors.red,
45+
borderWidth: 1,
46+
data: randomValues(1, 0, 100)
47+
}]
48+
};
49+
50+
window.onload = function() {
51+
var ctx = document.getElementById("canvas").getContext("2d");
52+
window.myBar = new Chart(ctx, {
53+
type: 'violin',
54+
data: boxplotData,
55+
options: {
56+
responsive: true,
57+
legend: {
58+
position: 'top',
59+
},
60+
title: {
61+
display: true,
62+
text: 'Chart.js Violin Chart'
63+
},
64+
tooltipDecimals: 3
65+
}
66+
});
67+
68+
};
69+
70+
document.getElementById('randomizeData').addEventListener('click', function() {
71+
boxplotData.datasets.forEach(function(dataset) {
72+
dataset.data = samples.boxplots({count: 7});
73+
74+
});
75+
window.myBar.update();
76+
});
77+
78+
var colorNames = Object.keys(window.chartColors);
79+
document.getElementById('addDataset').addEventListener('click', function() {
80+
var colorName = colorNames[boxplotData.datasets.length % colorNames.length];
81+
var dsColor = window.chartColors[colorName];
82+
var newDataset = {
83+
label: 'Dataset ' + boxplotData.datasets.length,
84+
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
85+
borderColor: dsColor,
86+
borderWidth: 1,
87+
data: samples.boxplotsArray({count: boxplotData.labels.length})
88+
};
89+
90+
boxplotData.datasets.push(newDataset);
91+
window.myBar.update();
92+
});
93+
94+
document.getElementById('addData').addEventListener('click', function() {
95+
if (boxplotData.datasets.length > 0) {
96+
var month = samples.nextMonth(boxplotData.labels.length);
97+
boxplotData.labels.push(month);
98+
99+
for (var index = 0; index < boxplotData.datasets.length; ++index) {
100+
//window.myBar.addData(randomBoxPlot(), index);
101+
boxplotData.datasets[index].data.push(samples.numbers({count: 50}));
102+
}
103+
104+
window.myBar.update();
105+
}
106+
});
107+
108+
document.getElementById('removeDataset').addEventListener('click', function() {
109+
boxplotData.datasets.splice(0, 1);
110+
window.myBar.update();
111+
});
112+
113+
document.getElementById('removeData').addEventListener('click', function() {
114+
boxplotData.labels.splice(-1, 1); // remove the label first
115+
116+
boxplotData.datasets.forEach(function(dataset, datasetIndex) {
117+
dataset.data.pop();
118+
});
119+
120+
window.myBar.update();
121+
});
122+
</script>
123+
</body>
124+
125+
</html>

‎src/controllers/violin.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,20 @@ const controller = {
4646
const data = this.chart.data.datasets[datasetIndex].data[index];
4747
const violin = asViolinStats(data);
4848

49+
if ((!Array.isArray(data) && typeof data === 'number' && !Number.isNaN) || violin == null) {
50+
return {
51+
min: data,
52+
max: data,
53+
median: data,
54+
coords: [{v: data, estimate: Number.NEGATIVE_INFINITY}],
55+
maxEstimate: Number.NEGATIVE_INFINITY
56+
};
57+
}
58+
4959
const range = violin.max - violin.min;
5060
const samples = [];
5161
const inc = range / points;
52-
for (let v = violin.min; v <= violin.max; v += inc) {
62+
for (let v = violin.min; v <= violin.max && inc > 0; v += inc) {
5363
samples.push(v);
5464
}
5565
if (samples[samples.length - 1] !== violin.max) {

0 commit comments

Comments
 (0)