# github.com/zenorocha/jquery-boilerplate (($, window) ->
# --------------------------------------------------------------------- pluginName = 'chart_area' document = window.document defaults = debug: false width: 1000 height: 1000 ticks: 'months' data_date_format: "%Y-%m-%d" date_format: "%Y-%m-%d" # --------------------------------------------------------------------- class Plugin constructor: (@element, options) -> @options = $.extend {}, defaults, options @$element = $(@element) @_defaults = defaults @_name = pluginName @init() init: -> @render() # --------------------------------------------------------------------- get_data: -> @$element.data 'chart-data' || [] get_data_date_format: -> @$element.data('data-date-format') || @options.data_date_format get_date_format: -> @$element.data('date-format') || @options.date_format get_height: -> @$element.data('height') || @options.height get_ticks: -> switch @$element.data('ticks') || @options.ticks when 'days' then d3.time.days when 'months' then d3.time.months when 'years' then d3.time.years get_width: -> @$element.data('width') || @options.width # --------------------------------------------------------------------- render: -> data = @get_data() width = @get_width() height = @get_height() parseDate = d3.time.format(@get_data_date_format()).parse x = d3.time.scale().range([0, width]) y = d3.scale.linear().range([height, 0]) xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(@get_ticks(), 1).tickSize(0).tickPadding(5).tickFormat(d3.time.format(@get_date_format())) yAxis = d3.svg.axis().scale(y).orient("left").ticks(2).tickSize(0).tickPadding(5) area = d3.svg.area().interpolate("basis").x((d) -> x d.label).y0(height).y1((d) -> y d.value) svg = d3.select(@$element[0]).append("svg").attr("width", @get_width()).attr("height", @get_height()).attr("viewBox", "0 0 #{@get_height()} #{@get_width()}").attr("xmlns", "http://www.w3.org/2000/svg").append("g") data.forEach (d) -> d.label = parseDate(d.date) d.value = +d.value x.domain d3.extent(data, (d) -> d.label) y.domain [0, d3.max(data, (d) -> d.value)] svg.append("path").datum(data).attr("class", "area").attr("d", area) svg.append("g").attr("class", "x axis").attr("transform", "translate(0,#{height})").call(xAxis) svg.append("g").attr("class", "y axis").call(yAxis) @$element.trigger 'chart.render' # --------------------------------------------------------------------- # prevents multiple instantiation on same DOM element $.fn[pluginName] = (options) -> @each -> if !$.data(this, "plugin_#{pluginName}") $.data(@, "plugin_#{pluginName}", new Plugin(@, options)) # ---------------------------------------------------------------------
)(jQuery, window)
# =====================================================================
$ -> $('.chart.container.area').chart_area()