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

This is great. Thank you. I'm having an issue where the title, moreinfo, and updatedAtMessage bindings aren't showing anything. Any ideas?

The bindings are removed because the use of name "render" for the d3 pie rendering function in the widget code.

Thank you for FullPie!

I hijacked "more-info" to display chart total for size reference. 20% of 5 is much different than 20% of 50000000 :)

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

if $(@node).attr("data-moreinfo") 
  $(@node).children(".more-info").text('Out of ' + sum + ' Total ' + $(@node).attr("data-moreinfo"))
else      
  $(@node).children(".more-info").text('Out of ' + sum + ' Total')

My widget definition in the dashboard:

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
  <div data-id="mon_counts" data-view="Fullpie" data-title="Node Counts"
    data-moreinfo="Nodes"
  ></div>
</li>

Gives: "Out of 35159 Total Nodes" under the chart.

Does anyone know how to scale the font that makes up the Values in the Fullpie chart? Adjusting the percentage in .attr('font-size', '70%') only adjusts the scale of the number value in relation to the label of the pie's slice :)

I was asked to shrink the size of the Fullpie widgets, and I have been able to adjust everything but the values inside the pie chart.

Thank you!

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.