Publishing a Basic PopChart

The following 15 steps will help you create and publish a basic PopChart image. To follow these steps, all you need is a computer capable of installing and running PopChart Server and PopChart Builder 4.0.5. Although these steps require that you know how to install and run software, these steps do not require a lot of computer or web page know-how.

The goal of this section is to create a web page that contains a PopChart image. To do this, we will need to install PopChart 4.0.5. We will then create an appearance file, which can be used as a template for dynamically generated PopChart images. In this particular example, however, we are simply using it to create static graphs. Finally, we will create a basic web page. By inserting a small segment of JavaScript code into this web page, we will be able to publish our PopChart image in the web page.

To Publish a Basic PopChart Image

1. Download and install PopChart 4.0.5.

If you need help with this, refer to Chapter 2, "Installation," in the PopChart Server User Guide.

2. Run PopChart Builder. You can do this by clicking on the PopChart Builder shortcut. The PopChart Wizard will automatically start.


3. Select Create New Project from a Template and click Next.


4. Select a template and click Next.

For information about the various graph types that PopChart supports, refer to Chapter 13, "Graph Types," in the PopChart Server Reference manual.

5. Change any data you wish to change in the Data Selection window and click Next.

You can copy data from most spreadsheet programs or table formats and paste it directly into the data editor.
Most of the time, when you create appearance files, this data is irrelevant—it is there just to help you visualize what your graph will look like. Your appearance file will be used to graph data that you send to it dynamically, not the static data you input here. For our Quick Start Guide, though, we will just use static data.
If you need help organizing your data, refer to Chapter 12, "Data Organization," in the PopChart Server Reference manual. If you want to know more about sending dynamic data to PopChart Server, refer to Chapter 6, "Sending Dynamic Data to PopChart Server," in the PopChart Server User Guide.

6. Choose a color theme and make any wanted changes to the border and background color and click Finish.

This will take you out of the PopChart Wizard and into the PopChart Builder designer. If you wanted to create a more complex appearance file, you could continue to customize it in the designer.

7. You have now created your first appearance file. Save your graph by selecting on File > Save.

We will save this graph as Chart1.pcxml. Click Save to save the image.

Note: By default, the PopChart Server looks for appearance files in the chart_root/apfiles folder of the PopChart installation directory. This is also the default save location for PopChart Builder.


8. Now that you have created an appearance file, you need to create some code to embed your PopChart image. To generate this code, click on File > Sample Code > Java.


9. (Optional) If you will be running PopChart Server on a computer other than the one you are currently on, change the PopChartServer URL path to the name of the computer running PopChart Server. Unless you have changed the server port, leave the :2001 at the end of the address. otherwise, change 2001 to your new server port number.

10. Select an image format for your graph (GIF, Flash or SVG).

11. Choose JavaScript in the Show Code For option.

The code that you see is sample code that embeds a PopChart image into a web page, using the appearance file you just saved.
This particular code uses the JavaScript PopChartEmbedder. The PopChartEmbedder is a utility written for several different environments and languages that helps you embed PopChart images. For more information about using the PopChartEmbedder to embed PopChart images into a web page, refer to Chapter 4, "Embedding PopChart Images in a Web Page," in the PopChart Server User Guide.

12. Click the button marked Copy Code to Clipboard.


13. Open a text editor (such as Notepad) and paste the data from your clipboard within the page.

Most of the time you will want to add dynamic data and/or special effects to your graph. For information about sending dynamic data to PopChart Server, see Chapter 6, "Sending Dynamic Data to PopChart Server," in the PopChart Server User Guide. For information about special effects, like Drill-down, Data Labels, and PopUp Text, see Chapter 7, "Interactive and Special Effects," in the PopChart Server User Guide.

Note: Make sure you save your web page as straight text. By default, some text editors (e.g. Mac® OS X's Text Edit), will save the page in a different format, such as RTF, which will cause a JavaScript error when you try to view the page. Usually, you will be able to override this behavior within your text editor.

14. Save the page as chart1.html. You can save it to any location on your computer.


15. Start PopChart Server using the installed shortcuts (located in the Start Menu for Microsoft Windows®). On Windows systems, you should see the PopChart Server splash screen for a brief moment while PopChart Server starts.

Note: On non-Windows systems, you will not see a splash screen.

If PopChart Server encounters any problems while it starts up, it will notify you with an error message. If you have any problems starting PopChart Server, you should refer to "Starting PopChart Server" in Chapter 2 of the PopChart Server User Guide for help.

16. Open the chart1.html page you created in a web browser. You should now be able to see your final graph in the browser.

Congratulations! You have successfully published a basic PopChart image. To learn more about how to use PopChart 4.0.5, refer to the documents mentioned at the beginning of this Quick Start Guide.