This is a simple widget that lets you render pie charts in Dashing.

fullpie.coffee

class Dashing.Fullpie extends Dashing.Widget
  @accessor 'value'

  onData: (data) ->
    $(@node).fadeOut().fadeIn()
    @render(data.value)
  
  render: (data) ->
    if !data
      data = @get("value")
    if !data
       return
    #console.log "FullPie new"
# this is a fix because data binding seems otherwise not work 
    $(@node).children(".title").text($(@node).attr("data-title"))
    $(@node).children(".more-info").text($(@node).attr("data-moreinfo"))
    $(@node).children(".updated-at").text(@get('updatedAtMessage'))

    width = 260 #width
    height = 260 #height
    radius = 130 #radius

    color = d3.scale.ordinal()
      .domain([1,10])
      #.range( ['#222222','#555555','#777777','#999999','#bbbbbb','#dddddd','#ffffff'] )
      .range( ['#222222','#333333','#444444','#555555','#666666','#777777','#888888','#999999','#aaaaaa'] )

    $(@node).children("svg").remove();

    vis = d3.select(@node).append("svg:svg")
      .data([data])
        .attr("width", width)
        .attr("height", height)
      .append("svg:g")
        .attr("transform", "translate(" + radius + "," + radius + ")") 

    arc = d3.svg.arc().outerRadius(radius)
    pie = d3.layout.pie().value((d) -> d.value)

    arcs = vis.selectAll("g.slice")
      .data(pie)
      .enter().append("svg:g").attr("class", "slice") 

    arcs.append("svg:path").attr("fill", (d, i) -> color i)
      .attr("fill-opacity", 0.4).attr("d", arc)

    sum=0
    for val in data  
      sum += val.value

    arcs.append("svg:text").attr("transform", (d, i) -> 
      procent_val = Math.round(data[i].value/sum * 100)
      d.innerRadius = (radius * (100-procent_val)/100) - 45  #45=max text size/2
      d.outerRadius = radius
      "translate(" + arc.centroid(d) + ")")
      .attr('fill', "#fff")
      .attr("text-anchor", "middle").text((d, i) -> data[i].label)
      .append('svg:tspan')
      .attr('x', 0)
      .attr('dy', 15)
      .attr('font-size', '70%')
      .text((d,i) -> Math.round(data[i].value/sum * 100) + '%') 
                              
                              
                               

fullpie.html

<h1 class="title" data-bind="title"></h1>

<p class="more-info" data-bind="moreinfo"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

FullPie.md

FullPie widget

This is a simple widget that lets you render pie charts in Dashing. Forked from stevenleeg/pie.coffee It looks a little bit like this:

Usage

dashboard.erb:

<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="bookmarks_frequency" data-view="Fullpie" data-title="Bookmark freq."></div>
</li>

my_job.rb:

data = [
  { label: "Label1", value: 16 },
  { label: "Label2", value: 34 },
  { label: "Label3", value: 10 },
  { label: "Label4", value: 40 },
  { label: "Label5", value: 20 },
]

send_event 'bookmarks_frequency', { value: data }

I hope you like it!

fullpie.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #47bbb3;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-fullpie {

  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .value {
    color: $value-color;
  }

  .h1 {
    color: #000;
  }

  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

  .chart_label {
    font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
  }
} 

I found a fix for the widget being empty on page refresh (IE not using existing data)

Rename the render function to renderPie, and change the onDraw call to call renderPie

It appears that the base widget code has a function call render (very hard to find any docs on Dashing.Fullpie) so renaming the function stops the code from hiding the base render code, and things work as expected, and an onDraw call occurs on page load.