Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class Chart
- @initAll: ->
- Bar.init()
- Spark.init()
- @init: ->
- for element in $(@selector)
- do (element) =>
- setImmediate =>
- unless $(element).data('initialized')
- chart = new @(element)
- chart.render()
- constructor: (element) ->
- @target = $(element)
- @values = @target.data 'values'
- @labels = @target.data 'labels'
- @width = @target.width()
- @height = @target.height()
- @ySpace = @height / 3
- @paper = Raphael element, @width, @height
- @target.data('initialized', true)
- stepWidth: ->
- @width / @values.length
- scaledY: ->
- @scale(-value for value in @values, @height - @ySpace)
- scale: (values, limit) ->
- min = Math.min values...
- max = Math.max values...
- for value in values
- if min == max
- limit / 2
- else
- limit * (value - min) / (max - min)
- class Bar extends Chart
- @selector: '.bar.chart'
- render: ->
- @ySpace = @height / 20
- step = @stepWidth()
- bar_padding = step / 10
- bar_width = step - 2 * bar_padding
- for y, index in @scaledY()
- do (y, index) =>
- setImmediate =>
- x = index * step + bar_padding
- rect = @paper.rect x, y, bar_width, @height - y
- $(rect.node).data @labels[index]
- $(rect.node).attr class: 'bar'
- label = @paper.rect x, 0, bar_width, y
- $(label.node).data @labels[index]
- $(label.node).attr class: 'space'
- $(label.node).hover ->
- $(rect.node).attr class: 'active bar'
- , ->
- $(rect.node).attr class: 'bar'
- class Spark extends Chart
- @selector: '.spark.chart'
- render: ->
- step = @stepWidth()
- circlePadding = step * 2 / 5
- circleRadius = step - 2 * circlePadding
- for y, index in @scaledY()
- x = index * step + circlePadding
- y += 2*circleRadius
- if index == 0
- firstY = y
- line = 'M'
- else
- line += 'L'
- line += "#{x} #{y}"
- circle = @paper.circle x, y, circleRadius
- $(circle.node).data @labels[index]
- do (circle) ->
- increaseRadius = -> circle.animate r: circleRadius*2, 100
- decreaseRadius = -> circle.animate r: circleRadius, 100
- circle.hover increaseRadius, decreaseRadius
- setImmediate =>
- path = @paper.path line
- path.attr 'stroke-width': circleRadius / 3
- $(path.node).attr class: 'line'
- path.toBack()
- lastY = y
- minY = @height
- minX = 0
- maxX = (@values.length - 1) * step + 2*circlePadding
- closePath = "L#{maxX} #{lastY} L#{maxX} #{minY}
- L#{minX} #{minY} L#{minX} #{firstY}z"
- polygon = @paper.path line + closePath
- $(polygon.node).attr class: 'polygon'
- polygon.toBack()
- $(document).on('updated.charts, ready', Chart.initAll)
Add Comment
Please, Sign In to add comment