Add category/categories API - #327

11 years ago · 5bc0f8c5b7
3 changed files with 63 additions and 1 deletions
--- a/c3.js
+++ b/c3.js
@ -5227,6 +5227,20 @@
            return __data_colors;
        };

+        c3.category = function (i, category) {
+            if (arguments.length > 1) {
+                __axis_x_categories[i] = category;
+                redraw();
+            }
+            return __axis_x_categories[i];
+        };
+        c3.categories = function (categories) {
+            if (!arguments.length) { return __axis_x_categories; }
+            __axis_x_categories = categories;
+            redraw();
+            return __axis_x_categories;
+        };
+
        c3.color = color;

        c3.x = function (x) {
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/api_category.html
+++ b/htdocs/samples/api_category.html
@ -0,0 +1,48 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+    <div id="message"></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', '1e-3', '1e-2', '1'],
+            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
+          ]
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        }
+      });
+
+      setTimeout(function () {
+        d3.select('#message').node().innerHTML = "chart.categories() =>" + chart.categories();
+      }, 1000);
+
+      setTimeout(function () {
+        chart.categories(['updated 1', 'updated 2', 'updated 3', 'updated 4']);
+        d3.select('#message').node().innerHTML = "";
+      }, 2000);
+
+      setTimeout(function () {
+        d3.select('#message').node().innerHTML = "chart.category(1) =>" + chart.category(1);
+      }, 3000);
+
+      setTimeout(function () {
+        chart.category(1, 'UPDATED 1');
+        d3.select('#message').node().innerHTML = "";
+      }, 4000);
+
+    </script>
+  </body>
+</html>