Dashing Pie Chart Graph Widget with title more-info and horizontal legend that fits in a 1x1 spot

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

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>

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);
  }

}

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:

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

Trying, desperately, to get this to update with a Curl. Can't seem to get it. Using static values from your example above:

curl -d '{ "auth_token": "XXX", "value":[{"label":"Wired","value":"10"},{"label":"Wireless","value":"15"},{"label":"Wifi","value":"75"}]}' http://127.0.0.1:3030/widgets/Pie

Getting nothing out of this. Thoughts?

@claylevering although it was more than a year ago, your issue is you are sending the values as strings.

curl -d '{ "auth_token": "XXX", "value":[{"label":"Wired","value":10},{"label":"Wireless","value":15},{"label":"Wifi","value":75}]}' http://127.0.0.1:3030/widgets/Pie