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) ->
$(@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) + '%')
<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/pie.coffee It looks a little bit like this:

Screenshot

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!

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

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) + '%)') 

visser23 commented Jan 9, 2015

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.

cg110 commented Sep 26, 2017

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.

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