Simple Sorted Bar Chart

Alternative 1

---

<script type="text/javascript+protovis">
var mydata = [1, 1.2, 1.7, 1.5, .7];
mydata.sort();
mydata.reverse();
new pv.Panel()
        .width(150)
        .height(150)
        .add(pv.Bar)
        .data(mydata)
        .bottom(0)
        .width(20)
        .height(function(d) d * 80)
        .left(function() this.index * 25)
        .anchor("top")
        .add(pv.Label)
        .root.render();
</script>

---

Alternative 2

---

<script type="text/javascript+protovis">
var mydata = [1, 1.2, 1.7, 1.5, .7];
mydata.sort();
mydata.reverse();
var panel = new pv.Panel()
        .width(150)
        .height(150);
        
var bar = panel.add(pv.Bar)
        .data(mydata)
        .bottom(0)
        .width(20)
        .height(function(d) d * 80)
        .left(function() this.index * 25);
        
var label = bar.add(pv.Label)
            .top(function() bar.top())
            .root.render();
</script>

---

Alternative 3

---

<script type="text/javascript+protovis">
var mydata = [1, 1.2, 1.7, 1.5, .7];
var labeldata = ["a", "b", "c", "d", "e"];

mydata.sort();
mydata.reverse();
var panel = new pv.Panel()
        .width(150)
        .height(150);
        
var bar = panel.add(pv.Bar)
        .data(mydata)
        .bottom(0)
        .width(20)
        .height(function(d) d * 80)
        .left(function() this.index * 25);
        
var label = bar.add(pv.Label)
            .data(labeldata)
            .top(function() bar.top())            
            .left(function() bar.left()+3)

var label = bar.add(pv.Label)
            .textStyle("white");
            
panel.render();
</script>

---

Related Post :

• http://protovis-samples.blogspot.com/2011/05/another-bar-chart-part-1.html

---