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;
  }
} 

bubbajoelouis, find way to make label less and leave percents the same. Also added values near percents.

.attr("text-anchor", "middle").text((d, i) -> data[i].label)
      .attr('font-size', '60%')
      .append('svg:tspan')
      .attr('x', 0)
      .attr('dy', 15)
      .attr('font-size', '120%')
      .text((d,i) -> data[i].value + ' (' + Math.round(data[i].value/sum * 100) + '%)') 

To change the font size ammend:

  .attr("text-anchor", "middle").text((d, i) -> data[i].label)

to

  .attr("text-anchor", "middle").text((d, i) -> data[i].label).attr('font-size', 'DESIREDFONTSIZEpx')

The later attribute:

  .attr('font-size', '70%')

only relates to the % amount in relation to the font size stipulated.

I realize this widget is a bit old but I've recently tried using it under smashing. Ironically, the pie graph doesn't reliably show up on a kiosk RaspberryPi running Chromium but works perfectly on my desktop. On the OSX Chrome, no javascript errors are thrown. On the Pi, the background of the widget shows at page load and occasionally I'll see the data at some later time. I don't have a good means of seeing if it's throwing any javascript errors. This is the only widget on the dashboard and the data is only 3 values. Any thoughts?

I've found that the data shows up when the job reruns but any preexisting data doesn't get rendered on page load. Presumably some event is not firing.

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.