HISPhilip Posted December 20, 2017 Share Posted December 20, 2017 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('<canvas id="canvas" width="600" height="300">This browser does not seem to support HTML5 Canvas.</canvas>' + '<canvas id="canvas2" width="600" height="100">This browser does not seem to support HTML5 Canvas.</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: https://imgur.com/a/Q0oru For reference below is a snippet of the relevant code. UniHTMLFrame1.HTML.Add('<canvas id="canvas" width="600" height="300">This browser does not seem to support HTML5 Canvas.</canvas>' + '<canvas id="canvas2" width="600" height="100">This browser does not seem to support HTML5 Canvas.</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();' ); Quote Link to comment Share on other sites More sharing options...
HISPhilip Posted December 21, 2017 Author Share Posted December 21, 2017 UniSession.AddJS('document.body.innerHTML += ''<canvas id="canvas" width="600" height="300">' + 'This browser does not seem to support HTML5 Canvas.</canvas><canvas id="canvas2" width="600" height="100"></canvas>'';' + 'document.getElementById(''' + UniHTMLFrame1.JSId +''').innerHTML = ''<canvas id="canvas" width="600" height="300"></canvas>' + '<canvas id="canvas2" width="600" height="100">This browser does not seem to support HTML5 Canvas.</canvas>'';'); Using this instead of UniHTMLFrame1.HTML.Add works, but now the rest of the program freezes (Chart is still 'alive'). edit: I can't figure out how to upload via unigui so here is an external link for the program: https://files.fm/u/y2exh6aw Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 21, 2017 Share Posted December 21, 2017 Hi, Which edition and build are you using ?! Best regards, Quote Link to comment Share on other sites More sharing options...
HISPhilip Posted December 21, 2017 Author Share Posted December 21, 2017 I'm using build uniGUI 1.0.0 build 1421 using RAD Studio 10.1 Berlin. Does this mean it's working fine on your end? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 21, 2017 Share Posted December 21, 2017 Are you using a trial edition ?! Quote Link to comment Share on other sites More sharing options...
HISPhilip Posted December 21, 2017 Author Share Posted December 21, 2017 No, I'm using a full version but I will shortly upgrade to the newest version and see if there's any difference. edit: Just tested with the latest version from the customer portal, still have the same issue. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 21, 2017 Share Posted December 21, 2017 Hi, Ok, First of all please visit here: http://forums.unigui.com/index.php?/topic/6291-new-users-please-adjust-your-forum-email-address/ And try to use this solution: procedure TMainForm.UniButton2Click(Sender: TObject); ... // UniSession.AddJS('document.body.innerHTML += ''<canvas id="canvas" width="600" height="300">' + // 'This browser does not seem to support HTML5 Canvas.</canvas><canvas id="canvas2" width="600" height="100"></canvas>'';' + // 'document.getElementById(''' + UniHTMLFrame1.JSId +''').innerHTML = ''<canvas id="canvas" width="600" height="300"></canvas>' + // '<canvas id="canvas2" width="600" height="100">This browser does not seem to support HTML5 Canvas.</canvas>'';'); UniHTMLFrame1.JSInterface.JSCall('update', ['<canvas id="canvas" width="600" height="300"></canvas><canvas id="canvas2" width="600" height="100"></canvas>']); //<-------------------------- UniSession.AddJS( 'Chart1=new Tee.Chart("canvas");' + ... end Best regards, Quote Link to comment Share on other sites More sharing options...
HISPhilip Posted December 21, 2017 Author Share Posted December 21, 2017 Thank you! It works perfectly now, if possible could you show me where I can find more information about JSInterface and when to use as opposed to UniSession.AddJS? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.