using runtime html4,Adding HTML on runtime

My specific task is to be able to dynamically create HTML5 canvas on a TUniHTMLFrame so that I can show multiple TeeChart HTML5 according to user input.

I have seen sample projects such as the High Charts Demo, however since I need many TUniHTMLFrames with unique names as well as unique names for each canvas, I need to be able to programmatically achieve step 6) of Delphi Developer's guide within the High Charts Demo (which has helped a lot thank you).

However using

UniHTMLFrame1.HTML.Add('This browser does not seem to support HTML5 Canvas.' + 'This browser does not seem to support HTML5 Canvas.');

does not load the chart onto the TUniHTMLFrame itself. And for some reason if I try

ShowMessage(UniHTMLFrame1.HTML.Text);

it will load the chart in a new window like so (I am using someone's demo for testing but I cannot find the original source again my apologies) but I want it to load onto the UniHTMLFrame properly:

For reference below is a snippet of the relevant code.

UniHTMLFrame1.HTML.Add('This browser does not seem to support HTML5 Canvas.' +

'This browser does not seem to support HTML5 Canvas.');

ShowMessage(UniHTMLFrame1.HTML.Text);

UniSession.AddJS(

'Chart1=new Tee.Chart("canvas");' +

'Chart1.axes.left.title.text="Axis Y";' +

'Chart1.axes.bottom.title.text="Axis X";' +

'Chart1.title.text="Testing";' +

'var series=Chart1.addSeries(new Tee.Line(Chart1));' +

'series.data.x=[];' +

'Chart1.panel.transparent=true;' +

'Chart1.legend.visible=false;' +

'Chart1.zoom.enabled=false;' +

'Chart1.scroll.mouseButton=0;' +

'Chart1.scroll.direction="horizontal";' +

'Chart1.axes.bottom.setMinMax(200,499);' +

'scroller=new Tee.Scroller("canvas2", Chart1);'

);

UniSession.AddJS(

'for (var t=0; t<1000; t++) {' +

'series.data.values[t]=Math.random()*1000;' +

'series.data.x[t]=t;' +

'}' +

'Chart1.applyTheme("minimal");' +

'Chart1.applyPalette("lookout");' +

'Chart1.title.format.font.shadow.visible=false;' +

'Chart1.footer.format.font.shadow.visible=false;' +

'Chart1.panel.format.shadow.visible=false;' +

'for (var i=0; i < Chart1.series.items.length; i++)' +

'{' +

' Chart1.series.items[i].format.shadow.visible=false;' +

'}' +

'Chart1.applyTheme("minimal");' +

'Chart1.draw();'

);

UniSession.AddJS(

'Chart1.draw();'

);