protovis part 5: swap external data

Changing your Labels

Now look at the second label. In the text property, change "Asian: " to "Amazon: $" then after the activeBar, change Asian to AMZN.

The time has come to deal with decimals because we want our labels to read as dollar amounts. This is easy to accomplish with basic math. Delete the word commas. Go to the closing parens after AMZN and type /100 to divide 100 and move the decimal over two places and you're set.

In the left property, add +10.

Because we have multiple lines, we need to create a key to tie each label to it's corresponding line. Put your cursor in front of the semicolon, hit return and type .add(pv.Dot). Add a strokeStyle with the value null. Add a fillStyle with the value black. Add a size property with the value of 10.

Copy the left and bottom properties and paste them after the size property. Change the left value to "+5" and the bottom value to "-13".

Now select the other labels with the exception of the source and delete them to see your label.

Again, we can copy and paste this entire code block and edit it to add more labels. Change AMZN to APPL, change the two bottom property values to -40 and -33 and change black to orange.

Repeat until your labels match what's shown here.