Customizing Your PopChart

Using the Properties menu in the Visual Studio.NET interface, you can customize many aspects of the PopChart web server control, including:

Note: As you customize your graph, you may notice that some of your changes aren't appearing in the Visual Studio.NET user interface. However, your customizations will still appear if you preview your web page.

To learn how to access the Properties menu, read the following instructions.

To access the PopChart Properties menu

1. Select your PopChart image by clicking on it.

If you have changed the image type to FLASH or SVG, you may have difficulty selecting the image by clicking on it. Instead, you can use the TAB button to tab through the different components on your web page until the image is selected. You can also use the pull-down menu at the top of the Properties menu to switch between objects.

2. Bring up the Properties window (if it is not already visible) by selecting View > Properties Window.


Note that the properties are divided into the following groups: Appearance, Behavior, Data, Image Server, Layout, and Misc.

To edit any property, simply click on the box to the right of the property you want to change and start typing. Some properties (such as ImageType) have a limited range of values, and clicking on these will bring up a pull-down menu from which you can choose a pre-defined value.

Specifying a Title

One of the first things you will want to do is give your graph a title. To do this, simply locate the Title property (in the Appearance group) and type in the title of your graph.


Adding a Legend

To add a legend to your graph, simply select one of the following values for the Legend property (in the Appearance group): Right or Bottom.


If you have a pre-defined appearance file that already contains a legend, but you want to remove the legend, select None. If you want the legend to stay in the same location as in the appearance file, select USE_APPEARANCE_FILE.

Changing the Background Color

To change the background color, simply select a different color for the BackColor property (in the Appearance group). Clicking on this property will bring up a color menu from which you can pick a pre-defined color, or select your own custom color.

Note: Selecting Transparent will preserve the default value from a pre-defined appearance file, if you are using one.

You can also specify a gradient for your background color. A background gradient begins with one color (an the top or to the left) and then progressively shifts to another color (at the bottom or to the right).

To enable a background gradient, simply choose one of the following values for the BackGradientDir property (in the Appearance group): LeftToRight or TopToBottom. This specifies the direction of your gradient.

The background gradient will begin at the top or left of the graph with the color you choose for the BackColor property. It will end with the color specified in the BackGradientColor property, which you can change by clicking on and selecting a new color from the color menu.


Changing the Border

You can change several aspects of the border around your PopChart image. First of all, you can change the border type by selecting one of the following values for the BorderType property (in the Appearance group): None, Thin, Medium, Thick, DoubleThin, ThickThin, and ThinThick. Selecting None will remove the border. Selecting USE_APPEARANCE_FILE will preserve the setting from a pre-defined appearance file, if you are using one.

You can change the border color by selecting a different value for the BorderColor property (in the Appearance group). Clicking on this property will bring up a color menu from which you can pick a pre-defined color, or select your own custom color.

Changing the Graph Type

PopChart supports a wide variety of graph types. When you first create a PopChart web server control, your graph will be a vertical bar graph. By changing the value of the GraphType property, however, you can create any of the following graph types: Vertical Bar, Vertical Stacked Bar, Horizontal Bar, Horizontal Stacked Bar, Pie, Line, Line Bar Combo, XY Line, Stock, Radar, and Pareto.


Note: For more information about the various graph types, including what kind of data they support, refer to in Chapter 13, "Graph Types," of the PopChart Server Reference manual.

If you are using a pre-defined appearance file, and want to preserve the graph type from the pre-defined appearance file, you must select USE_APPEARANCE_FILE as the value of GraphType.

Changing the Graph Color Theme

You can change the colors that your graph uses by modifying its color theme. To change the color theme, select one of the following values for the ColorTheme property (in the Appearance group): None, Default, Standard16, Pastel, Southwest, EverGlades, Ocean, Subdued, Translucent. None will preserve your settings from a pre-defined appearance file.

Changing the Image Type and Size

Your PopChart image can be in any of the following formats: FLASH, GIF, SVG, and PDF. To change the image format, simply select the desired format as the value of the ImageType property (in the Appearance group).

To learn more about image formats, refer to Chapter 14, "Image Formats," of the PopChart Server Reference manual.

To change the image size, select one of the corners of the PopChart and drag it in or out, until the image is the desired size.

Adding Descriptive Text

PopChart Server can generate a 508 compliant text description of your graph for the visually impaired. All you have to do is change the value of the DLinkText attribute to True.

Note: If you're having trouble getting the d link to appear in the right location, you can place the PopChart image inside of a Panel component, which can be found under the HTML tab in your Toolbox.

To learn more about descriptive text, refer to Chapter 8, "Displaying 508 Compliant Descriptive Text."

Loading Data

You can load data to your PopChart Web Server Control in one of the following three ways: from a Data File, from PCXML, and with PCScript.

Important: You can only load data from a data file or PCXML if you are retrieving images from your own PopChart Server. Corda Technologies' free web services server (http://pcws.popchart.com), which is the default server for the PopChart Web Server Control, does not support this functionality. Refer to "Changing the Server Location" in Chapter B to learn how to make the PopChart Web Server Control use your PopChart Server.

Data File

You can load data from one of the following file formats: a comma .csv file, a tab-delimited data file, or an XML data file. You can learn about these formats from "Data Formats that PopChart Server Imports" in Chapter 6.

To load a data file, simply specify the location of your data in the DataFile property of the Data group. The data source can be located at a location relative to PopChart Server, or from a URL.

Note: You may need to change security permissions so that PopChart Server is allowed to access your file. For more information, refer to "Setting Path Permissions".

PCXML

You can also load data from a PCXML data source. You can learn about this format from "PopChart XML Data Format" in Chapter 6.

To load a PCXML file, simply specify the location of your data file in the PCXMLData property of the Data group. The data file can be located at a location relative to PopChart Server, or from a URL.

Note: You may need to change security permissions so that PopChart Server is allowed to access your file. For more information, refer to "Setting Path Permissions".

PCScript

For those familiar with PCScript, you can specify data and other formatting options in PCScript by changing the value of the PCScript property. PCScript is discussed in detail in Chapter 5, "PCScript," of the PopChart Server Reference manual.

Using a Pre-defined Appearance File

The PopChart Web Server Control allows you take advantage of only a limited set of PopChart features. This is to keep it from becoming too complicated for simple use. However, by using pre-defined appearance files, created by PopChart Builder, you can take advantage of many advanced layout and appearance features not available in the web server control.

Important: You can only use pre-defined appearance files if you are retrieving images from your own PopChart Server. Corda Technologies' free web services server (http://pcws.popchart.com), which is the default server for the PopChart Web Server Control, does not support this functionality. Refer to "Changing the Server Location" in Chapter B to learn how to make the PopChart Web Server Control use your PopChart Server.

To use a pre-defined appearance file, first type in the location of your appearance file as the value of the Apfile property (in the Appearance group). This location should be either a URL, or a location relative to PopChart Server.

Note: You may need to change security permissions so that PopChart Server is allowed to access your appearance file. For more information, refer to "Setting Path Permissions".

When you use a pre-defined appearance file, any web server control properties you define will override the settings from the appearance file. If you want to preserve the settings from the appearance file, most settings allow you to select a USE_APPEARANCE_FILE value. For colors, select Transparent if you want to preserve the appearance file setting.

Changing the Server Location

By default, the PopChart Web Server Control retrieves images from Corda Technologies's .NET Web Services server (http://pcws.popchart.com), which is currently free for developmental use.

Warning: Abuse of this service may require us to change this policy.

To retrieve images from your own server, simply change the Addr and CommAddr properties in the Image Server group to reflect the location of your server.

The Addr property should be changed to the location of PopChart Server's main port (i.e. the external server address, usually something like 10.0.0.1:2001), while the CommAddr property should be changed to reflect the location of PopChart Server's comm port (i.e. the internal comm port address, usually something like 10.0.0.1:2002).

To learn how to figure out what the values of these properties should be, refer to "Setting the Server Information" on page 4-9.

Note: Alternatively, you can customize the PopChart Web Server Control so that it always uses your PopChart Server. To do this, you will need to modify the source code (included in the dev_tools/dotnet_embedder/control_source folder) and rebuild it with Visual Studio.NET.