Question

I am extremely frustrated with trying to prune and hand over to Protovis a set of arrays only containing numbers from a set of data objects that looks something like below to draw up three separate pie charts (pv.Wedge) for each object...

myData = [{dept:"Accounting",sal:90000,equ:10000,trvl:267,extra:5000},
              {dept:"Sales",sal:20000,equ:10000,trvl:3049,extra:7000},
              {dept:"Consulting",sal:90000,equ:58000,trvl:983,extra:17000}];

From the documentation I m told there s little looping one needs to do in Protovis, yet I can t seem to get the myData manipulated/parsed correctly, so alas I ve resorted to explicit looping.

I ve tried many different kinds of loops but the best I ve gotten is a print out of the numbers under an empty space where I would like the pie charts to appear. I would be grateful if someone could give me a hint as to what I should be doing to achieve this. Presently I am stuck at -

function getData(dept) {
   var getvals = new Array();
     for(idx in dept) {
       for(i in idx) {
           if(idx[i]=="^[0-9]+$") {
             getme.push(idx[i]); 
       }
   }      
 }
   return getvals;

}

// myData = myData.map(function(d) {
//    var valonly = new Array();
//    for(key in d) {
//       if(isNaN(d[key])==false) {
//          valonly.push(d[key]);
//       }
//    }
//    return valonly;
// });


var vis = new pv.Panel()
  .width(w)
  .height(h)
  .data(getData(myData))
vis.add(pv.Wedge)
  //.data(pv.normalize(getData(myData)))
  .left(100) 
  .bottom(100)
  .outerRadius(r)
  .angle(function(d) d * 2 * Math.PI)
vis.add(pv.Label)
  .bottom(0)
  .left(100)
  .textAlign("center")
  //.text(data.dept + " - " + "total: " + hrsum);


vis.render();

Answer 1

The following works. I worked with the data as you had it defined. It could be easier to work with if the values for the wedges were themselves in an array. That said, it was interesting teasing out the data from the object. def creates a local variable. I chose to use that for values and total rather than normalize as it then made it easier to add lables later on. There s possibly a more elegant way of doing this, but you should be able to see one approach without looping.

var myData = [{dept:"Accounting",sal:90000,equ:10000,trvl:267,extra:5000}, 
    {dept:"Sales",sal:20000,equ:10000,trvl:3049,extra:7000}, 
    {dept:"Consulting",sal:90000,equ:58000,trvl:983,extra:17000}]; 

var vis = new pv.Panel() 
    .width(200) 
    .height(200)
    .data(myData);

vis.add(pv.Wedge)
    .def("values", function(d) pv.entries(d).filter(function(e) !isNaN(e.value)))
    .def("total", function(d) pv.sum(this.values(), function(e) e.value))
    .data(function(d) this.values())
    .left(100)  
    .bottom(100) 
    .outerRadius(90)
    .angle(function(d) (d.value / this.total()) * 2 * Math.PI )
.anchor("center").add(pv.Label)
    .text(function(d) d.key);

vis.add(pv.Label)
    .bottom(0)
    .left(50) 
    .textAlign("center")
    .text(function(d) d.dept); 

vis.render();

友情链接