Fix conflict

c3.js

@@ -253,7 +253,8 @@
 
         // bar
         var __bar_width = getConfig(['bar', 'width']),
-            __bar_width_ratio = getConfig(['bar', 'width', 'ratio'], 0.6);
+            __bar_width_ratio = getConfig(['bar', 'width', 'ratio'], 0.6),
+            __bar_zerobased = getConfig(['bar', 'zerobased'], true);
 
         // pie
         var __pie_label_show = getConfig(['pie', 'label', 'show'], true),
@@ -700,7 +701,7 @@
             subYMin = __axis_rotated ? 0 : height2;
             subYMax = __axis_rotated ? width2 : 1;
             // update scales
-            x = getX(xMin, xMax, forInit ? undefined : x.domain(), function () { return xAxis.tickOffset(); });
+            x = getX(xMin, xMax, forInit ? undefined : x.orgDomain(), function () { return xAxis.tickOffset(); });
             y = getY(yMin, yMax, forInit ? undefined : y.domain());
             y2 = getY(yMin, yMax, forInit ? undefined : y2.domain());
             subX = getX(xMin, xMax, orgXDomain, function (d) { return d % 1 ? 0 : subXAxis.tickOffset(); });
@@ -750,11 +751,7 @@
                 scale[key] = _scale[key];
             }
             scale.orgDomain = function () {
-                var domain = _scale.domain();
-                if (orgXDomain && orgXDomain[0] === domain[0] && orgXDomain[1] < domain[1]) {
-                    domain[1] = orgXDomain[1];
-                }
-                return domain;
+                return _scale.domain();
             };
             // define custom domain() for categorized axis
             if (isCategorized) {
@@ -763,7 +760,6 @@
                         domain = this.orgDomain();
                         return [domain[0], domain[1] + 1];
                     }
-                    orgXDomain = domain;
                     _scale.domain(domain);
                     return scale;
                 };
@@ -975,12 +971,25 @@
             return textAnchorForAxisLabel(__axis_rotated, getY2AxisLabelPosition());
         }
         function getMaxTickWidth(id) {
-            var maxWidth = 0, axisClass = id === 'x' ? CLASS.axisX : id === 'y' ? CLASS.axisY : CLASS.axisY2;
+            var maxWidth = 0, targetsToShow, scale, axis;
             if (svg) {
-                svg.selectAll('.' + axisClass + ' .tick text').each(function () {
+                targetsToShow = filterTargetsToShow(c3.data.targets);
+                if (id === 'y') {
+                    scale = y.copy().domain(getYDomain(targetsToShow, 'y'));
+                    axis = getYAxis(scale, yOrient, __axis_y_tick_format, __axis_y_ticks);
+                } else if (id === 'y2') {
+                    scale = y2.copy().domain(getYDomain(targetsToShow, 'y2'));
+                    axis = getYAxis(scale, y2Orient, __axis_y2_tick_format, __axis_y2_ticks);
+                } else {
+                    scale = x.copy().domain(getXDomain(targetsToShow));
+                    axis = getXAxis(scale, xOrient, getXAxisTickFormat(), __axis_x_tick_values ? __axis_x_tick_values : xAxis.tickValues());
+                }
+                main.append("g").call(axis).each(function () {
+                    d3.select(this).selectAll('text').each(function () {
                         var box = this.getBoundingClientRect();
                         if (maxWidth < box.width) { maxWidth = box.width; }
                     });
+                }).remove();
             }
             currentMaxTickWidth = maxWidth <= 0 ? currentMaxTickWidth : maxWidth;
             return currentMaxTickWidth;
@@ -1250,6 +1259,7 @@
                 domainLength, padding, padding_top, padding_bottom,
                 center = axisId === 'y2' ? __axis_y2_center : __axis_y_center,
                 yDomainAbs, lengths, diff, ratio, isAllPositive, isAllNegative,
+                isZeroBased = (hasBarType(yTargets) && __bar_zerobased) || hasAreaType(yTargets),
                 showHorizontalDataLabel = hasDataLabel() && __axis_rotated,
                 showVerticalDataLabel = hasDataLabel() && !__axis_rotated;
             if (yTargets.length === 0) { // use current domain if target of axisId is none
@@ -1262,7 +1272,7 @@
             isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;
 
             // Bar/Area chart should be 0-based if all positive|negative
-            if (hasBarType(yTargets) || hasAreaType(yTargets)) {
+            if (isZeroBased) {
                 if (isAllPositive) { yDomainMin = 0; }
                 if (isAllNegative) { yDomainMax = 0; }
             }
@@ -1296,7 +1306,7 @@
                 padding_bottom = getAxisPadding(__axis_y2_padding, 'bottom', padding, domainLength);
             }
             // Bar/Area chart should be 0-based if all positive|negative
-            if (hasBarType(yTargets) || hasAreaType(yTargets)) {
+            if (isZeroBased) {
                 if (isAllPositive) { padding_bottom = yDomainMin; }
                 if (isAllNegative) { padding_top = -yDomainMax; }
             }
@@ -2292,6 +2302,7 @@
                 else {
                     if (ids.indexOf(id) < 0) { ids.push(id); }
                     color = pattern[ids.indexOf(id) % pattern.length];
+                    colors[id] = color;
                 }
                 return callback instanceof Function ? callback(color, d) : color;
             };
@@ -2946,7 +2957,7 @@
 
             // MEMO: call here to update legend box and tranlate for all
             // MEMO: translate will be upated by this, so transform not needed in updateLegend()
-            updateLegend(mapToIds(c3.data.targets), {withTransform: false, withTransitionForTransform: false});
+            updateLegend(mapToIds(c3.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false});
 
             /*-- Main Region --*/
 
@@ -3571,21 +3582,6 @@
             transitions.axisY2.call(y2Axis);
             transitions.axisSubX.call(subXAxis);
 
-            if (targetsToShow.length) {
-                // Update dimensions according to the width of ticks, etc
-                updateSizes();
-                updateScales();
-                updateSvgSize();
-                transformAll(true, transitions);
-                // x changes above, so need to update domain too
-                updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain);
-                // Update axis again because the length can be updated because of update of max tick width and generate tickOffset
-                transitions.axisX.call(xAxis);
-                transitions.axisSubX.call(subXAxis);
-                transitions.axisY.call(yAxis);
-                transitions.axisY2.call(y2Axis);
-            }
-
             // Update axis label
             updateAxisLabels(withTransition);
 
@@ -5116,7 +5112,7 @@
         c3.groups = function (groups) {
             if (isUndefined(groups)) { return __data_groups; }
             __data_groups = groups;
-            redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true});
+            redraw();
             return __data_groups;
         };
 

htdocs/index.html

@@ -313,6 +313,12 @@
                 Change radius of data point
               </a>
             </div>
+            <div class="col-md-4">
+              <h3>Bar</h3>
+              <a href="./samples/bar_zerobased.html">
+                Disable zero-based y domain
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -326,6 +332,9 @@
               <a href="./samples/zoom.html">
                 Enable zoom
               </a>
+              <a href="./samples/zoom.html">
+                Zoom on category axis
+              </a>
               <a href="./samples/zoom_reduction.html">
                 Zoom with reduction
               </a>
@@ -363,7 +372,7 @@
               </a>
             </div>
             <div class="col-md-4">
-              <h3>grid</h3>
+              <h3>Grid</h3>
               <a href="./samples/api_xgrid_lines.html">
                 Update x grid lines
               </a>
@@ -392,6 +401,14 @@
               </a>
             </div>
           </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Data</h3>
+              <a href="./samples/api_data_colors.html">
+                Update data color
+              </a>
+            </div>
+          </div>
         </div>
       </div>
 

htdocs/samples/api_data_colors.html

+<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 chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart.data.colors({data1: '#000'});
+      }, 1000);
+
+
+    </script>
+  </body>
+</html>

htdocs/samples/api_xgrid_lines.html

@@ -8,7 +8,10 @@
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
-      var chart = c3.generate({
+
+      var axis_rotated = false, axis_x_type = "";
+
+      var generate = function () { return c3.generate({
         bindto: '#chart',
         data: {
           columns: [
@@ -16,46 +19,106 @@
           ]
         },
         axis: {
-//          rotated: true,
+          rotated: axis_rotated,
+          x: {
+            type: axis_x_type
+          }
         },
         grid: {
           x: {
 //            lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
           }
         }
-      });
+      }); }, chart = generate();
 
-      setTimeout(function () {
+      var queue = [
+      function () {
         chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
-      }, 1000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids([{value: 2, text:'Label 2'}]);
-      }, 2000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
-      }, 3000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids.remove({value:2});
-      }, 4000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids.remove({class:'hoge'});
-      }, 5000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids.remove([{value: 1}, {value: 4}]);
-      }, 6000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
-      }, 7000);
-
-      setTimeout(function () {
+      },
+      function () {
+        chart.xgrids.remove();
+      },
+      function () {
+        axis_rotated = true;
+        chart = generate();
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids([{value: 2, text:'Label 2'}]);
+      },
+      function () {
+        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
+      },
+      function () {
+        chart.xgrids.remove({value:2});
+      },
+      function () {
+        chart.xgrids.remove({class:'hoge'});
+      },
+      function () {
+        chart.xgrids.remove([{value: 1}, {value: 4}]);
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids.remove();
+      },
+      function () {
+        axis_rotated = false;
+        axis_x_type = 'category';
+        chart = generate();
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids([{value: 2, text:'Label 2'}]);
+      },
+      function () {
+        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
+      },
+      function () {
+        chart.xgrids.remove({value:2});
+      },
+      function () {
+        chart.xgrids.remove({class:'hoge'});
+      },
+      function () {
+        chart.xgrids.remove([{value: 1}, {value: 4}]);
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
         chart.xgrids.remove();
-      }, 8000);
+      },
+      ];
+
+      var i = 0;
+      queue.forEach(function (f) {
+        setTimeout(f, 1000 * i++);
+      });
 
     </script>
   </body>

htdocs/samples/bar_zerobased.html

+<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', 1030, 1200, 1100, 1400, 1150, 1250],
+            ['data2', 2130, 2100, 2140, 2200, 2150, 1850]
+          ],
+          type: 'bar',
+        },
+        bar: {
+          zerobased: false
+        }
+      });
+    </script>
+  </body>
+</html>

htdocs/samples/chart_bar.html

@@ -11,8 +11,10 @@
       var chart = c3.generate({
         data: {
           columns: [
-            ['data1', 30, 200, 100, 400, 150, 250],
-            ['data2', 130, 100, 140, 200, 150, 50]
+            ['data1', 1030, 1200, 1100, 1400, 1150, 1250],
+            ['data2', 2130, 2100, 2140, 2200, 2150, 1850]
+//           ['data1', 30, 200, 100, 400, 150, 250],
+//           ['data2', 130, 100, 140, 200, 150, 50]
           ],
           type: 'bar',
           onclick: function (d, element) { console.log("onclick", d, element); },
@@ -27,7 +29,8 @@
         bar: {
           width: {
             ratio: 0.3
-          }
+          },
+          zerobased: false
         }
       });
     </script>

htdocs/samples/element.html

@@ -3,26 +3,35 @@
     <link rel="stylesheet" type="text/css" href="/css/c3.css">
   </head>
   <body>
-<!--    <div id="chart"></div>-->
+    <div id="chart1"></div>
+    <div id="chart2"></div>
 
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
-      var chart = c3.generate({
+
+      var chart1 = c3.generate({
         data: {
           columns: [
             ['sample', 30, 200, 100, null, 150, 250]
           ],
         },
-//        size: {
-//          width: 640,
-//          height: 320
-//        }
       });
 
-      setTimeout(function () {
-        document.body.appendChild(chart.element);
-      }, 1000);
+      var chart2 = c3.generate({
+        data: {
+          columns: [
+            ['sample', 30, 200, 100, null, 150, 250]
+          ],
+          type: 'bar'
+        }
+      });
+
+      document.getElementById('chart1').appendChild(chart1.element);
+
+      $('#chart2').append(chart2.element);
+
     </script>
   </body>
 </html>

htdocs/samples/grids.html

@@ -8,6 +8,7 @@
     <div id="chart3"></div>
     <div id="chart4"></div>
     <div id="chart5"></div>
+    <div id="chart6"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
@@ -85,6 +86,26 @@
         }
       });
 
+      c3.generate({
+        bindto: '#chart6',
+        data: {
+          columns: bigData
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        },
+        grid: {
+          x: {
+            show: true
+          },
+          y: {
+            show: true
+          }
+        }
+      });
+
     </script>
   </body>
 </html>

htdocs/samples/zoom_category.html

+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+    <button onclick="load()">Load</button>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            generateData(100)
+          ],
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        },
+        zoom: { enabled: true },
+        subchart: { show: true }
+      });
+
+      function load() {
+        chart.load({
+          columns: [
+            generateData(Math.random() * 1000)
+          ],
+        });
+      }
+
+      function generateData(n) {
+        var column = ['sample'];
+        for (var i = 0; i < n; i++) {
+          column.push(Math.random() * 500);
+        }
+        return column;
+      }
+
+    </script>
+  </body>
+</html>