Chart.js in PDF file

[AqMa]

Hi, I tryed to put some data do chart js in pdf template, should I use something else?

  <canvas id="myChart" width="400" height="400"></canvas>
<script>
var labels = [{{#each store.data}}{{formatDate timeStamp}}{{/each}}];
var value = [{{#each store.data}}{{round value}}{{/each}}];

cument.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Wartość [m3]',
            data: value,
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)',
            ],
            borderColor: [
                'rgba(54, 162, 235, 1)'
          
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

</script>

[jan_blaha]

var labels = [{{#each store.data}}{{formatDate timeStamp}}{{/each}}];

I don't know what formatDate returns, but this produces the most likely something like

var labels = [10-10-200311-11202201052008]

This is of course not a valid javasript and you should see an error in the profiler logs.
When you aren't sure, you can always switch to the text recipe and observe whats being printed with templating engine. Or you can also inspect it with the profiler.

To make this common task, putting input data into inline script tag, easier, jsreport provides core helper toJS
https://jsreport.net/learn/templating-engines#tojs-data-

[AqMa]

formatDate is my function to print formated date,
I'm trying to put in one array in object like this :

               <script>
                {{#each store.data}}
                const reportData= {
                data1: ['{{formatDate timeStamp}}'],
                wartosc: [{{round value}}]
                };
                {{/each}}



                const ctx = document.getElementById('myChart');
                const myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: reportData.data1,
                        datasets: [{
                            label: "Wartość [m3]",
                            data: reportData.wartosc,
                            backgroundColor: [
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(54, 182, 29935, 0.2)',

                            ],
                            borderColor: [
                                'rgba(54, 162, 235, 1)'
                        
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            </script>

And I'm geting something like that: 

<script>
                const reportData= {
                data1:['2022-08-17'],
                wartosc: [1.757]
                };
                const reportData= {
                data1:['2022-08-23'],
                wartosc: [0.451]
                };
                const reportData= {
                data1:['2022-08-29'],
                wartosc: [0.345]
                };
                const reportData= {
                data1:['2022-08-30'],
                wartosc: [1.236]
                };
                const reportData= {
                data1:['2022-08-31'],
                wartosc: [0.659]
                };
                const reportData= {
                data1:['2022-09-01'],
                wartosc: [0]
                };
                const reportData= {
                data1:['2022-09-14'],
                wartosc: [0.706]
                };
                const reportData= {
                data1:['2022-09-15'],
                wartosc: [0]
                };
                const reportData= {
                data1:['2022-09-18'],
                wartosc: [2.27]
                };
                const reportData= {
                data1:['2022-09-19'],
                wartosc: [0.565]
                };
                const reportData= {
                data1:['2022-09-20'],
                wartosc: [0.756]
                };
                const reportData= {
                data1:['2022-09-21'],
                wartosc: [0.874]
                };
                const reportData= {
                data1:['2022-09-22'],
                wartosc: [0]
                };
                const reportData= {
                data1:['2022-09-25'],
                wartosc: [0.1]
                };
                const reportData= {
                data1:['2022-09-26'],
                wartosc: [1.154]
                };
                const reportData= {
                data1:['2022-09-27'],
                wartosc: [0.841]
                };
                const reportData= {
                data1:['2022-09-28'],
                wartosc: [0.389]
                };

                const ctx = document.getElementById('myChart');
                const myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: reportData.data1,
                        datasets: [{
                            label: "Wartość [m3]",
                            data: reportData,
                            backgroundColor: [
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(54, 182, 29935, 0.2)',

                            ],
                            borderColor: [
                                'rgba(54, 162, 235, 1)'
                        
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
                
            </script>

[jan_blaha]

I did update our the playground example to use input data in the chart
https://playground.jsreport.net/w/admin/O3R9I~xl

Note if you need to format data before passing to the toJS, you can do it through another helper call

{{{toJS (doFormat someDates)}}}

function doFormat(someDates) {
   return someDates.map(d => xxxxsomemaping(d))
}

https://handlebarsjs.com/guide/expressions.html#subexpressions

[AqMa]

ok, thanks,
it's working,