Tips for Creating Good Appearance Files

An important thing to remember when you are creating an appearance file is that you are not creating a static image; you are designing a template for dynamic charts and graphs. Because of that, the image that you see in PopChart Builder can often be very different from the image generated by PopChart Server.

You should consider the following factor when creating a well-designed PopChart appearance file:

Object Names

In order to send dynamic data to and/or customize objects in an appearance file, each object must have its own unique name. You will use this name to reference the object when you send PCScript or PopChart XML commands to PopChart Server. For example, the PCScript command to modify the data inside a text box is:

textbox.SetText(My Title)

In this case, the name of the text box object is textbox. Were the name something else, like title, for instance, the command would be:

title.SetText(My Title)

Thus, it is important to know what your objects are named and to make sure there are no duplicate names. By default, PopChart Builder assigns each object a unique name. The first graph will be named graph, and all subsequent graphs will be named graph2, graph3, and so on. Text boxes and legends follow a similar naming scheme, except text boxes are based on the name textbox, and legends on the name legend.

You may want to change these names to something more easy to remember. For example, if you have pie graph named graph2 that you use to show voting percentages, a name like votingpie might be more suitable to your needs.

To Change the Name of an Object

1. Select the appropriate object.

2. Bring up the properties dialog for that object by either double-clicking on the object or selecting the appropriate option from the Properties menu.

3. Click on the Advanced tab.

4. Enter in the new object name in the box to the right of the words Object Name.

5. Save the settings by clicking on Apply or OK.

Title Text Box

One very important object is the title text box. The text box named title is always considered the title text box. When you display descriptive text, the contents of this text box will be used to determine the title of your graph.

To set a Title Box in an appearance file

1. Select the text box that contains the project title.

2. Right-click on the text-box.

3. Select Set as Title.

This will change the object name to title. If another text box was previously set as the title text box, it will be given a different name.

Appearance File Dimensions

When you create an appearance file, you should always try to make sure that the dimensions of the appearance file are exactly the same as the dimensions of the images you want to output. Changing the dimensions of your appearance file dynamically can lead to reduced image quality or unexpected repositioning of your objects (see below).

To change the dimensions of your appearance file, you can either click and drag out a corner of the appearance file's border in the PopChart Builder interface, or you can select Project Properties > General and change the Size in Designer values.

Dynamically Resizing the Appearance File

You can dynamically resize your PopChart images through the height and width PopChart Embedder attributes or the @_HEIGHT and @_WIDTH server commands. However, resizing PopChart images does not mean that the image will be scaled. It will simply enlarge or reduce the dimensions of your PopChart images. Objects may be repositioned if they are outside of the appearance files boundaries.

You can also scale your PopChart image with the htmlHeight and htmlWidth PopChart Embedder attributes. This not recommended if you are using the GIF or PNG image formats, as image quality will suffer.

Sample Data

It is difficult to anticipate what or how much data will be put into your template. A graph that looks good with a very small sample data set may look horrible with twenty or thirty categories and series. Therefore, you should try to make your sample data set as close as possible to the data sets that you expect to be used with your appearance file.

To change your sample data, click on your graph and select Properties > Data Editor.

You may also want to test your template with a variety of data sets to make sure that it still looks good.

Colors and Color Themes

Set colors for all of your data series, not just the ones that you see in PopChart Builder. That way, if your user inputs more data series than you expected, you still have control over the colors in your graph. You can set these by changing the Series Colors buttons on the top half of your Graph Properties > Colors dialog. Alternatively, you may want to provide your user with color themes refer to Chapter 11, "Color Themes," in the PopChart Server Reference manual.

Dynamic Object Resizing and Repositioning

Because the data that you use with appearance files is dynamic, objects such as text boxes, legends, and graphs can grow to unexpected sizes. To compensate for that, PopChart Server can try to resize your objects. For example, If a text box doubles in height, overlapping with a graph, PopChart Server will shrink the graph to compensate.

Most of this functionality is turned on by default. However, you may not want this behavior. For example, if you have a text box that you want to always stay the same size, you may need to turn off its Auto Size Adjustment option.

The following is an explanation of options that affect object repositioning. It is divided into the following topics:

Global Repositioning Options

In the Advanced pane of the Properties > Project Properties dialog, you will find the following global repositioning options. By default, they are all enabled.

Adjust Graph Size to Prevent Overlap

If checked, this setting automatically resizes graph objects so that they do not overlap with other objects, such as text boxes, legends, and other graphs.

Auto Resize to Fit Height and Width

If checked, this setting attempts to automatically resize the objects in the PopChart image so that they scale to the dimensions specified in the request to PopChart Server. This applies only when the height and width PopChart Embedder attributes or the @_HEIGHT and @_WIDTH server commands have been used.

Note: PopChart Server will not resize any fonts, so you may not like the results you get with this setting if you shrink the dimensions of the appearance file.

Keep Components Within Height and Width

If checked, this setting forces the appearance file to format itself so that all of its objects remain inside of its border. This setting is useful when dealing with dynamic data, as the legend and graph objects can grow to unanticipated sizes.

Graph Resizing

When you create a graph, all parts of the graph are placed within predefined boundaries. This includes everything on the grid area, as well as text, tick marks, and scales.

By default, the data you provide is scaled to fit within these boundaries. This means that as the scales and scale label text grow, the grid area may shrink to compensate. However, you can set the tick marks and scales to be outside of these boundaries so that the grid area always remains the same size.

The following two settings, in the Graph Properties >General dialog affect boundary settings:

If the label text is larger than the graph, you may want to select this option. Note that if the labels extend beyond the project border they will be cut off.

This option is also beneficial when two graphs are combined (overlaid) for data comparisons. It allows you to easily align the grid areas.

The size of scale labels may also affect graph labels (see "Scale Label Adjustments" in Chapter 1).

Legend Resizing

A legend will never shrink in size.

By default, it also will never grow in size, even if it runs out of room to display legend items. However, you can change this behavior in the General pane of the Legend Properties dialog. Checking the Grow Vertically if Needed and Grow Horizontally if Needed boxes will allow the legend to grow vertically and horizontally, respectively. The Max Width and Max Height values place a limit on how much the legend can grow.

If, after trying to grow the legend, PopChart Server still cannot fit all of the items inside of the legend's bounds, it will try to fit the items by adding additional columns to the graph. You can specify the maximum number of columns by checking the Set number of columns to option and entering a number in the text box to the right of the column.

If the legend items still do not fit, PopChart Server will shrink the legend font. you can set the minimum size of the legend font in the Minimum Font Size box.

As a last resort, PopChart Server will attempt to truncate the legend item. You can control how much of the legend item PopChart Server truncates by entering a value in the Truncate Down to X Characters box. The default value is 20.

Text Box Resizing

By default, text boxes will automatically shrink so that the text fits exactly within the box. besides the margin, which can be set in the General pane of the Text Box Properties dialog, there will be no space between the text and the text box border.

In the Auto Size Adjustment section of this same dialog, you disable this behavior by unchecking the Shrink to Width and Shrink to Height boxes, which allow the text box to shrink its width and shrink its height, respectively.

A text box cannot grow wider than the value of its Max Width option, which is 600 by default. However you cannot limit the amount a text box can grow vertically.

Scale Label Adjustments

Depending on the number of categories in your graph, PopChart Server may have difficulty displaying all of the scales labels. When this happens, PopChart Server will try several actions to automatically accommodate the scale labels.

You can control how PopChart Server adjusts the scale labels by checking or unchecking scale label adjustments in the Bottom Scale Properties > Label dialog pane. You can also make manual adjustments to the scale labels to prevent overlap; however, you are less likely to prevent overlap when you make these adjustments manually.

Automatic Scale Label Adjustment
By default, PopChart Server will automatically try to adjust the scale labels to prevent overlap. If this option has been disabled, you can re-enable automatic scale adjustments by selecting As Needed as the value of the Perform the Following Adjustments option.
If overlap occurs, it will try to apply any rules that have been checked below in order to prevent overlap. It begins by applying the highest (closest to the top of the pane) checked rule. If that doesn't work, it discards the rule and attempts to apply the next checked rule. It does this until it has exhausted its options. PopChart Server then attempts to apply the adjustments in tandem (i.e. Wrap Text and Shrink Font, Wrap Text and Stagger Labels, etc.) until it exhausts its options. If this fails, it attempts to apply the rules three at a time, and so on.
These are the adjustment options available to PopChart Server. You can disable any option by unchecking it.
Wrap Text
When selected, PopChart Server will wrap the text in the scale label at the specified number of characters.
Shrink Font To
When selected, PopChart Server will reduce the font of the scale label to the specified point size.
Stagger Labels
When selected, PopChart Server will stagger the labels so that every other one appears on an alternating level.
Rotate
When selected, scale labels will be rotated to try to make more room. They will be rotated to the number of degrees specified in the box to the right of this option.
Skip Labels
When selected, certain labels will be skipped. The bar, line, area, or plot point will still be shown for that category, but the scale label will not.
The graph will use the specified number to determine how many labels to skip. For example, if the value is 1, it will display every other label. If the value is 2, it will display every third label.
Manual Scale Label Adjustments
You may always make the following adjustments to your scale labels. These options are shown at the top of the Bottom Scale Properties > Label dialog pane.
Limit Label Character Length
This option limits the character length of each scale (category) label to the specified number. If the label is longer, it will truncate it and add a period on the end. This period counts as part of the character length. You can set different values for the length of regular labels and the length of rotated labels.
First label to be displayed
This specifies the first bottom scale label that will actually be shown.
You can also make any of the adjustments listed in "Automatic Scale Label Adjustment" above by disabling automatic scale adjustments and selecting the adjustment manually.
Disabling Automatic Scale Adjustments
You can disable automatic scale adjustments by selecting Always as the value of the Perform the Following Adjustments option. When you do this, PopChart Server will do nothing to prevent the overlap of scale labels. Additionally, any scale label adjustments that are checked will always be applied, even if there is no overlap.

Aligned Objects

When you align a group of objects, you tell PopChart Server to shrink or grow these objects in such a manner that the objects will always be aligned with each other.

To align objects

1. Select an object.

2. Select the other object(s). These object(s) will be aligned to the first object.

3. Select Alignment from the menu bar or right-click the selected item to display the alignment options.

4. Specify the desired alignment option.

Anchored Objects

Anchors are used to specify the position of graph, legend, and text box objects as they expand.

For example, if additional text is added to a text box, the anchor points determine how the text box will adjust for the additional text. If you specify the Vertical Anchor as Bottom, and the Horizontal Anchor as Right, then as you add text to the text box, the bottom right of the text box will remain stationary, while the text box will expand left and upwards to accommodate the additional text.

To anchor an object

1. Select the object you wish to anchor.

2. Using the Properties menu, select the object's properties dialog.

3. Select the Advanced tab.

4. Change the anchor settings using the radio buttons.

You can anchor an object vertically to these three positions: Top, Middle, or Bottom. You can anchor an object horizontally to these three positions: Left, Center, or Right.

5. Select Apply or OK to save your settings.

Image Format

For best image quality, we recommend that you serve your PopChart images in the Macromedia® Flash or SVG formats. If you are serving your images in a different format, you should consider the following:

PDF and EPS
PDF and EPS images allow no interactivity. Drill-down effects, rollover data labels, transparency, and PopUp text will not be shown in these image formats.
PNG
Interactivity in PNG is supported via image-maps. Because of this, some older browsers may not support Drill-down effects, rollover data labels, and PopUp text. Also, feedback will be slow—it may take up to 2 seconds for rollover data labels or PopUp text to appear.
GIF
If you anticipate that your appearance file will be used mostly to generate GIF images, you should probably take into consideration that GIF images only support 256 colors. If you use a lot of colors or gradients in your graph, the image may not look as good as you want it to look when it is shown as a GIF image. Be sure to preview your appearance file to make sure that it looks okay as a GIF image.
Interactivity in GIF is supported via image-maps. Because of this, some older browsers may not support Drill-down effects, rollover data labels, and PopUp text. Also, feedback will be slow—it may take up to 2 seconds for rollover data labels or PopUp text to appear.
WBMP
If you anticipate that your appearance file will be used mostly for WBMP images, you will have to consider several factors as you create your appearance file. For details, refer to "WBMP" in Chapter 14 of the PopChart Server Reference manual.