Best Image Fallback

One of the biggest drawbacks of using the HTTP Reqeust method is that there is no easy way to support Best Image Fallback. Whereas with the PopChart Embedder you can use the fallback attribute to have PopChart Server automatically return an image in the best supported image format (refer to "Best Image Fallback"), you have to use JavaScript to hand-code this functionality into images that you embed using the HTTP request method.

The basic idea of such code is to use a combination of JavaScript and VBScript to detect the version of the client's browser and the plug-ins that browser supports. Based on that information, you then output a FLASH, SVG, or GIF image, depending on what the browser supports.

Example 11.3 shows how to create a FLASH image with Best Image Fallback to a GIF image.

Note: The JavaScript code for doing this is not for the faint-hearted. In fact, we hope a simple glance at the code necessary to do this will convince you to use the PopChart Embedder.

Example 11.3 Best Image Fallback with HTTP Request Method

<!-- // DETECTION CODE

var hasSVGSupport = false;

var hasFlash3up = false;

var hasFlash = false;

var useVBMethod = false;

var flash_str = "Shockwave Flash";

if (navigator.mimeTypes != null && navigator.mimeTypes.length > 0)

{

if (navigator.plugins[flash_str] != null) {

var pos=navigator.plugins[flash_str].description.search(/\d/);

var len = navigator.plugins[flash_str].description.length;

var ver=parseFloat(navigator.plugins[flash_str].description.slice(pos,len));

if(ver >= 3) {

hasFlash3up = true;

}

} else {

useVBMethod = true;

}

//-->

</script>

<!-- // MORE DETECTION CODE

On Error Resume Next

If useVBMethod = true Then

hasSVGSupport = IsObject(CreateObject("Adobe.SVGCtl"))

hasFlash = IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash"))

End If

//-->

</script>

<!-- //URL-ENCODING FUNCTION

function urlEncode(str) {

var ms = "%25#23 20?3F<3c>3E{7B}7D[5B]5D|7C^5E~7E`60";

var msi = 0;

var i,c,rs,ts;

while (msi < ms.length)

{

c = ms.charAt(msi);

rs = ms.substring(++msi, msi +2);

msi += 2;

i = 0;

while (true)

{

i = str.indexOf(c, i);

if (i == -1) break;

ts = str.substring(0, i);

str = ts + "%" + rs + str.substring(++i, str.length);

}

return str;

}

//-->

</script>

<!-- //CODE TO BUILD HTTP REQUEST

var pcscript = "Graph.Categories(Group 1, Group 2, Group 3)";

pcscript += "Graph.SetSeries(Item 1;54;75;85)";

pcscript += "Graph.SetSeries(Item 2;92;60;70)";

pcscript += "Graph.SetSeries(Item 3;69;87;37)";

var popchart_request = "http://localhost:2001";

popchart_request += "/?" + "@_FILEexamples/apfiles/bar.pcxml";

popchart_request += "@_PCSCRIPT" + urlEncode(pcscript);

//-->

</script>

<!-- //DISPLAY POPCHART

if (hasFlash3up == true || hasFlash == true) {

// FLASH ON IE

if (useVBMethod == true) {

document.write('<object width="540" height="330" ');

document.write('classid="clsid:D27CDB6E-AE6D-11cf-96B8-');

document.write('444553540000" codebase="http://download.');

document.write('macromedia.com/pub/shockwave/cabs/flash/');

document.write('swflash.cab#version=4,0,0,0"><param ');

document.write('name="MOVIE" value="');

document.write(popchart_request+'@_FLASH"></object>');

} else {

// FLASH ON NETSCAPE

document.write('<embed width="540" height="330" ');

document.write('type="application/x-shockwave-flash" ');

document.write('pluginspage="http://www.macromedia.com/');

document.write('shockwave/download/index.cgi?');

document.write('P1_Prod_Version=ShockwaveFlash" ');

document.write('src="'+popchart_request+'@_FLASH"></embed>');

}

} else {

// GIF

document.write('<img width="540" height="330" border="0"');

document.write('usemap="#13727203" src="');

document.writeln(popchart_request+'@_GIF" />');

}

//-->

</script>