Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
This is a simple widget that lets you render pie charts in Dashing.
class Dashing.Fullpie extends Dashing.Widget
@accessor 'value'
onData: (data) ->
render: (data) ->
if !data
data = @get("value")
if !data
#console.log "FullPie new"
# this is a fix because data binding seems otherwise not work
width = 260 #width
height = 260 #height
radius = 130 #radius
color = d3.scale.ordinal()
#.range( ['#222222','#555555','#777777','#999999','#bbbbbb','#dddddd','#ffffff'] )
.range( ['#222222','#333333','#444444','#555555','#666666','#777777','#888888','#999999','#aaaaaa'] )
vis ="svg:svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + radius + "," + radius + ")")
arc = d3.svg.arc().outerRadius(radius)
pie = d3.layout.pie().value((d) -> d.value)
arcs = vis.selectAll("g.slice")
.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)
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)
.attr('x', 0)
.attr('dy', 15)
.attr('font-size', '70%')
.text((d,i) -> Math.round(data[i].value/sum * 100) + '%')
<h1 class="title" data-bind="title"></h1>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

FullPie widget

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




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


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!

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

jbutz commented Jan 20, 2014

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

waky79 commented Jan 21, 2014

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 :)

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"))
  $(@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"

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%')
      .attr('x', 0)
      .attr('dy', 15)
      .attr('font-size', '120%')
      .text((d,i) -> data[i].value + ' (' + Math.round(data[i].value/sum * 100) + '%)') 

visser23 commented Jan 9, 2015

To change the font size ammend:

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


  .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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment