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