A simple d3 pie chart widget for Dashing.

readme.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="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

pie.coffee

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

pie.html

<p class="more-info" data-bind="moreinfo"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

pie.scss

.widget-pie {
  h1 {
    color: #000;
  }

  .chart_label {
    font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
  }

  background-color:#96bf48;
}

Great work, only one issue I'm having is the moreinfo and other binding in the html file appear to be ignored

I love the widget! Is there any way to change the colour of the legend and title in the middle of the graph?

Found out how to do it
Edit the pie.coffee and look for the #Legend section
I added another line to the legend section at the top so that it looked like this

legend = d3.select(@node).append("svg:svg")
  .attr("class", "legend")
  ...
  .attr("fill", "#ffffff")

@spstorey, I have the same problem. Did you find a solution?

@spstorey @jbutz just encountered the same issue. Not sure of the cause, but I fixed the other bindings by renaming the 'render' method to 'renderPie'.

I'm unfamiliar with the internals of Dashing, but the 'render' function might have a name clash with something in Dashing.Widget base class that supports the binding functionality?

Just a example of using curl to update this widget

curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "value":[{"label":"server1","value":10},{"label":"server2","value":15}]}' \http://127.0.0.1:3030/widgets/Puppet

I fixed the errors. I'd like to post my code for everyone to use. If there a way I can merge it into here?

Hi, great work. We use the pie chart a lot in our dashboards. I have recently changed the code to adapt the size of the pie cahrt to the widget size defined in the dashboard section. you can see the changes in my fork - would be happy to contibute this.