Add sample for gauge and step - #254

11 years ago · a76e3b332d
3 changed files with 135 additions and 0 deletions
--- a/htdocs/samples/chart_gauge.html
+++ b/htdocs/samples/chart_gauge.html
@ -0,0 +1,48 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.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 gauge_fuellevel = c3.generate({
+    data: {
+      columns: [
+        [ '%', 81.4 ] 
+      ],
+      type: 'gauge'
+    },
+    gauge: {
+//      color: '', // default value is a grey. "color: '', " is no background.
+      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'
+    }
+  });
+
+    </script>
+  </body>
+</html>
--- a/htdocs/samples/chart_step.html
+++ b/htdocs/samples/chart_step.html
@ -0,0 +1,37 @@
+<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: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+//            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          types: {
+            data1: 'step',
+            data2: 'area-step'
+          }
+        },
+        subchart: {
+          show: true
+        },
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ]
+        });
+      }, 1000);
+
+    </script>
+  </body>
+</html>
--- a/htdocs/samples/chart_step_category.html
+++ b/htdocs/samples/chart_step_category.html
@ -0,0 +1,50 @@
+<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: {
+          x: 'x',
+          columns: [
+            ['x', 'hogehoge', 'aaa', 'aaaaaa', 'a', 'b'],
+            ['data1', 300, 350, 300, 0, 0, 0],
+//            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          types: {
+            data1: 'step',
+            data2: 'area-step'
+          },
+          empty: {
+            abort: false,
+            label: {
+              text: 'hoge'
+            }
+          }
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        },
+        subchart: {
+          show: true
+        },
+      });
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ]
+        });
+      }, 1000);
+
+    </script>
+  </body>
+</html>