Merge branch 'deviceWISE-master'

8ed588a3 · Masayuki Tanaka · e6919a01 · 9a61819b · 8ed588a3 · 8ed588a3
Commit 8ed588a3 authored May 23, 2014 by Masayuki Tanaka
Showing with 168 additions and 2 deletions

c3.css c3.css +25 -1

c3.js c3.js +0 -0

c3.min.js c3.min.js +0 -0

index.html htdocs/index.html +6 -1

chart_arc_gauge.html htdocs/samples/chart_arc_gauge.html +137 -0

No files found.
--- a/c3.css
+++ b/c3.css
@@ -84,6 +84,9 @@

 /*-- Bar --*/

+.c3-bar {
+  stroke-width: 0;
+}
 .c3-bar._expanded_ {
  fill-opacity: 0.75;
 }
@@ -96,7 +99,7 @@

 /*-- Focus --*/

-.c3-target.c3-focused path.c3-line {
+.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  stroke-width: 2px;
 }

@@ -166,3 +169,23 @@
  stroke-width: 0;
  opacity: 0.2;
 }
+
+.c3-chart-arcs .c3-chart-arcs-background {
+  fill: #e0e0e0;
+  stroke: none;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-unit {
+  fill: #000;
+  font-size: 16px;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-max {
+  fill: #777;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-min {
+  fill: #777;
+}
+
+.c3-chart-arc .c3-gauge-value {
+  fill: #000;
+  font-size: 28px;
+}
\ No newline at end of file
--- a/c3.js
+++ b/c3.js
--- 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
+<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: [
+            [ 'data', 91.4 ]
+          ],
+          type: 'gauge'
+        },
+        gauge: {
+          label: {
+//            format: function(value, ratio) {
+//              return value;
+//            },
+//          show: false // to turn off the min/max labels.
+          },
+//          min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
+//          max: 100, // 100 is default
+//          units: ' %',
+//          width: 39 // for adjusting arc thickness
+        },
+        color: {
+          pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values.
+          threshold: {
+//            unit: 'value', // percentage is default
+//            max: 200, // 100 is default
+            values: [30, 60, 90] // alternate first value is 'value'
+          }
+        }
+      });
+
+      var cycleDemo = function () {
+
+        setTimeout(function () {
+            chart = chart.update(['gauge', 'color'], '');
+        }, 1000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ 'data', 10 ]]
+            });
+        }, 2000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 50 ]]
+            });
+        }, 3000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 91.4 ]]
+            });
+        }, 4000);
+
+//        setTimeout(function () {
+//            chart = chart.update(['gauge', 'color'], '#e0e0e0');
+//        }, 5000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 0 ]]
+            });
+        }, 6000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 50 ]]
+            });
+        }, 7000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 91.4 ]]
+            });
+        }, 8000);
+
+//        setTimeout(function () {
+//            chart = chart.update(['gauge', 'width'], 10);
+//        }, 9000);
+
+        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'], 39);
+//        }, 13000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 0 ]]
+            });
+        }, 14000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 50 ]]
+            });
+        }, 15000);
+
+        setTimeout(function () {
+            chart.load({
+              columns: [[ '%', 91.4 ]]
+            });
+        }, 16000);
+
+      }
+
+      cycleDemo();
+
+//      setInterval(cycleDemo, 30000);
+    </script>
+  </body>
+</html>