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.
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.
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)
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(""", '"'));
const brandingData = JSON.parse("{{toJSON Branding}}".replaceAll(""", '"'));
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>