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

@bubbajoelouis

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.

@bubbajoelouis

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!

@SPodlipskaya

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

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