 page = require('webpage').create()
-page.clipRect =
-  width:  600
-  height: 400
-page.content = '<html><body></body></html>'
 page.injectJs '../node_modules/chart.js/Chart.min.js'
 
-page.evaluate () ->
-  # 空のPage 作成方法が分からない (document.write すると動く)
-  document.write("Generated by PhantomJS and Chart.js")
+## Args
+data = [
+  { value: 30 ,color: "#F38630" }
+  { value: 40 ,color: "#E0E4CC" }
+  { value: 10 ,color: "#E4CCE0" }
+  { value: 15 ,color: "#69D2E7" }
+  { value:  5 ,color: "#E7D7D2" }
+]
 
+page.evaluate (data) ->
   canvas = document.createElement('canvas')
   document.body.appendChild(canvas)
-
-  data = [
-    { value: 30 ,color: "#F38630" }
-    { value: 50 ,color: "#E0E4CC" }
-    { value: 20 ,color: "#69D2E7" }
-  ]
 
   #type = "line"
   #

  options =
    #scaleLineWidth: 5
    onAnimationComplete: () ->
      window.callPhantom()
      #window.callPhantom(clipRect: canvas.getBoundingClientRect())

  chart = new Chart(canvas.getContext('2d')).Pie(data, options)


  #  when 'pie'      then chart.Pie(data, options)
  #  when 'doughnut' then chart.Doughnut(data, options)
  #  else throw new Error('Invalid chart type.')
, data

page.onCallback = (data) ->
  page.clipRect = data.clipRect
  page.render("chartjs.png")
  phantom.exit()

