Using chart.js via htmlBox

Support
#1

Hello altogether!
I’m trying to implement some charts into a screen. For a first step I set up these lines, putting all the required code into one htmlBox.
The code works fine when loaded into my browser directly from file.
JMix shows up all the code, but only a blank canvas area. No charts.
The ‘alert’ command is fired, so for this swift test, the script block should be working…
Here’s the code:

<![CDATA[ 
                    <div>
                        <canvas id="myChart" width="800" height="400"></canvas>
                    </div>

                    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
                    <script type="text/javascript">

                        alert("Hallo1");

                        var ctx = document.getElementById('myChart');

                        var stars = [135850, 52122, 148825, 16939, 9763];
                        var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];

                        var myChart = new Chart(ctx, {
                         type: 'bar',
                         data: {
                            labels: frameworks,
                            datasets: [{
                                label: 'Github Stars',
                                data: stars
                            }]
                         },
                        })

                    </script>

                ]]>

            </templateContents>
         
        </htmlBox>

Thanks for all your ideas.

Maybe one question on top, for instance it might be necessary to have the block set in the area of the later html output. How could this be done?

Thanks in advance,
HP

#2

Hi @Eichers ,

I think htmlBox is not the right approach - the documentations clearly says:
Do not use HtmlBoxLayout for dynamic content or if you want to embed JavaScript code. Use BrowserFrame instead.

Don’t know your reason not to use the existing Chart Add-on, so you don’t need to do all the JS stuff your own.

Best Regards
Stefan

#3

Thanks Stefan!
I want to use different charting components and still more familiar with client embedding than serverside java. Just to use that code shown above seemed to be very easy. Of course I still must replace the data array with my current database values. But that’s it then.

What would be the way to have the “script” tags rendered in the header part of the output? maybe that should work, too. I still want to avoid iFrame, if there’s a way to get a single page, no sandbox,…

Thanks in advance,
br,
HP