add simple examples

sgratzl · sgratzl · commit 87d92f4c6eb1 · 2018-08-16T13:04:44.000+02:00
diff --git a/README.md b/README.md
@@ -65,13 +65,19 @@ Find more [Samples](https://github.com/datavisyn/chartjs-plugin-error-bars/tree/
          * stroke color
          * @default: derived from borderColor
          */
-        color: '#666'
+        color: '#666',
 
         /**
-        * bar width in pixel as number or string or bar width in percent based on the barchart bars width (max 100%)
-        * @default 10
-        */
-        width: 10 | '10px' | '60%'
+         * bar width in pixel as number or string or bar width in percent based on the barchart bars width (max 100%)
+         * @default 10
+         */
+        width: 10 | '10px' | '60%',
+
+        /**
+         * whether to interpet the plus/minus values, relative to the value itself (default) or absolute
+         * @default false
+         */
+        absoluteValues: false
       }
     }
 
diff --git a/samples/absolute.html b/samples/absolute.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Vertical Bar</title>
+  <script src="../node_modules/chart.js/dist/Chart.bundle.js" type></script>
+  <script src="../build/Plugin.Errorbars.js"></script>
+  <style>
+    canvas {
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+    }
+  </style>
+</head>
+
+<body>
+<div id="container" style="width: 75%;">
+  <canvas id="canvas"></canvas>
+</div>
+<script>
+  var color = Chart.helpers.color;
+  var barChartData = {
+    labels: ['Value', 'Value 2', 'Value 3', 'Value 4'],
+    datasets: [{
+      label: 'Dataset 1',
+      //backgroundColor: '#d95f02',
+      borderColor: '#d95f02',
+      borderWidth: 1,
+      data: [
+        50,
+        100,
+        130,
+        0
+      ],
+      errorBars: {
+        'Value': {plus: 80, minus: 20},
+        'Value 2': {plus: 120, minus: 80}
+      }
+    }]
+
+  };
+
+  window.onload = function () {
+    var ctx = document.getElementById("canvas").getContext("2d");
+    window.myBar = new Chart(ctx, {
+      type: 'bar',
+      data: barChartData,
+      options: {
+        responsive: true,
+        legend: {
+          position: 'top',
+        },
+        title: {
+          display: true,
+          text: 'Chart.js Error Bars Plugin'
+        },
+        plugins: {
+          chartJsPluginErrorBars: {
+            width: '60%',
+            absoluteValues: true
+            //color: 'darkgray'
+          }
+        }
+      },
+    });
+  };
+</script>
+</body>
+
+</html>
diff --git a/samples/horizontal-simple.html b/samples/horizontal-simple.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Vertical Bar</title>
+  <script src="../node_modules/chart.js/dist/Chart.bundle.js" type></script>
+  <script src="../build/Plugin.Errorbars.js"></script>
+  <style>
+    canvas {
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+    }
+  </style>
+</head>
+
+<body>
+<div id="container" style="width: 75%;">
+  <canvas id="canvas"></canvas>
+</div>
+<script>
+  var color = Chart.helpers.color;
+  var barChartData = {
+    labels: ['Value', 'Value 2', 'Value 3', 'Value 4'],
+    datasets: [{
+      label: 'Dataset 1',
+      //backgroundColor: '#d95f02',
+      borderColor: '#d95f02',
+      borderWidth: 1,
+      data: [
+        50,
+        100,
+        130,
+        0
+      ],
+      errorBars: {
+        'Value': {plus: 20, minus: -30},
+        'Value 2': {plus: 20, minus: -30}
+      }
+    }]
+
+  };
+
+  window.onload = function () {
+    var ctx = document.getElementById("canvas").getContext("2d");
+    window.myBar = new Chart(ctx, {
+      type: 'horizontalBar',
+      data: barChartData,
+      options: {
+        responsive: true,
+        legend: {
+          position: 'top',
+        },
+        title: {
+          display: true,
+          text: 'Chart.js Error Bars Plugin'
+        },
+        plugins: {
+          chartJsPluginErrorBars: {
+            width: '60%',
+            //color: 'darkgray'
+          }
+        }
+      },
+    });
+  };
+</script>
+</body>
+
+</html>
