protovis part 5: swap external data

Last but not least, lets add some date labels to the bottom of the chart. Add another comment that says date labels. Hit return and type techstocks.add(pv.Labels). Add a data property with the value pv.range( 2000, 2011, 1)). Add a left property with the value function() this.index * (width-leftMargin)/11 + leftMargin). Set textAlign to center. Set bottom to (bottomMargin-20). Set the font property to "7pt sans-serif". And set text style to gray.

And there's your finished animated line chart template. One thing to notice. While we wrote a lot of code, many of the properties were similar to those we wrote in the first tutorials. Simple additions to those setting allowed us to make some sophisticated templates that can be reused quickly. I hope this has been a good introduction to Protovis and if you implement any of these graphics, let us know. We would love to hear from you.

Here is the complete code: