Skip to content

Instantly share code, notes, and snippets.

@strongjz
Forked from stevenleeg/pie.coffee
Last active August 29, 2015 14:08
Show Gist options
  • Save strongjz/d482179c96b6b0d913af to your computer and use it in GitHub Desktop.
Save strongjz/d482179c96b6b0d913af to your computer and use it in GitHub Desktop.

Pie widget

This is a simple widget that lets you render pie charts in Dashing. 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="Pie" data-title="Bookmark freq."></div>
</li>

my_job.rb:

data = [
  { label: "Hello world", value: 16 },
  { label: "Testing", value: 34 },
]

send_event 'bookmarks_frequency', { value: data }

I hope you like it! If you have any questions/comments feel free to contact me at steve [at sign] stevegattuso.me

class Dashing.Pie extends Dashing.Widget
@accessor 'value'
onData: (data) ->
@render(data.value)
render: (data) ->
if(!data)
data = @get("value")
if(!data)
return
width = 225
height = 225
radius = 112
label_radius = 110
color = d3.scale.category20()
$(@node).children("svg").remove();
chart = d3.select(@node).append("svg:svg")
.data([data])
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("transform", "translate(#{radius} , #{radius})")
#
# Center label
#
label_group = chart.append("svg:g")
.attr("dy", ".35em")
center_label = label_group.append("svg:text")
.attr("class", "chart_label")
.attr("text-anchor", "middle")
.text(@get("title"))
arc = d3.svg.arc().innerRadius(radius * .6).outerRadius(radius)
pie = d3.layout.pie().value((d) -> d.value)
arcs = chart.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice")
arcs.append("svg:path")
.attr("fill", (d, i) -> color(i))
.attr("d", arc)
#
# Legend
#
legend = d3.select(@node).append("svg:svg")
.attr("class", "legend")
.attr("x", 0)
.attr("y", 0)
.attr("height", 60)
.attr("width", 100)
legend.selectAll("g").data(data)
.enter()
.append("g")
.each((d, i) ->
g = d3.select(this)
row = i % 4
col = parseInt(i / 4)
g.append("rect")
.attr("x", col * 50)
.attr("y", row * 15)
.attr("width", 10)
.attr("height", 10)
.attr("fill", color(i))
console.log "wat"
g.append("text")
.attr("x", (col * 50) + 15)
.attr("y", (row + 1) * 15 - 6)
.attr("font-size", "10px")
.attr("height", 30)
.attr("width", 75)
.text(data[i].label)
)
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
.widget-pie {
h1 {
color: #000;
}
.chart_label {
font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
}
background-color:#96bf48;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment