can i render charts json data into handelbars using nodejs



  • 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>



  • 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

    <div id="DashboardData"></div>



  • 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?



  • 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
    
                 }
             })


  • 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
                }
            }
        }
    });


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

    Please use markdown to format your messages...



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



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



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



  • 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
                            }
                            }
                        });
    

Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.