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

11 years ago · deefa5cdfb
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>