Skip to content

Instantly share code, notes, and snippets.

@lagsalot

lagsalot/pie.coffee

Forked from TheJKFever/pie.coffee
Last active August 29, 2015 14:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lagsalot/27b19866c599f1fa56be to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lagsalot/27b19866c599f1fa56be to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pie.coffee
class Dashing.Pie extends Dashing.Widget
@accessor 'value', Dashing.AnimatedValue
onData: (data) ->
width = 220
height = 220
radius = 110
color = d3.scale.category20()
$(@node).find('.pie_chart svg').remove();
$(@node).find('.legend ul').remove();
chart = d3.select('.pie_chart').append("svg:svg")
.data([data.value])
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("transform", "translate(#{radius} , #{radius})")
arc = d3.svg.arc().innerRadius(radius * .5).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 = d3.select(".legend")
.append("ul")
legend.selectAll("ul").data(data.value)
.enter()
.append("li")
.each((d, i) ->
li = d3.select(this)
li.append("span")
.style("background-color",color(i))
li.append("text")
.text(d.label)
)
Raw
pie.html
<h1 class="title" data-bind="title"></h1>
<div class="pie_chart"></div>
<div class="legend"></div>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
Raw
pie.scss
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #55CD47; // #47bbb3; (blue)
$value-color: #fff;
$title-color: rgba(255, 255, 255, 0.7);
$label-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-pie styles
// ----------------------------------------------------------------------------
.widget-pie {
background-color: $background-color;
.title {
color: $title-color;
}
.legend {
width:100%;
ul {
display: inline-block;
li {
color: $label-color;
float: left;
span {
height: 12px;
width: 12px;
display: inline-block;
margin: 2px 4px;
}
text {
margin-right: 5px
}
}
}
}
.more-info {
color: $moreinfo-color;
}
.updated-at {
color: rgba(0, 0, 0, 0.3);
}
}
Raw
pie_chart_graph.md

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="links" data-view="Pie" data-title="Managed Links"></div>
    </li>

my_job.rb:

link_data = {}
link_types = ["Wired","Wireless","Wifi"]

SCHEDULER.every '2s' do
	one = rand
	two = ((1-one) * rand)
	three = 1 - one - two
	values = [one, two, three]

  link_types.each_with_index do |link, i|
	  link_data[link] = { label: link, value: values[i]*100 }
  end

  send_event 'links', { value: link_data.values }
end

I hope you like it! If you have any questions/comments feel free to contact me at about.me/Jon.Koehmstedt

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