In queue and waiting for job to start ...
job progress updated through running a command on edison. data updated every 5 seconds. mouse over progress bars to see additional information.
The only item that matters in each object element is the prt which stores the current progress of a job in decimal form. The other two items, name and user, are not necessarily required for rendering the visualization. However, these additional attributes add clarification to the visual. Additional attributes (e.g. system, time_elapsed) can be added for further organization.
Inside Protovis methods, you should call function(d) d.[attribute] where [attribute] is name, prt, user, or any other user defined attributes.
setInterval(function() {increment(); vis.render();}, 30); |
There should be a function to update the job progress data (in this case increment()). After data is updated, you must call vis.render() to redraw the visualization.
/* Sizing and scales. */ var w = 800, h = 800, x = pv.Scale.linear(0, 1).range(0, w), y = pv.Scale.ordinal(pv.range(data.length)).splitBanded(0, h, 2/5); /* The root panel. */ var vis = new pv.Panel() .width(w) .height(h) .bottom(20) .left(10) .right(10) .top(5); /* The bars. */ var bar = vis.add(pv.Bar) .data(data) .top(function() y(this.index)) .height(y.range().band) .left(0) .width(function(d) d.prt* w) .fillStyle(function(d) (d.prt >= 1) ? "#A7AAB9" : "#4B4F61" ) //Accessing items in object element .text(function(d) d.prt.toFixed(2)*100+"% jobID:"+d.name+" user:"+d.user) .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: false})); /* X-axis ticks. */ vis.add(pv.Rule) .data(x.ticks(5)) .left(x) .strokeStyle(function(d) d ? "rgba(255,255,255,0)" : "#000") .add(pv.Rule) .bottom(0) .height(5) .lineWidth(1) .strokeStyle("#000") .anchor("bottom").add(pv.Label) .text(x.tickFormat); setInterval(function() {increment(); vis.render();}, 30); |