Adding TCHART object to HTML page using JSCRIPT

Scott Small · Post by **Scott Small** » Mon Jan 16, 2006 11:36 pm

Due to a lawsuit that Microsoft lost, Microsoft will be modifying IE to perform the following: (http://www.eweek.com/article2/0,1895,18 ... x1k0000599)
IE changes will be implemented and to warn developers that users won't be able to directly interact with Microsoft ActiveX controls loaded by the APPLET, EMBED or OBJECT elements without first activating the user interface with an extra mouse click. In a white paper (http://msdn.microsoft.com/library/?url= ... ctivex.asp) microsoft identfies several mechanism to work around the changes. Fundamentally, jscript needs to be applied to insert the HTLM elements at runtime. The changes (using the CreateElement technicque) that Microsoft suggest seem to work with most ActiveX control that I have tested with; however, an IE crash occurs when using the TChart7 class id (clsid:FAB9B41C-87D6-474D-AB7E-F07D78F2422E) when doing the createElement for the OBJECT (If I use other valid clsids for other ActiveX controls, everything seems to work just fine).
The code being used in the HTML test page is:

Code: Select all

<body>
this is a test
		<div id="embedControlLocation">
	      <script id="TChart1" src="AddTChart.js"></script> 
	    </div>	
end of test
</body>

the code used in the jscript file :

Code: Select all

/// add TeeChart
alert('now testing type 1 of createElement using trend clsid');
var myObjectElement = document.createElement('<OBJECT id="TChart1" style="DISPLAY: none; WIDTH: 100%; FONT-FAMILY: monospace; TOP: 0px; HEIGHT: 302px" type=application/x-oleobject height="95.63%" width="96.23%" classid="clsid:FAB9B41C-87D6-474D-AB7E-F07D78F2422E"></OBJECT>');
alert('here 1');
/// for testing
//var myObjectElement = document.createElement('<object id="TChart1" classid="clsid:FAB9B41C-87D6-474D-AB7E-F07D78F2422E"></object>');
//var myObjectElement = document.createElement('<object id="elementid" classid="clsid:098F2470-BAE0-11CD-B579-08002B30BFEB"></object>');

var myParamElement1 = document.createElement('<PARAM NAME="Base64" VALUE="VFBGMAtUQ2hhcnRDaGFydAAETGVmdAIAA1RvcAIABVdpZHRoA5ABBkhlaWdodAP6ABJUaXRsZS5U
ZXh0LlN0cmluZ3MBBghUZWVDaGFydAAAAAAAAAACAAAAAP////8=">');  
alert('here2');
myObjectElement.appendChild(myParamElement1);
alert('here3');
embedControlLocation.appendChild(myObjectElement);	
alert('here4');

When executing the jscript file, the alert message "here2" is never reached as IE fails when performing the first createElement statement. Is there anything special that needs to be done to create the TCHART html elements by jscript?

Thanks,
Scott Small

Post by **Pep** » Tue Jan 24, 2006 3:24 pm

Hi Scott,

you can add the TeeChart as an element by jscript using the following code :

Code: Select all

<HTML>
<HEAD>
<SCRIPT>
function createTeeChart(){
    // Create teechart object with value="First Choice" and then insert 
    // this element into the document hierarchy.
    var newTeeChart = document.createElement("<OBJECT ID='TChart1' WIDTH='450' HEIGHT='290' CLASSID='CLSID:FAB9B41C-87D6-474D-AB7E-F07D78F2422E'></OBJECT>")
    document.body.insertBefore(newTeeChart);
}
</SCRIPT>
</HEAD>

<BODY>
<INPUT TYPE="BUTTON" ONCLICK="createTeeChart()" VALUE="Create a TeeChart Component"><BR>
<INPUT TYPE="BUTTON" ONCLICK="alert ( document.body.outerHTML )" VALUE="Click here to see HTML">
<BODY>
</HTML>

Scott Small · Post by **Scott Small** » Mon Jan 30, 2006 10:58 pm

Thanks for the reply. The code that you supplied works as long as the the TChart control does not have to be added within another object, for instance within a cell of a table.
I modified the code as follows, in attempting to place the TChart object within the table cell:

Code: Select all

<HTML> 
<HEAD> 
<SCRIPT> 
function createTeeChart(){ 
    // Create teechart object with value="First Choice" and then insert 
    // this element into the document hierarchy. 
    var newTeeChart = document.createElement("<OBJECT ID='TChart1' WIDTH='450' HEIGHT='290' CLASSID='CLSID:FAB9B41C-87D6-474D-AB7E-F07D78F2422E'></OBJECT>") 
    document.body.insertBefore(newTeeChart); 
} 
</SCRIPT> 
</HEAD> 

<BODY> 

<table><tr><td>
		<script>
		    var newTeeChart = document.createElement('<OBJECT id=TChart1 style="DISPLAY: block; WIDTH: 100%; FONT-FAMILY: monospace; TOP: 0px; HEIGHT: 302px" type=application/x-oleobject height="95.63%" width="96.23%" classid=clsid:FAB9B41C-87D6-474D-AB7E-F07D78F2422E></OBJECT>'); 
			var myParamElement1 = document.createElement('<PARAM NAME="Base64" VALUE="VFBGMAtUQ2hhcnRDaGFydAAETGVmdAIAA1RvcAIABVdpZHRoA5ABBkhlaWdodAP6ABJUaXRsZS5U
ZXh0LlN0cmluZ3MBBghUZWVDaGFydAAAAAAAAAACAAAAAP////8=">');  
			newTeeChart.appendChild(myParamElement1);
		    document.body.insertBefore(newTeeChart); 
		</script>
            <OBJECT id=TeePreviewer1 
            data=data:application/x-oleobject;base64,XIqDG4Bil065g2V3ct5x0VRQRjAPVENoYXJ0UHJldmlld2VyAAAA 
            classid=clsid:1B838A5C-6280-4E97-B983-657772DE71D1>
			</OBJECT>	
</td></tr></table>
<INPUT TYPE="BUTTON" ONCLICK="alert ( document.body.outerHTML )" VALUE="Click here to see HTML"> 
</BODY> 


</HTML>

When using the insertBefore method, you get the following dialog text displayed:

Internet Explorer cannot open the Internet site file://\\server1\test\test2.htm.

Operation aborted

Do you have any other suggetion? The issue again, is that using the original method supplied by Microsoft appears to work for all tried ActiveX controls except TChart. There appears to be something special with the TChart ActiveX control that is not allowing it to be added per the Microsoft suggested method as desribed in the initial query.

Regards,
Scott

Narcís · Post by **Narcís** » Thu Feb 09, 2006 4:06 pm

Hi Scott,

This is a known problem and we have been able to reproduce it. I've added it to our defect list to be fixed for future releases. In the meantime, the only solution is exporting the chart to an image file and loading this image in the table cell.