|
Embedding PopChart Images in a Web Page | PopChart Server User Guide 4.0.5 |
The final step in embedding your PopChart image is to write it to your web page. PopChart Embedder's getEmbeddingHTML() method will return a string that contains all of the HTML and/or JavaScript code necessary to embed the PopChart image into your web page. All you have to do is write this string to the web page.
Of course, how you write the getEmbeddingHTML() string your web page will depend on your programming environment. As we mentioned in "Introducing the PopChart Embedder" in Chapter 4, this chapter focuses on the JavaScript emebedder. To learn how to import the PopChart Embedder library for your programming environment, refer to Chapter 5, "Using PopChart Embedder."
To write the embedding HTML to your web page in JavaScript, all you need to do is wrap the getEmbeddingHTML() method call in a document.write() statement, as we have done in the line of code below.
document.write(myPopChart.getEmbeddingHTML());
After inserting this line of code into your web page, you will have all the code necessary to embed your PopChart image.
Example 4.7 Complete Example Code
<script language="JavaScript1.2" src="http://localhost:2001/jsEmbedder"></script>
<script language="JavaScript1.2">
<!-- // Embedding a PopChart Image
myPopChart = new PopChartEmbedder();
myPopChart.appearanceFile = "examples/apfiles/bar.pcxml";
myPopChart.imageType = "FLASH";
myPopChart.fallback = "STRICT";
myPopChart.pcScript = "title.setText(Hello World)";
Note: If you want to align your PopChart image (e.g. align="center", align="right"), you should surround this code with a <div> tag, and set the align attribute in the <div> tag.
The image below shows what the source for the example web page should look like once you have inserted this code.
This final image shows the resulting web page.
For your convenience, this HTML page is saved as example1.html in the examples/code/JavaScript folder.
Congratulations! You have just created your first PopChart image. In the next few chapters you will learn how to add dynamic data and special effects to this image.
|
|
