Support json as input - #236

11 years ago · de32240824
3 changed files with 38 additions and 6 deletions
--- a/c3.js
+++ b/c3.js
@ -1453,6 +1453,13 @@
            }
            return x;
        }
+        function convertJsonToData(json) {
+            var keys = Object.keys(json), new_rows = [];
+            keys.forEach(function (key) {
+                new_rows.push([key].concat(json[key]));
+            });
+            return convertColumnsToData(new_rows);
+        }
        function convertRowsToData(rows) {
            var keys = rows[0], new_row = {}, new_rows = [], i, j;
            for (i = 1; i < rows.length; i++) {
@ -5054,7 +5061,7 @@

        /*-- Load data and init chart with defined functions --*/

-        if ('url' in config.data) {
+        if (config.data.url) {
            d3.xhr(config.data.url, function (error, data) {
                // TODO: other mine/type
                var rows = d3.csv.parseRows(data.response), d;
@ -5069,10 +5076,13 @@
                init(d);
            });
        }
-        else if ('rows' in config.data) {
+        else if (config.data.json) {
+            init(convertJsonToData(config.data.json));
+        }
+        else if (config.data.rows) {
            init(convertRowsToData(config.data.rows));
        }
-        else if ('columns' in config.data) {
+        else if (config.data.columns) {
            init(convertColumnsToData(config.data.columns));
        }
        else {
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/data_json.html
+++ b/htdocs/samples/data_json.html
@ -0,0 +1,22 @@
+<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: {
+          json: {
+            data1: [30, 20, 50, 40, 60, 50],
+            data2: [200, 130, 90, 240, 130, 220],
+            data3: [300, 200, 160, 400, 250, 250]
+          }
+        }
+      });
+    </script>
+  </body>
+</html>