• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Workshop Chapter 13. Drawing Graphs > Dynamic Text Labeling

Dynamic Text Labeling

Perhaps it was premature to start creating shadows and patterns of color before the graph had labels. I don’t know which teacher told me, but a graph with no labels means nothing. In this part of the workshop chapter, you’ll place labels on the vertical axis (one for vLabel and one for each bar) so that the user can see its value.

To place a dynamically generated Text Field, you’ll need to start with the graphing code from the first part of this workshop. Actually, you really only need the code through at least step 9. You’ll start by creating an instance of the TextFormat object. Place the following four lines above all the rest of the code in the file:

myFormat= new TextFormat(); 

You can use whichever font, size, and style you want. Just realize that the myFormat variable will be stored in the _root timeline.

To display the value of vLabel on the graph, place the following code right inside the first with() statement (it should start with with(_root.graph){—as you can see in line 1 of step 8 earlier):

1 targ=_root.graph; 
2 targ.createTextField("myLabel",1, 0 ,0,0,0); 
3 targ.myLabel.autoSize=true; 
4 targ.myLabel.text=vLabel; 
5 targ.myLabel.setTextFormat(_root.myFormat);

The first line just specifies an absolute address for all subsequent addresses. Line 2 makes a new TextField instance (called myLabel) and places it in level 1 of the graph clip. Line 3 sets autoSize to true so that the margins adapt automatically. In line 4, I set myLabel’s text to reflect the value of vLabel. Finally, the last line applies the myFormat format defined in step 1.

The text should appear but in the wrong location. Its _y location should be the same as the variable vMax. To set the _x position, we can effectively make it right justified by moving the text to the left a value equal to its width. Here are two more lines of code that go right after the scripts added in step 2.

targ.myLabel._x= -1*targ.myLabel._width;

You could actually subtract another 2 or 3 pixels to move the _x position a little farther if you think the right edge is too close to the graph.

Before we add code inside the for loop to display a text field for each bar, realize that the createTextField() method specifies a level number into which the text resides. We now have text in level 1, so we should start with a higher level and keep placing each text field into new level numbers. The following code will label each bar. Place it anywhere inside the for loop inside the with() code (that is, after the line that reads: for (i=0; i<data.length; i++){—line 2 in step 8 noted previously):

1 targ.createTextField("bar_"+i ,i+2, 0 ,0,0,0); 
2 var thisText=targ["bar_"+i]; 
3 thisText.autoSize=true; 
4 thisText.text=data[i]; 
5 thisText.setTextFormat(_root.myFormat); 
6 thisText._y=0; 
7 thisText._x=w+(i*1.5*w)- thisText._width/2;

Line 1 just creates a new text field with an instance name of bar_0 (and then bar_1, and so on). Notice, however, that the new text field is placed in a level number 2 greater than the value of the iterant i because the vLabel text is in level 1. Then, in line 2, I store a reference to the current text field (into thisText) using the standard bracket reference so that I can save typing in the following five steps (where I format and then position it). The last line is just a modified version of the code used for calculating the bar’s locations. I subtract half the width of the text field to make it appear center justified. (I could have set the _root.myFormat align property to "center", but then I’d have to remember to set it back if I expected it later to be, say, "left".)

The horizontal spacing is great, but those labels really should appear right on the bar. (If we want labels on the base of the bars, we could do that separately.) Change the line where thisText’s _y is set to read as follows:


Again, I just stole some code from where the bars are being drawn. It actually works great, but if the text is the same color as the graph, you won’t see it! To fix that, you can just pick a different color for the myFormat format (such as _root.myFormat.color=0x00FFFF;). Realize, however, that if you change the color before the myLabel instance has the setTextFormat() method applied (in step 2), you will color it too. Another alternative to make the text visible is to change the fill color in the bars.

Regardless of whether you changed the color orientation, I think it makes sense to move the labels. Try this final version for how thisText gets its _y set:

thisText._y=(data[i]/vLabel)*vMax - thisText._height;

By simply moving the text up a value that matches its height, it appears on top of each bar.

I’m sure we could spend a lot more time fine-tuning, but I want to show you one issue that will arise if you try to place both labels at the base of each bar and the values on top. The issue has to do with the level into which you instantiate the text fields. That is, using an expression such as i+2 works fine for the labels we’ve drawn, but it’s slightly more complex when you make two labels for each iteration. Try the following two steps to see what I’m talking about.

First, outside the with() statement, find where you set the values for the data variable (step 7 in the first section of this workshop chapter). Add this line of code right underneath:

graph.labels=["Apples", "Oranges", "Pears"];

The idea is that for each item in the data array, you now have an equivalent text label in the labels array.

Then, back inside the for loop that’s inside the with() statement (where you created the value labels), add the following code:

targ.createTextField("label_"+i ,i+1+100, 0 ,0,0,0); 
var thisText=targ["label_"+i]; 
thisText._x=w+(i*1.5*w)- thisText._width/2;

This looks pretty much the same, except in the fourth line, we grab a value out of the labels array (instead of data). Oh, and don’t worry that we’re storing a different reference in thisText. As long as we redefine that value before using it for the value text (bar_0 and so on), there’s no problem. The key thing to notice is that in the first line, we’re placing these new text fields way up in level 100 and greater. This solution falls apart when we have more than 100 bars. Perhaps you can figure out an expression that automatically places these “label” fields into even-number levels and the “value” text fields into odd-number levels.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint