Fix min/max for Gauge chart - #536

10 years ago · ee9abc9298
4 changed files with 58 additions and 13 deletions
--- a/c3.js
+++ b/c3.js
@ -4174,7 +4174,8 @@

    c3_chart_internal_fn.updateAngle = function (d) {
        var $$ = this, config = $$.config,
-            found = false, index = 0;
+            found = false, index = 0,
+            gMin = config.gauge_min, gMax = config.gauge_max, gTic, gValue;
        $$.pie($$.filterTargetsToShow($$.data.targets)).forEach(function (t) {
            if (! found && t.data.id === d.data.id) {
                found = true;
@ -4187,11 +4188,10 @@
            d.endAngle = d.startAngle;
        }
        if ($$.isGaugeType(d.data)) {
-            var gMin = config.gauge_min, gMax = config.gauge_max,
-                gF = Math.abs(gMin) + gMax,
-                aTic = (Math.PI) / gF;
-            d.startAngle = (-1 * (Math.PI / 2)) + (aTic * Math.abs(gMin));
-            d.endAngle = d.startAngle + (aTic * ((d.value > gMax) ? gMax : d.value));
+            gTic = (Math.PI) / (gMax - gMin);
+            gValue = d.value < gMin ? 0 : d.value < gMax ? d.value - gMin : (gMax - gMin);
+            d.startAngle = -1 * (Math.PI / 2);
+            d.endAngle = d.startAngle + gTic * gValue;
        }
        return found ? d : null;
    };
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/chart_gauge.html
+++ b/htdocs/samples/chart_gauge.html
@ -4,6 +4,9 @@
  </head>
  <body>
    <div id="chart"></div>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+    <div id="chart3"></div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
@ -40,6 +43,48 @@
        }
      });

+      var chart1 = c3.generate({
+          bindto: '#chart1',
+          data: {
+              columns: [
+                  ['data', 75.0]
+              ],
+              type: 'gauge',
+          },
+          gauge: {
+              min: 50,
+              max: 100
+          }
+      });
+
+      var chart2 = c3.generate({
+          bindto: '#chart2',
+          data: {
+              columns: [
+                  ['data', 0.0]
+              ],
+              type: 'gauge',
+          },
+          gauge: {
+              min: -100,
+              max: 100
+          }
+      });
+
+      var chart3 = c3.generate({
+          bindto: '#chart3',
+          data: {
+              columns: [
+                  ['data', -75.0]
+              ],
+              type: 'gauge',
+          },
+          gauge: {
+              min: -100,
+              max: -50
+          }
+      });
+
      var cycleDemo = function () {

        setTimeout(function () {
--- a/src/arc.js
+++ b/src/arc.js
@ -26,7 +26,8 @@ c3_chart_internal_fn.updateArc = function () {

 c3_chart_internal_fn.updateAngle = function (d) {
    var $$ = this, config = $$.config,
-        found = false, index = 0;
+        found = false, index = 0,
+        gMin = config.gauge_min, gMax = config.gauge_max, gTic, gValue;
    $$.pie($$.filterTargetsToShow($$.data.targets)).forEach(function (t) {
        if (! found && t.data.id === d.data.id) {
            found = true;
@ -39,11 +40,10 @@ c3_chart_internal_fn.updateAngle = function (d) {
        d.endAngle = d.startAngle;
    }
    if ($$.isGaugeType(d.data)) {
-        var gMin = config.gauge_min, gMax = config.gauge_max,
-            gF = Math.abs(gMin) + gMax,
-            aTic = (Math.PI) / gF;
-        d.startAngle = (-1 * (Math.PI / 2)) + (aTic * Math.abs(gMin));
-        d.endAngle = d.startAngle + (aTic * ((d.value > gMax) ? gMax : d.value));
+        gTic = (Math.PI) / (gMax - gMin);
+        gValue = d.value < gMin ? 0 : d.value < gMax ? d.value - gMin : (gMax - gMin);
+        d.startAngle = -1 * (Math.PI / 2);
+        d.endAngle = d.startAngle + gTic * gValue;
    }
    return found ? d : null;
 };