Merge pull request #204 from epochjs/auto-draw

Closes #195; Charts auto-draw on construction.

dist/js/epoch.js

@@ -1746,6 +1746,7 @@ Epoch.Chart.Area = (function(superClass) {
       base.type = 'area';
     }
     Area.__super__.constructor.call(this, this.options);
+    this.draw();
   }
 
   Area.prototype.y = function() {
@@ -1858,6 +1859,7 @@ Epoch.Chart.Bar = (function(superClass) {
     }
     Bar.__super__.constructor.call(this, this.options);
     this.onAll(optionListeners);
+    this.draw();
   }
 
   Bar.prototype._isVertical = function() {
@@ -2050,6 +2052,9 @@ Epoch.Chart.Bar = (function(superClass) {
     if (dataKey == null) {
       dataKey = 'x';
     }
+    if (this.data[0] == null) {
+      return [];
+    }
     total = this.data[0].values.length;
     step = Math.ceil(total / numTicks) | 0;
     return tickValues = (function() {
@@ -2145,6 +2150,7 @@ Epoch.Chart.Histogram = (function(superClass) {
     this.options = options != null ? options : {};
     Histogram.__super__.constructor.call(this, this.options = Epoch.Util.defaults(this.options, defaults));
     this.onAll(optionListeners);
+    this.draw();
   }
 
   Histogram.prototype._prepareData = function(data) {
@@ -2229,6 +2235,7 @@ Epoch.Chart.Line = (function(superClass) {
       base.type = 'line';
     }
     Line.__super__.constructor.call(this, this.options);
+    this.draw();
   }
 
   Line.prototype.line = function(layer) {
@@ -2302,6 +2309,7 @@ Epoch.Chart.Pie = (function(superClass) {
     this.g = this.svg.append('g').attr("transform", "translate(" + (this.width / 2) + ", " + (this.height / 2) + ")");
     this.on('option:margin', 'marginChanged');
     this.on('option:inner', 'innerChanged');
+    this.draw();
   }
 
   Pie.prototype.draw = function() {
@@ -2364,6 +2372,7 @@ Epoch.Chart.Scatter = (function(superClass) {
     this.options = options != null ? options : {};
     Scatter.__super__.constructor.call(this, this.options = Epoch.Util.defaults(this.options, defaults));
     this.on('option:radius', 'radiusChanged');
+    this.draw();
   }
 
   Scatter.prototype.draw = function() {
@@ -3067,11 +3076,12 @@ Epoch.Time.Area = (function(superClass) {
       base.type = 'time.area';
     }
     Area.__super__.constructor.call(this, this.options);
+    this.draw();
   }
 
   Area.prototype.setStyles = function(layer) {
     var styles;
-    if (layer.className != null) {
+    if ((layer != null) && (layer.className != null)) {
       styles = this.getStyles("g." + (layer.className.replace(/\s/g, '.')) + " path.area");
     } else {
       styles = this.getStyles("g path.area");
@@ -3093,7 +3103,9 @@ Epoch.Time.Area = (function(superClass) {
     ref = [this.y(), this.w(), this.getVisibleLayers()], y = ref[0], w = ref[1], layers = ref[2];
     results = [];
     for (i = l = ref1 = layers.length - 1; ref1 <= 0 ? l <= 0 : l >= 0; i = ref1 <= 0 ? ++l : --l) {
-      layer = layers[i];
+      if (!(layer = layers[i])) {
+        continue;
+      }
       this.setStyles(layer);
       this.ctx.beginPath();
       ref2 = [this.options.windowSize, layer.values.length, this.inTransition()], j = ref2[0], k = ref2[1], trans = ref2[2];
@@ -3131,7 +3143,9 @@ Epoch.Time.Area = (function(superClass) {
     ref = [this.y(), this.w(), this.getVisibleLayers()], y = ref[0], w = ref[1], layers = ref[2];
     results = [];
     for (i = l = ref1 = layers.length - 1; ref1 <= 0 ? l <= 0 : l >= 0; i = ref1 <= 0 ? ++l : --l) {
-      layer = layers[i];
+      if (!(layer = layers[i])) {
+        continue;
+      }
       this.setStyles(layer);
       this.ctx.beginPath();
       ref2 = [this.options.windowSize, layer.values.length, this.inTransition()], i = ref2[0], k = ref2[1], trans = ref2[2];
@@ -3180,6 +3194,7 @@ Epoch.Time.Bar = (function(superClass) {
       base.type = 'time.bar';
     }
     Bar.__super__.constructor.call(this, this.options);
+    this.draw();
   }
 
   Bar.prototype._offsetX = function() {
@@ -3300,6 +3315,7 @@ Epoch.Time.Gauge = (function(superClass) {
       };
     })(this);
     this.onAll(optionListeners);
+    this.draw();
   }
 
   Gauge.prototype.update = function(value) {
@@ -3487,6 +3503,7 @@ Epoch.Time.Heatmap = (function(superClass) {
     this._setOpacityFunction();
     this._setupPaintCanvas();
     this.onAll(optionListeners);
+    this.draw();
   }
 
   Heatmap.prototype._setOpacityFunction = function() {
@@ -3758,6 +3775,7 @@ Epoch.Time.Line = (function(superClass) {
       base.type = 'time.line';
     }
     Line.__super__.constructor.call(this, this.options);
+    this.draw();
   }
 
   Line.prototype.setStyles = function(className) {
@@ -3834,7 +3852,6 @@ jQueryModule = function($) {
         Epoch.exception("Unknown chart type '" + options.type + "'");
       }
       this.data(DATA_NAME, (chart = new klass(options)));
-      chart.draw();
     }
     return chart;
   };
@@ -3859,7 +3876,6 @@ MooToolsModule = function() {
         Epoch.exception("Unknown chart type '" + options.type + "'");
       }
       self.store(DATA_NAME, (chart = new klass(options)));
-      chart.draw();
     }
     return chart;
   });
@@ -3893,7 +3909,6 @@ zeptoModule = function($) {
       this.data(DATA_NAME, (cid = next_cid()));
       chart = new klass(options);
       chartMap[cid] = chart;
-      chart.draw();
       return chart;
     }
   });

src/adapters/MooTools.coffee

@@ -14,7 +14,6 @@ MooToolsModule = ->
       unless klass?
         Epoch.exception "Unknown chart type '#{options.type}'"
       self.store DATA_NAME, (chart = new klass options)
-      chart.draw()
     return chart
 
 MooToolsModule() if window.MooTools?

src/adapters/jQuery.coffee

@@ -13,7 +13,6 @@ jQueryModule = ($) ->
       unless klass?
         Epoch.exception "Unknown chart type '#{options.type}'"
       @data DATA_NAME, (chart = new klass options)
-      chart.draw()
     return chart
 
 jQueryModule(jQuery) if window.jQuery?

src/adapters/zepto.coffee

@@ -22,8 +22,6 @@ zeptoModule = ($) ->
       chart = new klass options
       chartMap[cid] = chart
 
-      chart.draw()
-
       return chart
 
-zeptoModule(Zepto) if window.Zepto?
+zeptoModule(Zepto) if window.Zepto?

src/basic/area.coffee

@@ -4,6 +4,7 @@ class Epoch.Chart.Area extends Epoch.Chart.Plot
   constructor: (@options={}) ->
     @options.type ?= 'area'
     super(@options)
+    @draw()
 
   # Generates a scale needed to appropriately render the stacked visualization.
   # @return [Function] The y scale for the visualization.

src/basic/bar.coffee

@@ -36,6 +36,7 @@ class Epoch.Chart.Bar extends Epoch.Chart.Plot
       @options = Epoch.Util.defaults(@options, defaults)
     super(@options)
     @onAll optionListeners
+    @draw()
 
   # @return [Boolean] True if the chart is vertical, false otherwise
   _isVertical: ->
@@ -213,6 +214,7 @@ class Epoch.Chart.Bar extends Epoch.Chart.Plot
   # @param [String] dataKey Property name of a datum to use for the tick value
   # @return [Array] The ticks for the given axis
   _getTickValues: (numTicks, dataKey='x') ->
+    return [] unless @data[0]?
     total = @data[0].values.length
     step = Math.ceil(total / numTicks)|0
     tickValues = (@data[0].values[i].x for i in [0...total] by step)

src/basic/histogram.coffee

@@ -14,6 +14,7 @@ class Epoch.Chart.Histogram extends Epoch.Chart.Bar
   constructor: (@options={}) ->
     super(@options = Epoch.Util.defaults(@options, defaults))
     @onAll optionListeners
+    @draw()
 
   # Prepares data by sorting it into histogram buckets as instructed by the chart options.
   # @param [Array] data Data to prepare for rendering.

src/basic/line.coffee

@@ -3,6 +3,7 @@ class Epoch.Chart.Line extends Epoch.Chart.Plot
   constructor: (@options={}) ->
     @options.type ?= 'line'
     super(@options)
+    @draw()
 
   # @return [Function] The line generator used to construct the plot.
   line: (layer) ->

src/basic/pie.coffee

@@ -21,6 +21,7 @@ class Epoch.Chart.Pie extends Epoch.Chart.SVG
       .attr("transform", "translate(#{@width/2}, #{@height/2})")
     @on 'option:margin', 'marginChanged'
     @on 'option:inner', 'innerChanged'
+    @draw()
 
   # Draws the pie chart
   draw: ->

src/basic/scatter.coffee

@@ -8,10 +8,12 @@ class Epoch.Chart.Scatter extends Epoch.Chart.Plot
 
   # Creates a new scatter plot.
   # @param [Object] options Options for the plot.
-  # @option options [Number] radius The default radius to use for the points in the plot (default 3.5). This can be overrwitten by individual points.
+  # @option options [Number] radius The default radius to use for the points in
+  #   the plot (default 3.5). This can be overrwitten by individual points.
   constructor: (@options={}) ->
     super(@options = Epoch.Util.defaults(@options, defaults))
     @on 'option:radius', 'radiusChanged'
+    @draw()
 
   # Draws the scatter plot.
   draw: ->
@@ -50,7 +52,7 @@ class Epoch.Chart.Scatter extends Epoch.Chart.Plot
       .duration(750)
       .style('opacity', 0)
       .remove()
-      
+
     super()
 
   # Updates radius in response to an <code>option:radius</code> event.

src/time/area.coffee

@@ -4,11 +4,12 @@ class Epoch.Time.Area extends Epoch.Time.Stack
   constructor: (@options={}) ->
     @options.type ?= 'time.area'
     super(@options)
+    @draw()
 
   # Sets the appropriate styles to the graphics context given a particular layer.
   # @param [Object] layer Layer for which to set the styles.
   setStyles: (layer) ->
-    if layer.className?
+    if layer? && layer.className?
       styles = @getStyles "g.#{layer.className.replace(/\s/g,'.')} path.area"
     else
       styles = @getStyles "g path.area"
@@ -23,7 +24,8 @@ class Epoch.Time.Area extends Epoch.Time.Stack
     [y, w, layers] = [@y(), @w(), @getVisibleLayers()]
 
     for i in [layers.length-1..0]
-      layer = layers[i]
+      continue unless (layer = layers[i])
+
       @setStyles layer
       @ctx.beginPath()
 
@@ -53,7 +55,7 @@ class Epoch.Time.Area extends Epoch.Time.Stack
     [y, w, layers] = [@y(), @w(), @getVisibleLayers()]
 
     for i in [layers.length-1..0]
-      layer = layers[i]
+      continue unless (layer = layers[i])
       @setStyles layer
       @ctx.beginPath()
 

src/time/bar.coffee

@@ -4,6 +4,7 @@ class Epoch.Time.Bar extends Epoch.Time.Stack
   constructor: (@options={}) ->
     @options.type ?= 'time.bar'
     super(@options)
+    @draw()
 
   # @return [Number] An offset used to align the ticks to the center of the rendered bars.
   _offsetX: ->

src/time/gauge.coffee

@@ -24,7 +24,7 @@ class Epoch.Time.Gauge extends Epoch.Chart.Canvas
   # @option options [Integer] tickSize The length (in pixels) for each tick (default: 5).
   # @option options [Integer] tickOffset The number of pixels by which to offset ticks from the outer arc (default: 5).
   # @option options [Integer] fps The number of animation frames to render per second (default: 34).
-  # @option options [Function] format The formatting function to use when rendering the gauge label 
+  # @option options [Function] format The formatting function to use when rendering the gauge label
   #   (default: Epoch.Formats.percent).
   constructor: (@options={}) ->
     super(@options = Epoch.Util.defaults(@options, defaults))
@@ -71,6 +71,7 @@ class Epoch.Time.Gauge extends Epoch.Chart.Canvas
       @draw()
 
     @onAll optionListeners
+    @draw()
 
   # Sets the value for the gauge to display and begins animating the guage.
   # @param [Number] value Value to set for the gauge.
@@ -161,7 +162,7 @@ class Epoch.Time.Gauge extends Epoch.Chart.Canvas
     @ctx.stroke()
 
     @drawNeedle()
-    
+
     super()
 
   # Draws the needle.

src/time/heatmap.coffee

@@ -42,6 +42,7 @@ class Epoch.Time.Heatmap extends Epoch.Time.Plot
     @_setOpacityFunction()
     @_setupPaintCanvas()
     @onAll optionListeners
+    @draw()
 
   _setOpacityFunction: ->
     if Epoch.isString(@options.opacity)

src/time/line.coffee

@@ -4,6 +4,7 @@ class Epoch.Time.Line extends Epoch.Time.Plot
   constructor: (@options={}) ->
     @options.type ?= 'time.line'
     super(@options)
+    @draw()
 
   # Sets the graphics context styles based ont he given layer class name.
   # @param [String] className The class name of the layer for which to set the styles.