add hybrid example and add fallback for computing limits

sgratzl · sgratzl · commit 911bb8d7c85c · 2019-06-30T16:22:12.000+10:00
diff --git a/samples/hybrid.html b/samples/hybrid.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Box Plot Chart</title>
+  <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
+  <script src="../build/Chart.BoxPlot.js" type="text/javascript"></script>
+  <script src="./utils.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>
+    const samples = this.Samples.utils;
+    var data = {
+      labels: samples.months({count: 7}),
+      datasets: [{
+        label: 'Box',
+        type: 'boxplot',
+        backgroundColor: 'steelblue',
+        data: samples.boxplots({count: 7})
+      }, {
+        label: 'Bar',
+        type: 'bar',
+        backgroundColor: 'red',
+        data: samples.numbers({count: 7, max: 150})
+      }, {
+        label: 'Line',
+        type: 'line',
+        data: samples.numbers({count: 7, max: 150}).map((d) => ({y: d}))
+      }]
+    };
+
+    window.onload = function() {
+      var ctx = document.getElementById("canvas").getContext("2d");
+      window.myBar = new Chart(ctx, {
+        type: 'boxplot',
+        data: data,
+        options: {
+          responsive: true,
+          legend: {
+            position: 'top',
+          },
+          title: {
+            display: true,
+            text: 'Chart.js Box Plot and Line Chart'
+          },
+          scales: {
+            yAxes: [{
+              type: 'arrayLinear'
+            }]
+          }
+        }
+      });
+    };
+  </script>
+</body>
+
+</html>
diff --git a/src/data.js b/src/data.js
@@ -184,20 +184,32 @@ export function commonDataLimits(extraCallback) {
       return;
     }
     d.data.forEach((value, j) => {
-      if (!value || meta.data[j].hidden) {
+      if (value == null || meta.data[j].hidden) {
         return;
       }
+
       const stats = asValueStats(value, minStats, maxStats);
-      if (!stats) {
-        return;
+      let minValue;
+      let maxValue;
+
+      if (stats) {
+        minValue = stats[minStats];
+        maxValue = stats[maxStats];
+      } else {
+        // if stats are not available use the plain value
+        const parsed = +this.getRightValue(value);
+        if (isNaN(parsed)) {
+          return;
+        }
+        minValue = maxValue = parsed;
       }
 
-      if (this.min === null || stats[minStats] < this.min) {
-        this.min = stats[minStats];
+      if (this.min === null || minValue < this.min) {
+        this.min = minValue;
       }
 
-      if (this.max === null || stats[maxStats] > this.max) {
-        this.max = stats[maxStats];
+      if (this.max === null || maxValue > this.max) {
+        this.max = maxValue;
       }
 
       if (extraCallback) {
