can i render charts json data into handelbars using nodejs

Aparna Bathula

this is my code i am trying to render dynamic data into charts
<canvas id='barchart'></canvas>
<script>
function toJSON(DashboardData) {
return JSON.stringify(DashboardData);
}
console.log("zxgvgdfg"+toJSON)
var ctx = document.getElementById('barchart').getContext('2d');
var barchart = new Chart(ctx, {
type: 'bar',

    data: {
        labels:{{toJSON.barcharResponse.dates}},
        datasets: [{
            label: 'Customers',
            data: {{toJSON.barcharResponse.values}},
            backgroundColor:'blue'
        }]
    },
    options: {

        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        },title: {
            display: true,
            text: 'Day Wise Stastics'
        },
        animation: {
            onComplete: function () {
                // set the PDF printing trigger when the animation is done
                // to have this working, the phantom-pdf menu in the left must
                // have the wait for printing trigger option selected
                window.JSREPORT_READY_TO_START = true
            }
        }
    }
});

</script>

Aparna Bathula

i got data my script but it will not append to chart object

but console.log i got data like this "[object HTMLDivElement]" and i declared div element in my html top

jan_blaha

Does it work with html recipe? If yes, can you make a minimal template that works in html but doesn't work with phantom-pdf and share it on playground?

Aparna Bathula

i created handelbars file there i wrote my canvas and chart json but i didn't get data to the charts

jsreport.render({
template: {
content: fs.readFileSync('./report.handlebars').toString('utf8'),
helpers: 'function toJSON() { return 1 }',
engine: 'handlebars',
recipe: 'phantom-pdf',

                 phantom: {
                     header: '<div style="float:right">Page {#pageNum} of {#numPages}</div>',
                     footer: "Rent Dues Report",
                     format: 'A4',
                     orientation: 'portrait',
                     footerHeight: '0.7cm',
                     headerHeight: '0.7cm',
                     margin: '0.5cm',
                     waitForJS: true
                 }
             },
             data: {
                 DashboardData: data,
                 startDate: startDate,
                 endDate: endDate,
                 dummydata: dummydata

             }
         })

Aparna Bathula

i want to pass data to this object

var ctx = document.getElementById('barchart').getContext('2d');
var barchart = new Chart(ctx, {
type: 'bar',

    data: {
        labels:DashboardData.barcharResponse.dates,
        datasets: [{
            label: 'Customers',
            data:DashboardData.barcharResponse.values,
            backgroundColor:'blue'
        }]
    },
    options: {

        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        },title: {
            display: true,
            text: 'Day Wise Stastics'
        },
        animation: {
            onComplete: function () {
                // set the PDF printing trigger when the animation is done
                // to have this working, the phantom-pdf menu in the left must
                // have the wait for printing trigger option selected
                window.JSREPORT_READY_TO_START = true
            }
        }
    }
});

jan_blaha

Maybe this helps? https://jsreport.net/blog/using-input-data-in-html-page-inline-javascript

Please use markdown to format your messages...

Aparna Bathula

i tried it but it's not help full for me

Aparna Bathula

I am able to render static data in charts but i am unable to render dynamic data in my handlebars.

Aparna Bathula

Here is the fiddle. Can You please check it once https://jsfiddle.net/xqf2og8s/1/

Farsid Mirza

You need to set duration:0

            var myChart3 = new Chart(chart3, {
                type: 'doughnut',
                data: {
                        labels: chart3Data.map(m=>m.scoreKey),
                        datasets: [{
                        label: 'Self Efficacy',
                        data: chart3Data.map(m=>m.scoreValue),
                        backgroundColor: colourSet
                        }]
                    },
                    options: {
                        maintainAspectRatio: false,
                        plugins: {
                            title: {
                                display: true,
                                text: 'Self Efficacy',
                            }
                        },
                        animation: {
                            duration: 0
                        }
                        }
                    });