MarBar77 Posted January 21, 2018 Share Posted January 21, 2018 Hi, I am using Chart.js + zoom plugin to it with TUniHTMLFrame and I have strange behaviour. When I add chart to TUniHTMLFrame.HTML the Chart doesn't respond for mouse scroll and for left click and dragging. Zoom plugin to chart.js allows to make zoom on chart using two methods: either mouse scroll either mouse click and drag. But it doesn't work from uniGUI. When I make an test html file and open it in webrowser it works. Mouse hoover on chart works ok. In my application TUniHTMLFrame is on then panel and the panel is on the frame - maybe it matters? I use newest trial version and I have checked it with Edge and Chrome. Please help Below is the test HTML. <html> <style> .chart-container { position: relative; margin: auto; height: 95%; width: 95%; -moz-user-select: none; webkit-user-select: none; -ms-user-select: none; user-select: none; </style> <head> <script type="text/javascript" src="Chart.bundle.min.js"></script> <script type="text/javascript" src="chartjs-plugin-zoom.min.js"></script> </head> <body> <div class="chart-container"> <canvas id="myChart"></canvas> </div> <script> var myChart = new Chart(document.getElementById("myChart"), { type: "bar", data: { labels: ["0","1"], datasets: [ { backgroundColor: "#FF704D", label: "P+ [kW]", data: [1,2] }, { backgroundColor: "#98E698", label: "P- [kW]", data: [1,2] }, { backgroundColor: "#4d94ff", label: "Q+ [kvar]", data: [1,2] }, { backgroundColor: "#990099", label: "Q- [kvar]", data: [1,2] } ] }, options: { responsive: true, maintainAspectRatio: false, pan: { enabled: true, mode: "xy" }, zoom: { enabled: true, mode: "xy" }, tooltips: { mode: "index", intersect: true }, scales: { yAxes: [{ ticks: { beginAtZero: true } }], xAxes: [{ ticks: { } }] }, legend: { onClick: function(event, item) { var index = item.datasetIndex; var ci = this.chart; var meta = ci.getDatasetMeta(index); meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null; ci.update(); } } } }); function drawChartData(newData){ myChart.data = newData; myChart.update(); }; </script> </body> </html> 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.