Merge branch 'abryzak-master'

c3.js

@@ -143,6 +143,7 @@
         var __data_x = getConfig(['data', 'x']),
             __data_xs = getConfig(['data', 'xs'], {}),
             __data_x_format = getConfig(['data', 'x_format'], '%Y-%m-%d'),
+            __data_x_localtime = getConfig(['data', 'x_localtime'], true),
             __data_id_converter = getConfig(['data', 'id_converter'], function (id) { return id; }),
             __data_names = getConfig(['data', 'names'], {}),
             __data_classes = getConfig(['data', 'classes'], {}),
@@ -346,8 +347,9 @@
             color = generateColor(__data_colors, notEmpty(__color_pattern) ? __color_pattern : defaultColorPattern, __data_color),
             levelColor = notEmpty(__color_threshold) ? generateLevelColor(__color_pattern, __color_threshold) : null;
 
-        var timeFormat = __axis_x_localtime ? d3.time.format : d3.time.format.utc,
-            defaultTimeFormat = timeFormat.multi([
+        var dataTimeFormat = __data_x_localtime ? d3.time.format : d3.time.format.utc,
+            axisTimeFormat = __axis_x_localtime ? d3.time.format : d3.time.format.utc,
+            defaultAxisTimeFormat = axisTimeFormat.multi([
                 [".%L", function (d) { return d.getMilliseconds(); }],
                 [":%S", function (d) { return d.getSeconds(); }],
                 ["%I:%M", function (d) { return d.getMinutes(); }],
@@ -808,13 +810,13 @@
             return id in __data_axes ? __data_axes[id] : 'y';
         }
         function getXAxisTickFormat() {
-            var format = isTimeSeries ? defaultTimeFormat : isCategorized ? categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; };
+            var format = isTimeSeries ? defaultAxisTimeFormat : isCategorized ? categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; };
             if (__axis_x_tick_format) {
                 if (typeof __axis_x_tick_format === 'function') {
                     format = __axis_x_tick_format;
                 } else if (isTimeSeries) {
                     format = function (date) {
-                        return date ? timeFormat(__axis_x_tick_format)(date) : "";
+                        return date ? axisTimeFormat(__axis_x_tick_format)(date) : "";
                     };
                 }
             }
@@ -2331,12 +2333,13 @@
             var parsedDate;
             if (date instanceof Date) {
                 parsedDate = date;
+            } else if (typeof date === 'number') {
+                parsedDate = new Date(date);
             } else {
-                try {
-                    parsedDate = typeof date === 'number' ? new Date(date) : d3.time.format(__data_x_format).parse(date);
-                } catch (e) {
-                    window.console.error("Failed to parse x '" + date + "' to Date with format " + __data_x_format);
-                }
+                parsedDate = dataTimeFormat(__data_x_format).parse(date);
+            }
+            if (!parsedDate || isNaN(+parsedDate)) {
+                window.console.error("Failed to parse x '" + date + "' to Date object");
             }
             return parsedDate;
         }
@@ -2967,6 +2970,11 @@
                 .attr("text-anchor", "middle") // horizontal centering of text at x position in all browsers.
                 .attr("dominant-baseline", "middle"); // vertical centering of text at y position in all browsers, except IE.
 
+            // Regions
+            main.append('g')
+                .attr("clip-path", clipPath)
+                .attr("class", CLASS.regions);
+
             // Grids
             grid = main.append('g')
                 .attr("clip-path", clipPath)
@@ -2990,11 +2998,6 @@
             }
             grid.append('g').attr('class', CLASS.ygridLines);
 
-            // Regions
-            main.append('g')
-                .attr("clip-path", clipPath)
-                .attr("class", CLASS.regions);
-
             // Define g for chart area
             main.append('g')
                 .attr("clip-path", clipPath)
@@ -3058,7 +3061,7 @@
                 .attr("class", CLASS.chartTexts);
 
             // if zoom privileged, insert rect to forefront
-            main.insert('rect', __zoom_privileged ? null : 'g.' + CLASS.grid)
+            main.insert('rect', __zoom_privileged ? null : 'g.' + CLASS.regions)
                 .attr('class', CLASS.zoomRect)
                 .attr('width', width)
                 .attr('height', height)

htdocs/samples/axes_x_localtime.html

@@ -0,0 +1,137 @@
+<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 data, axis_x_localtime;
+
+      var data1 = {
+          x : 'date',
+          columns: [
+            ['date', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+      };
+
+      var data2 = {
+          x : 'date',
+          columns: [
+            ['date', 1356966000000, 1357052400000, 1357138800000, 1357225200000, 1357311600000],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+      };
+
+      var data3 = {
+          x : 'date',
+          columns: [
+            ['date', new Date(1356966000000), new Date(1357052400000), new Date(1357138800000), new Date(1357225200000), new Date(1357311600000)],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+      };
+
+      var data4 = {
+          x : 'date',
+          x_format : '%Y%m%d',
+          columns: [
+            ['date', '20130101', '20130102', '20130103', '20130104', '20130105'],
+            ['sample', 1030, 1200, 1100, 1400, 1150],
+            ['sample2', 130, 300, 200, 450, 250]
+          ]
+      };
+
+      var data5 = {
+          x : 'date',
+          x_format : '%Y%m%d %H:%M:%S',
+          columns: [
+            ['date', '20130101 00:00:00', '20130102 00:00:00', '20130103 00:00:00', '20130104 00:00:00', '20130105 00:00:00'],
+            ['sample', 30, 200, 100, 400, 150],
+            ['sample2', 1130, 1300, 1200, 1450, 1250]
+          ]
+      };
+
+      var generate = function () { return c3.generate({
+        bindto: '#chart',
+        data: data,
+        axis : {
+          x : {
+            type : 'timeseries',
+            tick : {
+              format : "%Y-%m-%d %H:%M:%S" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+            },
+            localtime: axis_x_localtime
+          }
+        }
+      }); };
+
+      setTimeout(function () {
+        data = data1;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 1000);
+
+      setTimeout(function () {
+        data = data1;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 2000);
+
+      setTimeout(function () {
+        data = data2;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 3000);
+
+      setTimeout(function () {
+        data = data2;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 4000);
+
+      setTimeout(function () {
+        data = data3;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 5000);
+
+      setTimeout(function () {
+        data = data3;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 6000);
+
+      setTimeout(function () {
+        data = data4;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 7000);
+
+      setTimeout(function () {
+        data = data4;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 8000);
+
+      setTimeout(function () {
+        data = data5;
+        axis_x_localtime = true;
+        chart = generate();
+      }, 9000);
+
+      setTimeout(function () {
+        data = data5;
+        axis_x_localtime = false;
+        chart = generate();
+      }, 10000);
+
+    </script>
+  </body>
+</html>