Refactor gauge and fix init transition - #254

c3.css

@@ -169,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

htdocs/samples/chart_arc_gauge.html

@@ -11,30 +11,21 @@
       var chart = c3.generate({
         data: {
           columns: [
-            [ '%', 91.4 ]
+            [ 'data', 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.
+//            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
+//          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.
@@ -47,98 +38,100 @@
       });
 
       var cycleDemo = function () {
+
         setTimeout(function () {
             chart = chart.update(['gauge', 'color'], '');
-        }, 2000);
+        }, 1000);
 
         setTimeout(function () {
             chart.load({
-              columns: [[ '%', 0 ]]
+              columns: [[ 'data', 10 ]]
             });
-        }, 4000);
+        }, 2000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 50 ]]
             });
-        }, 5000);
+        }, 3000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 91.4 ]]
             });
-        }, 6000);
+        }, 4000);
 
-        setTimeout(function () {
-            chart = chart.update(['gauge', 'color'], '#e0e0e0');
-        }, 8000);
+//        setTimeout(function () {
+//            chart = chart.update(['gauge', 'color'], '#e0e0e0');
+//        }, 5000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 0 ]]
             });
-        }, 10000);
+        }, 6000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 50 ]]
             });
-        }, 11000);
+        }, 7000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 91.4 ]]
             });
-        }, 12000);
+        }, 8000);
 
-        setTimeout(function () {
-            chart = chart.update(['gauge', 'width'], 10);
-        }, 14000);
+//        setTimeout(function () {
+//            chart = chart.update(['gauge', 'width'], 10);
+//        }, 9000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 0 ]]
             });
-        }, 16000);
+        }, 10000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 50 ]]
             });
-        }, 15000);
+        }, 11000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 91.4 ]]
             });
-        }, 18000);
+        }, 12000);
 
-        setTimeout(function () {
-            chart = chart.update(['gauge', 'width'], 39);
-        }, 20000);
+//        setTimeout(function () {
+//            chart = chart.update(['gauge', 'width'], 39);
+//        }, 13000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 0 ]]
             });
-        }, 22000);
+        }, 14000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 50 ]]
             });
-        }, 23000);
+        }, 15000);
 
         setTimeout(function () {
             chart.load({
               columns: [[ '%', 91.4 ]]
             });
-        }, 24000);
+        }, 16000);
+
       }
 
       cycleDemo();
 
-      setInterval(cycleDemo, 30000);
+//      setInterval(cycleDemo, 30000);
     </script>
   </body>
 </html>