initial support for C3 charting #193

nicolaskruchten · Feb 25, 2015 · 3cae6b0 · 3cae6b0
1 parent 600f3ea
commit 3cae6b0
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 21 deletions.
diff --git a/c3_renderers.coffee b/c3_renderers.coffee
@@ -9,7 +9,7 @@ callWithJQuery = (pivotModule) ->
 
 callWithJQuery ($) ->
 
-    makeGoogleChart = (chartType, extraOptions) -> (pivotData, opts) ->
+    makeC3Chart = (chartType) -> (pivotData, opts) ->
         defaults =
             localeStrings:
                 vs: "vs"
@@ -22,37 +22,35 @@ callWithJQuery ($) ->
         colKeys = pivotData.getColKeys()
         colKeys.push [] if colKeys.length == 0
 
-        headers = (h.join("-") for h in rowKeys)
-        headers.unshift ""
+        headers = (h.join("-") for h in colKeys)
 
-        numCharsInHAxis = 0
-        dataArray = [headers]
-        for colKey in colKeys
-            row = [colKey.join("-")]
-            numCharsInHAxis += row[0].length
-            for rowKey in rowKeys
+        columns = []
+        for rowKey in rowKeys
+            rowHeader = rowKey.join("-")
+            row = [if rowHeader == "" then pivotData.aggregatorName else rowHeader]
+            for colKey in colKeys
                 agg = pivotData.getAggregator(rowKey, colKey)
                 if agg.value()?
                     row.push agg.value()
                 else row.push null
-            dataArray.push row
-        console.log dataArray
+            columns.push row
 
         result = $("<div>")
-        c3.generate
-            title: "blah"
+        params = 
             bindto: result[0]
             size:
                 height: ($(window).height() / 1.4),
                 width: ($(window).width() / 1.4)
             axis: x: 
                 type: 'category',
-                categories: dataArray.pop()
-            data: columns: dataArray
+                categories: headers
+            data: 
+                columns: columns
+        if chartType?
+            params.data.type = chartType
+        c3.generate params
         return result
 
     $.pivotUtilities.c3_renderers = 
-        "Line Chart": makeGoogleChart("LineChart")
-        "Bar Chart": makeGoogleChart("ColumnChart")
-        "Stacked Bar Chart": makeGoogleChart("ColumnChart", isStacked: true)
-        "Area Chart": makeGoogleChart("AreaChart", isStacked: true)
+        "Line Chart C3": makeC3Chart()
+        "Bar Chart C3": makeC3Chart("bar")
diff --git a/dist/c3_renderers.js b/dist/c3_renderers.js
diff --git a/dist/c3_renderers.js.map b/dist/c3_renderers.js.map
diff --git a/dist/c3_renderers.min.js b/dist/c3_renderers.min.js
diff --git a/dist/c3_renderers.min.js.map b/dist/c3_renderers.min.js.map
diff --git a/examples/c3.html b/examples/c3.html
@@ -31,8 +31,8 @@
                                 return mp["Gender"] == "Male" ? 1 : -1;
                             }
                         },
-                        cols: [], rows: ["Province"],
-                        rendererName: "Line Chart"
+                        cols: ["Age Bin"], rows: ["Gender"],
+                        rendererName: "Line Chart C3"
                     });
                 });
              });

diff --git a/examples/index.html b/examples/index.html
@@ -35,6 +35,7 @@ <h3 align="center">Canadian Parliament 2012 Dataset <small>(<a href="mps.csv">CS
                 <li><a href="mps_export.html">pivotUI() with export renderers</a></li>
                 <li><a href="gchart.html">pivotUI() with Google Charts renderers</a></li>
                 <li><a href="d3.html">pivotUI() with D3 renderers</a></li>
+                <li><a href="c3.html">pivotUI() with C3 chart renderers</a></li>
                 <li><a href="fully_loaded.html">pivotUI() mobile-enabled and with all renderers</a></li>
             </ul>
         <h3 align="center">Bring your own dataset</h3>