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>