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

Commit 41786de

Browse files
sgratzlsgratzl
authored
Merge pull request #3 from datavisyn/develop
update
2 parents 74282b2 + 46a48ee commit 41786de

9 files changed

Lines changed: 300 additions & 38 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@ jspm_packages
4343
.idea
4444

4545
/build
46+
/.vscode

‎README.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,19 @@ Find more [Samples](https://github.com/datavisyn/chartjs-plugin-error-bars/tree/
6565
* stroke color
6666
* @default: derived from borderColor
6767
*/
68-
color: '#666'
68+
color: '#666',
6969

7070
/**
71-
* bar width in pixel as number or string or bar width in percent based on the barchart bars width (max 100%)
72-
* @default 10
73-
*/
74-
width: 10 | '10px' | '60%'
71+
* bar width in pixel as number or string or bar width in percent based on the barchart bars width (max 100%)
72+
* @default 10
73+
*/
74+
width: 10 | '10px' | '60%',
75+
76+
/**
77+
* whether to interpet the plus/minus values, relative to the value itself (default) or absolute
78+
* @default false
79+
*/
80+
absoluteValues: false
7581
}
7682
}
7783

‎samples/absolute.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Vertical Bar</title>
6+
<script src="../node_modules/chart.js/dist/Chart.bundle.js" type></script>
7+
<script src="../build/Plugin.Errorbars.js"></script>
8+
<style>
9+
canvas {
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div id="container" style="width: 75%;">
19+
<canvas id="canvas"></canvas>
20+
</div>
21+
<script>
22+
var color = Chart.helpers.color;
23+
var barChartData = {
24+
labels: ['Value', 'Value 2', 'Value 3', 'Value 4'],
25+
datasets: [{
26+
label: 'Dataset 1',
27+
//backgroundColor: '#d95f02',
28+
borderColor: '#d95f02',
29+
borderWidth: 1,
30+
data: [
31+
50,
32+
100,
33+
130,
34+
0
35+
],
36+
errorBars: {
37+
'Value': {plus: 80, minus: 20},
38+
'Value 2': {plus: 120, minus: 80}
39+
}
40+
}]
41+
42+
};
43+
44+
window.onload = function () {
45+
var ctx = document.getElementById("canvas").getContext("2d");
46+
window.myBar = new Chart(ctx, {
47+
type: 'bar',
48+
data: barChartData,
49+
options: {
50+
responsive: true,
51+
scales: {
52+
yAxes: [{
53+
ticks: {
54+
beginAtZero: true
55+
}
56+
}]
57+
},
58+
legend: {
59+
position: 'top',
60+
},
61+
title: {
62+
display: true,
63+
text: 'Chart.js Error Bars Plugin'
64+
},
65+
plugins: {
66+
chartJsPluginErrorBars: {
67+
width: '60%',
68+
absoluteValues: true
69+
//color: 'darkgray'
70+
}
71+
}
72+
},
73+
});
74+
};
75+
</script>
76+
</body>
77+
78+
</html>

‎samples/horizontal-simple.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Vertical Bar</title>
6+
<script src="../node_modules/chart.js/dist/Chart.bundle.js" type></script>
7+
<script src="../build/Plugin.Errorbars.js"></script>
8+
<style>
9+
canvas {
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div id="container" style="width: 75%;">
19+
<canvas id="canvas"></canvas>
20+
</div>
21+
<script>
22+
var color = Chart.helpers.color;
23+
var barChartData = {
24+
labels: ['Value', 'Value 2', 'Value 3', 'Value 4'],
25+
datasets: [{
26+
label: 'Dataset 1',
27+
//backgroundColor: '#d95f02',
28+
borderColor: '#d95f02',
29+
borderWidth: 1,
30+
data: [
31+
50,
32+
100,
33+
130,
34+
0
35+
],
36+
errorBars: {
37+
'Value': {plus: 20, minus: -30},
38+
'Value 2': {plus: 20, minus: -30}
39+
}
40+
}]
41+
42+
};
43+
44+
window.onload = function () {
45+
var ctx = document.getElementById("canvas").getContext("2d");
46+
window.myBar = new Chart(ctx, {
47+
type: 'horizontalBar',
48+
data: barChartData,
49+
options: {
50+
responsive: true,
51+
scales: {
52+
yAxes: [{
53+
ticks: {
54+
beginAtZero: true
55+
}
56+
}]
57+
},
58+
legend: {
59+
position: 'top',
60+
},
61+
title: {
62+
display: true,
63+
text: 'Chart.js Error Bars Plugin'
64+
},
65+
plugins: {
66+
chartJsPluginErrorBars: {
67+
width: '60%',
68+
//color: 'darkgray'
69+
}
70+
}
71+
},
72+
});
73+
};
74+
</script>
75+
</body>
76+
77+
</html>

‎samples/horizontal-tree.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@
6666
11
6767
],
6868
errorBars: {
69-
'A': {plus: 25, minus: -2},
70-
'C1.2': {plus: 14, minus: -4}
69+
'A': {plus: 1, minus: 0.5},
70+
'C1.2': {plus: 1.5, minus: -3}
7171
},
7272
}]
7373
};
@@ -106,6 +106,11 @@
106106
offsetGridLines: true
107107
}
108108
}]
109+
},
110+
plugins: {
111+
chartJsPluginErrorBars: {
112+
color: '#999'
113+
}
109114
}
110115
}
111116
});

‎samples/simple-bar.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@
2929
borderColor: '#d95f02',
3030
borderWidth: 1,
3131
data: [
32-
56,
32+
60,
3333
33,
3434
78,
3535
54
3636
],
3737
errorBars: {
38-
'January': {plus: 15, minus: -34},
38+
'January': {plus: 10, minus: -10},
3939
'February': {plus: 15, minus: -3},
4040
'March': {plus: 35, minus: -14},
4141
'April': {plus: 45, minus: -4}
@@ -68,6 +68,13 @@
6868
data: barChartData,
6969
options: {
7070
responsive: true,
71+
scales: {
72+
yAxes: [{
73+
ticks: {
74+
beginAtZero: true
75+
}
76+
}]
77+
},
7178
legend: {
7279
position: 'top',
7380
},

‎samples/simple.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Vertical Bar</title>
6+
<script src="../node_modules/chart.js/dist/Chart.bundle.js" type></script>
7+
<script src="../build/Plugin.Errorbars.js"></script>
8+
<style>
9+
canvas {
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div id="container" style="width: 75%;">
19+
<canvas id="canvas"></canvas>
20+
</div>
21+
<script>
22+
var color = Chart.helpers.color;
23+
var barChartData = {
24+
labels: ['Value', 'Value 2', 'Value 3', 'Value 4'],
25+
datasets: [{
26+
label: 'Dataset 1',
27+
//backgroundColor: '#d95f02',
28+
borderColor: '#d95f02',
29+
borderWidth: 1,
30+
data: [
31+
50,
32+
100,
33+
130,
34+
0
35+
],
36+
errorBars: {
37+
'Value': {plus: 20, minus: -30},
38+
'Value 2': {plus: 20, minus: -30}
39+
}
40+
}]
41+
42+
};
43+
44+
window.onload = function () {
45+
var ctx = document.getElementById("canvas").getContext("2d");
46+
window.myBar = new Chart(ctx, {
47+
type: 'bar',
48+
data: barChartData,
49+
options: {
50+
responsive: true,
51+
legend: {
52+
position: 'top',
53+
},
54+
title: {
55+
display: true,
56+
text: 'Chart.js Error Bars Plugin'
57+
},
58+
plugins: {
59+
chartJsPluginErrorBars: {
60+
width: '60%',
61+
//color: 'darkgray'
62+
}
63+
}
64+
},
65+
});
66+
};
67+
</script>
68+
</body>
69+
70+
</html>

‎samples/vertical-tree.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@
6767
11
6868
],
6969
errorBars: {
70-
'A': {plus: 25, minus: -10},
71-
'C1.2': {plus: 14, minus: -15},
72-
'C1': {plus: 34, minus: -5}
70+
'A': {plus: 0.7, minus: -0.5},
71+
'C1.2': {plus: 1.5, minus: -4},
72+
'C1': {plus: 2, minus: -3.2}
7373
},
7474
}]
7575
};

0 commit comments

Comments
 (0)