.Net Studio can't generate chart

bigpari

I am currently running .Net studio and connection with .net core 3.1 to it and it seems that I can't generate a chart.
I am getting my chartjs via CDN https://cdn.jsdelivr.net/npm/chart.js and using it in a script in my body.
If I use the nodejs studio it work so I am wondering if there is a config that makes script or external script work.
Here is my studio setup:

using jsreport.Binary;
using jsreport.Local;
using System.Diagnostics;
using System.Runtime.InteropServices;

var rs = new LocalReporting()
     .UseBinary(RuntimeInformation.IsOSPlatform(OSPlatform.Windows) ? jsreport.Binary.JsReportBinary.GetBinary() : jsreport.Binary.Linux.JsReportBinary.GetBinary())
     .RunInDirectory(Path.Combine(Directory.GetCurrentDirectory(), "jsreport"))
     .KillRunningJsReportProcesses()
     .Configure(cfg => cfg
        .FileSystemStore()
        .BaseUrlAsWorkingDirectory()
        .AllowedLocalFilesAccess())
     .AsWebServer()
     .RedirectOutputToConsole()
     .Create();

await rs.StartAsync();

Process.Start(new ProcessStartInfo("cmd", $"/c start http://localhost:5488"));

Console.ReadKey();

await rs.KillAsync();

And here is my template

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style>{#asset /FactSheet/FactSheet.css @encoding=utf8}</style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
    <body onload="AddChart()">
                <div class="rightSection infoZone">
                     <canvas id='growthChart'></canvas>
                    <canvas id='growthChart2'></canvas>
                    <span id="debug"></span>
                </div>
           </div>

       </div>

        <script>
           function AddChart() {
                const ctx = document.getElementById('growthChart').getContext('2d');
                const ctx2 = document.getElementById('growthChart2').getContext('2d');

                const investmentAssetData = JSON.parse("{{toJSON InvestmentAsset}}".replaceAll("&quot;", '"'));
                const brandingData = JSON.parse("{{toJSON Branding}}".replaceAll("&quot;", '"'));

            const growthChartDate = investmentAssetData.GrowthProjections.Projections.map((p, index) => {
                    return {
                        label: p.Title,
                        data: [p.InitialValue, p.EndDateValue],
                        borderColor: brandingData.LineChartColors[index].value
                    }
                });

                var growthChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['1992', '2020'],
                        datasets: growthChartDate
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        animation: {
                            onComplete: function () {
                                // set the PDF printing trigger when the animation is done
                                // to have this working, the chrome-pdf menu in the left must
                                // have the wait for printing trigger option selected
                                window.JSREPORT_READY_TO_START = true
                            }
                        }
                    }
                });

                var growthChart2 = new Chart(ctx2, {
                    type: 'line',
                    data: {
                        labels: ['1992', '2020'],
                        datasets: growthChartDate
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        animation: {
                            onComplete: function () {
                                // set the PDF printing trigger when the animation is done
                                // to have this working, the chrome-pdf menu in the left must
                                // have the wait for printing trigger option selected
                                window.JSREPORT_READY_TO_START = true
                            }
                        }
                    }
                });
            }
        </script>   
    </body>
</html>

jan_blaha

Do you see a chart that just isn't fully painted? Or it isn't shown at all?
I see you use printing trigger, are you sure the template has it enabled?

What do you see in the output when you render?

bigpari

The chart is not rendered at all. (completely blank)
For the printing trigger, I just tested it enabling it in the studio wait for the printing trigger and got an error.

Error: Timeout Error: pdf generation not completed after 30000ms
    at Timeout.<anonymous> (D:\snapshot\jsreport\node_modules\jsreport-chrome-pdf\lib\conversion.js:293:19)
    at listOnTimeout (internal/timers.js:549:17)
    at processTimers (internal/timers.js:492:7)

jan_blaha

There can be some js error, that is causing the window.JSREPORT_READY_TO_START = true isn't reached. The error should be visible in the output.

bigpari

It seems I had an error with the replaceAll which is supported on ES12+ thanks for the help. (had to use replace)
It is now working as expected.

Thanks for the help.