After we released 0.3.4 four days late (my bad) I told Clay that meeting 0.3.5’s upcoming Friday release was important to me, even if that meant under-committing the next 3 days.

Clay said to view this short iteration as a celebration or break, a chance to recharge by doing whatever I wanted.

What I heard was

GRAPHS GRAPHS GRAPHS!

ProcrasDonate Screenshot: hours per day spent on Pivotal Tracker compared to all sites classified as Time Well Spent

I’ve been looking forward to graphs for a while. Graphs are part of a larger vision of actionable visualizations and analysis.

The first step was integrating existing Javascript graph libraries into our extension. As alluded to elsewhere, and based on previous trouble integrating jQuery UI, I expected this to be troublesome.

In fact, the first night I solved non-graph problems instead, such as honoring Firefox’sprivate browsing mode. By Thursday I thought I was going to work on email newsletters or community page aggregations and return to graphs when I had more time.

I admit I was a little afraid. What if I made graphs that people laughed at? “These aren’t useful! Why do ProcrasDonate developers waste their time making these?” I like looking forward to graphs.

ProcrasDonate Screenshot: Hours per day spent at Hacker News and Hulu

Clay told me not to worry, and my unconscious mind must have heard, because that night I got graphs working. I woke up in the early morning and worked on them some more, took a nap, and kept going. Have track to roll on is such a pleasure.

It was already Friday, release day, and we were in good shape. We decided to push through the Registration page’s recipient percent pie chart and the My Progress page’s trend line chart. Screenshots of these are throughout this post.

ProcrasDonate Screenshot: Percent of each donation received by selected charities. The full donation amount is determined by the user's $/hr rate times the number of hours ProcrasDonated, limited by the user's maximum weekly donation amount.

We pushed to release Friday afternoon, but I ended up spending until Saturday morning getting all the user interaction elements up to snuff. Even if meeting deadlines is important, there is a minimum quality, including quality of process and decision making, that is even more important. Deadlines are a single factor in a larger equation.

I should also mention that our Friday deadlines are internal. Releasing for real Friday afternoon is still a good goal to work towards, but I do like the idea of using the weekend as a buffer if necessary, with releases out the door by Sunday night. Buffers as flex time, to be used for loose ends, documentation, blog posts, celebration or getting ahead on the next iteration, are wonderful.

We also like having challenging goals. It pushes us to accomplish more. Varying within the bounds is ok.

For those of you interested in the technical details, they are appended below.

Proudly ProcrasDonating,

Lucy.

Pie Chart Technical Details

The pie charts are created using gRaphael Javascript library.

In order to provide Raphael with the right document, I wrapped the library in a function with a single document parameter:

function init_raphael(document) {
        [Raphael library code]
}

I wrapped the gRaphael files in functions, too, since they rely on Raphael being initialized first.

I then called everything from my extension’s view like so:

init_raphael(request.get_document());
init_graphael();
init_graphael_pie();

// create pie chart
var paper = Raphael("pie_chart", 550, 250);
var pie = paper.g.piechart(125, 125, 100,
    data,
    { legend: legend,
      legendpos: "east",
      colors: colors });

// add cool effects (copied from g.raphael demo)
pie.hover(function () {
    this.sector.stop();
    this.sector.scale(1.1, 1.1, this.cx, this.cy);
    if (this.label) {
        this.label[0].stop();
        this.label[0].scale(1.5);
        this.label[1].attr({"font-weight": 800});
    }
}, function () {
        this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
        if (this.label) {
            this.label[0].animate({scale: 1}, 500, "bounce");
            this.label[1].attr({"font-weight": 400});
        }
    });

Trend Chart Technical Details

The trend charts are created using the DyGraph Javascript library.

I used a similar function-wrapping method to provide the right document.

init_dygraph_canvas(request.get_document());
init_dygraph(request.get_document());
g = new DateGraph(
    request.jQuery("#"+div_id).get(0),
        data,
        {showRoller: false,
         //labelsDivWidth: 350,
        labelsDiv: request.jQuery("#legend").get(0),
        labelsSeparateLines: true,
        axisLabelFontSize: 14,
        pixelsPerXLabel: 50,
        pixelsPerYLabel: 50,
        gridLineColor: "#BBBBBB",
        strokeWidth: 4,
        highlightCircleSize: 6,
        colors: [acolor, bcolor],
        /*xAxisLabelWidth: 50,
        yAxisLabelWidth: 50*/
        });                                                                                                                                                                       

request.jQuery("#trend_chart").children().children().each(function() {
    if ($(this).attr("style").match("bottom: 0px")) {
        $(this).css("margin-bottom", "-.5em");                                                                                                                                    
    }
});

By the way, you can click on the graph to zoom in, double click to zoom out and even set the rolling average were I to enable that input book!