MarBar77 Posted January 13, 2018 Share Posted January 13, 2018 Hi, I need an advice. I am testing Chart.JS using TUniHTMLFrame. And I have such problem. 1. I am creating chart with data by, and it works fine var ctx = document.getElementById("myChart");'; var myChart = new Chart(ctx, options); ... Script is sended using UniSession.SendResponse(scr, True) or UniSession.AddJS(script) - It has no meainig which one I am using. where in options are chart config and chart data. 2. No I want to change chart data, so I am calling the script again with other data, and changes are showing in HTMLFrame, but when I am using mouse on it then it seems that two charts are available, so I think "I have created two instances by var myChart and no I see two chart in HTML frame", ok so i want to destroy prevous instance by using myChart.destroy(). But it doesn work, I call a script with myChart.destroy() but nothing happens. It looks like in script which is called later, server doesny recognize myChart object. 3. So I think that there are some methods to update data of chart and they are, but when i call them and make myChart.update nothing changes. It sillt looks like reference to myChart doesn't exist anymore. Of courese when doing test with update I create chart only once. Do you have any tips how to do that. How exactly JS from TUniHTML frame works? How works UniSession.AddJS(script) and UniSession.SendResponse(scr, True)? Is this called only once? Thanks for any tips. Marcin Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 14, 2018 Share Posted January 14, 2018 Hi, I need an advice. I am testing Chart.JS using TUniHTMLFrame. And I have such problem. Chart.js - ? what is it ? Quote Link to comment Share on other sites More sharing options...
MarBar77 Posted January 14, 2018 Author Share Posted January 14, 2018 Free charting JS library for HTML5 http://www.chartjs.org/ Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 14, 2018 Share Posted January 14, 2018 Hi, Which edition and build of UniGUI are you using ? Quote Link to comment Share on other sites More sharing options...
MarBar77 Posted January 14, 2018 Author Share Posted January 14, 2018 Last Trial Version Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 14, 2018 Share Posted January 14, 2018 Maybe this post can help you: http://forums.unigui.com/index.php?/topic/6208-thtmlframe-not-show-with-two-graphics/&do=findComment&comment=31749 Quote Link to comment Share on other sites More sharing options...
MarBar77 Posted January 14, 2018 Author Share Posted January 14, 2018 So, I change the way I handle the chart just by reloading html with new data. Now I want to make an ajaxRequest when someone click the legend on chart to make some actions. So, I make in html script with chart options and override default legend onClick method: scr := scr + ' legend: {'; scr := scr + ' onClick: function(event, item) {'; scr := scr + ' ajaxRequest(MainForm.pnlClient.pnlFrame,"loaded",[]);'; scr := scr + ' alert("clicked");'; scr := scr + ' }'; and I want to send ajaxRequest to pnlFrame. Hovewer it doesn't work. The event TMainForm.pnlFrameAjaxEvent is not fired. So I checked it with only MainForm then is is fired. How to force ajax event of pnlFrame to be triggered? Quote Link to comment Share on other sites More sharing options...
peacosta Posted January 16, 2018 Share Posted January 16, 2018 So, I change the way I handle the chart just by reloading html with new data. Now I want to make an ajaxRequest when someone click the legend on chart to make some actions. So, I make in html script with chart options and override default legend onClick method: scr := scr + ' legend: {'; scr := scr + ' onClick: function(event, item) {'; scr := scr + ' ajaxRequest(MainForm.pnlClient.pnlFrame,"loaded",[]);'; scr := scr + ' alert("clicked");'; scr := scr + ' }'; and I want to send ajaxRequest to pnlFrame. Hovewer it doesn't work. The event TMainForm.pnlFrameAjaxEvent is not fired. So I checked it with only MainForm then is is fired. How to force ajax event of pnlFrame to be triggered? MarBar77, Could you share an example of how to integrate the chartjs? Quote Link to comment Share on other sites More sharing options...
MarBar77 Posted January 19, 2018 Author Share Posted January 19, 2018 1) Put UniHTMLFrame and UniButton on MainForm 2) In OnClick of Button add code below. It should work There is only one thing. I don't know why chart is generating after third click only, after this click is working every time. procedure TForm1.UniButton1Click(Sender: TObject); var scr: string; begin scr := ''; scr := scr + '<html>'; scr := scr + ' <style>'; scr := scr + ' .chart-container {'; scr := scr + ' position: relative;'; scr := scr + ' margin: auto;'; scr := scr + ' height: 95%;'; scr := scr + ' width: 95%;'; scr := scr + ' </style>'; scr := scr + ' <head>'; scr := scr + ' <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>'; scr := scr + ' </head>'; scr := scr + ' <body>'; scr := scr + ' <div class="chart-container">'; scr := scr + ' <canvas id="myChart"></canvas>'; scr := scr + ' </div>'; scr := scr + ' <script>'; scr := scr + 'var ctx = document.getElementById("myChart");'; scr := scr + 'var myChart = new Chart(ctx, {'; scr := scr + ' type: "bar",'; scr := scr + 'data: {'; scr := scr + 'labels: ["1","2","3"],'; scr := scr + 'datasets: [{data: [1.2, 3.4, 1.4]}]},'; scr := scr + ' options: {'; scr := scr + ' responsive: true,'; scr := scr + ' maintainAspectRatio: false,'; scr := scr + ' title: {'; scr := scr + ' display: "true",'; scr := scr + ' text: "ala ma kota"'; scr := scr + ' },'; scr := scr + ' tooltips: {'; scr := scr + ' mode: "index",'; scr := scr + ' intersect: "true"'; scr := scr + ' },'; scr := scr + ' scales: {'; scr := scr + ' yAxes: [{'; scr := scr + ' ticks: {'; scr := scr + ' beginAtZero: true'; scr := scr + ' }'; scr := scr + ' }]'; scr := scr + ' },'; scr := scr + ' legend: {'; scr := scr + ' onClick: function(event, item) {'; scr := scr + ' var index = item.datasetIndex;'; scr := scr + ' var ci = this.chart;'; scr := scr + ' var meta = ci.getDatasetMeta(index);'; scr := scr + ' meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;'; scr := scr + ' ci.update();'; scr := scr + ' }'; scr := scr + ' }'; scr := scr + ' }'; scr := scr + '});'; scr := scr + '</script>'; scr := scr + '</body>'; scr := scr + '</html>'; UniHTMLFrame1.HTML.Text := scr; end; If anybody knows how to force unihtml frame to work by first click please let me know. Marcin Quote Link to comment Share on other sites More sharing options...
Kattes Posted November 10, 2018 Share Posted November 10, 2018 Here is an example I just created using ChartJS showing random data in two line charts: http://kattes.bplaced.net/download/ChartJS-Demo.zip Have fun ! 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.