Added chart_arc_gauge.html as a sample/demo of functionality. Added c3.update function to update configurations in the demo.

11 years ago · 4841daacee
4 changed files with 168 additions and 2 deletions
--- a/c3.js
+++ b/c3.js
@ -4674,6 +4674,27 @@
            redraw({withUpdateXDomain: true});
        };

+        // For passing the configuration you want to update.
+        c3.update = function (keys, value) {
+            var target = config, i, isLast, nextTarget;
+
+            for (i = 0; i < keys.length; i++) {
+                isLast = (i === keys.length - 1);
+                nextTarget = target[keys[i]];
+                if (isLast) {
+                    if (target[keys[i]] === undefined) {
+                      target[keys[i]] = '';
+                    }
+                    target[keys[i]] = value;
+                } else {
+                    target = nextTarget;
+                }
+            }
+
+            // Don't have a way to set the __variables without regenerating.
+            return parent.c3.generate(config);
+        };
+
        c3.load = function (args) {
            // update xs if specified
            if (args.xs) {
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -44,7 +44,7 @@
              <h3>Specify Axis Min/Max Values</h3>
              <p>You can specify your own min/max values for each axis.</p>
              <p><a class="btn btn-default" href="./samples/axes_minmax.html" role="button">View details &raquo;</a></p>
-            </div>            
+            </div>
          </div>
        </div>
      </div>
@ -108,6 +108,11 @@
              <p>Display as Bar Chart</p>
              <p><a class="btn btn-default" href="./samples/chart_combination.html" role="button">View details &raquo;</a></p>
            </div>
+            <div class="col-md-4">
+              <h3>Arc Gauge</h3>
+              <p>Display as Arc Gauge</p>
+              <p><a class="btn btn-default" href="./samples/chart_arc_gauge.html" role="button">View details &raquo;</a></p>
+            </div>
          </div>
        </div>
      </div>
--- a/htdocs/samples/chart_arc_gauge.html
+++ b/htdocs/samples/chart_arc_gauge.html
@ -0,0 +1,140 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+      var chart = c3.generate({
+        data: {
+          columns: [
+            [ '%', 91.4 ]
+          ],
+          type: 'gauge'
+        },
+        gauge: {
+    //      color: '', // default value is #e0e0e0 (gray). "color: '', " removes background color (transparent).
+          label: {
+            format: function(value, ratio) {
+              return value;
+            },
+    //        show: false // to turn off the min/max labels.
+          },
+          min: 0,//can handle negative min e.g. vacuum / voltage / current flow / rate of change
+          max: 100,
+          style: 'arc', // Only style currently.
+          units: ' %',
+    //      width: 39 // for adjusting arc thickness
+        },
+        legend: {
+          show: false
+        },
+        size: {
+          height: 240,
+          width: 240
+        },
+        color: {
+          pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values.
+          values: ['percentage', 30, 60, 90] // alternate first value is 'value'
+        }
+      });
+
+      var cycleDemo = function () {
+        setTimeout(function () {
+            chart = chart.update(['gauge', 'color'], '');
+        }, 2000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 0 ]]
+            });
+        }, 4000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 50 ]]
+            });
+        }, 5000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 91.4 ]]
+            });
+        }, 6000);
+
+        setTimeout(function () {
+            chart = chart.update(['gauge', 'color'], '#e0e0e0');
+        }, 8000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 0 ]]
+            });
+        }, 10000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 50 ]]
+            });
+        }, 11000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 91.4 ]]
+            });
+        }, 12000);
+
+        setTimeout(function () {
+            chart = chart.update(['gauge', 'width'], 10);
+        }, 14000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 0 ]]
+            });
+        }, 16000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 50 ]]
+            });
+        }, 15000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 91.4 ]]
+            });
+        }, 18000);
+
+        setTimeout(function () {
+            chart = chart.update(['gauge', 'width'], 39);
+        }, 20000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 0 ]]
+            });
+        }, 22000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 50 ]]
+            });
+        }, 23000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 91.4 ]]
+            });
+        }, 24000);
+      }
+
+      cycleDemo();
+
+      setInterval(cycleDemo, 30000);
+    </script>
+  </body>
+</html>