I am building a custom component that uses straight html/js (not React), just like the very last example in these docs.
The example at the bottom (Fancy Non-React JavaScript Example) is almost exactly what I need, and it says it should work out of the box for me but it is not. I make a new custom components, copy the model example into the model field, the iframe example into the iframe field and nothing appears on the retool dashboard. Is this example broken? Thanks!
Hey @sarah_ergatta! Ack, happy to help with this.
It seems that the src for one of the scripts https://www.chartjs.org/samples/latest/utils.js now returns a 404.
Looks like we can use https://github.com/chartjs/Chart.js/blob/master/docs/scripts/utils.js instead and the component fully renders.
(working) iFrame Code:
<html> <style> body { margin: 0; } </style> <script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script> <script src="https://github.com/chartjs/Chart.js/blob/master/docs/scripts/utils.js"></script> <script> window.Retool.subscribe(function(model) { if (!model) { return } model.options.tooltips['callbacks'] = { footer: function(tooltipItems, data) { var sum = 0; tooltipItems.forEach(function(tooltipItem) { sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; }); return sum; } }; var chartData = model.data; var ctx = document.getElementById('canvas').getContext('2d'); if (!window.myMixedChart) { window.myMixedChart = new Chart(ctx, model); } else { window.myMixedChart.data = model.data; window.myMixedChart.options = model.options; window.myMixedChart.update(); } }) </script> <div class="chart-container" style="position: relative;margin: auto; height:100vh; width:100vw;"> <canvas id="canvas"></canvas> </div> </body> </html>
woo hoo! That new link made my canvas drawings work! thanks for your help!
