Fix load API with JSON - #379

11 years ago · ba9970240d
4 changed files with 44 additions and 28 deletions
--- a/c3.js
+++ b/c3.js
@ -1494,6 +1494,18 @@
            }
            return x;
        }
+        function convertUrlToData(url, mimeType, keys, done) {
+            var type = mimeType ? mimeType : 'csv';
+            d3.xhr(url, function (error, data) {
+                var d;
+                if (type === 'json') {
+                    d = convertJsonToData(JSON.parse(data.response), keys);
+                } else {
+                    d = convertCsvToData(data.response);
+                }
+                done(d);
+            });
+        }
        function convertCsvToData(csv) {
            var rows = d3.csv.parseRows(csv), d;
            if (rows.length === 1) {
@ -4457,7 +4469,7 @@
                load(convertDataToTargets(args.data), args);
            }
            else if (args.url) {
-                d3.csv(args.url, function (error, data) {
+                convertUrlToData(args.url, args.mimeType, args.keys, function (data) {
                    load(convertDataToTargets(data), args);
                });
            }
@ -5296,21 +5308,8 @@

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

-        function initWithUrl(args) {
-            var type = args.mimeType ? args.mimeType : 'csv';
-            d3.xhr(args.url, function (error, data) {
-                var d;
-                if (type === 'json') {
-                    d = convertJsonToData(JSON.parse(data.response), args.keys);
-                } else {
-                    d = convertCsvToData(data.response);
-                }
-                init(d);
-            });
-        }
-
        if (config.data.url) {
-            initWithUrl(config.data);
+            convertUrlToData(config.data.url, config.data.mimeType, config.data.keys, init);
        }
        else if (config.data.json) {
            init(convertJsonToData(config.data.json, config.data.keys));
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/data/c3_test_2.json
+++ b/htdocs/data/c3_test_2.json
@ -0,0 +1,5 @@
+{
+  "data1": [20, 40, 70, 50, 80, 30],
+  "data2": [180, 150, 200, 170, 220, 400],
+  "data3": [1200, 1210, 1250, 1300, 1280, 1000]
+}
--- a/htdocs/samples/data_url.html
+++ b/htdocs/samples/data_url.html
@ -3,27 +3,39 @@
    <link href="/css/c3.css" rel="stylesheet" type="text/css">
  </head>
  <body>
-    <div id="chart1"></div>
-    <div id="chart2"></div>
+    <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 chart1 = c3.generate({
-        bindto: '#chart1',
+      var chart = c3.generate({
        data: {
          url: '/data/c3_test.csv'
        }
      });

-      var chart2 = c3.generate({
-        bindto: '#chart2',
-        data: {
-          url: '/data/c3_test.json',
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test2.csv',
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart = c3.generate({
+          data: {
+            url: '/data/c3_test.json',
+            mimeType: 'json'
+          }
+        });
+      }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          url: '/data/c3_test_2.json',
          mimeType: 'json'
-        }
-      });
+        });
+      }, 3000);

    </script>
  </body>