Changing the Size of Your Image

Note: This step is recommended. If you do not set an image size, the size of the appearance file will be used for GIF and PNG images. However, the default size of the plug-in (which is usually smaller than you need) will be used for FLASH and SVG images.

The next step for embedding a PopChart image in your web page is to set the size of your image. You do this by setting the height and width attributes of the PopChart Embedder.

For example, if you wanted your embedded image to be 600 pixels wide and 400 pixels high, you would use the following two lines of code:

myPopChart.height = 400;

myPopChart.width = 600;

Alternatively, if you want to set the size of the image to be a certain percentage of the web page's width and height, you can set the htmlHeight and/or the htmlWidth attribute. For example, if we wanted the image to fill 75% of the web page's width, you could use the following command:

myPopChart.HTMLWidth = "75%";

Important: The htmlHeight and htmlWidth attributes can also accept height and width values in pixels, so be sure to use a percentage % sign to indicate that you are specifying a percentage.

htmlHeight and htmlWidth do not change the size of the image that PopChart Server generates, but they do tell the browser to scale the image to a certain size. Thus, you may sometimes find it desirable to set height and width when you set htmlHeight and htmlWidth.

After setting the image format, you should have inserted the following code into your web page:

Example 4.5 Example Code After Setting the Image Size

<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.width = 600; 

   myPopChart.height = 400; 

 

// Finished Embedding --> 

</script>