I have an issue with highchart renderring with html-with-browser-client

vijaygohil1223

Hi i have generate graph it is working fine in jsreport server but when i call using api it is not returning graph html

jan_blaha

Please elaborate more... Add examples and check if there are errors in the console when you open output html.

vijaygohil1223

let reportRequest = {
    template: {
        shortid: "I2BVN0s",
        "recipe": "html-with-browser-client",
        "engine": "handlebars",
    },
    data: {
        "projectName": this.state.projectValue.name,
        "company_profile": this.state.company_profile,
        "company_detail": this.state.company_detail,
        "probing_data": this.state.probingList,
        "header_fields": header_fields,
        "layer_fields": layer_fields,
    },
};

let _this = this
jsreport.renderAsync(reportRequest).then(function(res) {
    if (type == "report_generate") {
        _this.setState({
            showReportSection: true,
            openModal: true,
            isReportLoading: false,
            displayPdfHtml: res.toString();
        })
    }
});

this is how my code look.. i wan to display res.string in my modal popup but there is no my graph html inside res string. but when i run it in side jsreport server it working file, i also try with chrome-pdf with html output. also i try chrome pdf toDataURI and display in iframe graph is not displaying well. i am attaching images of issues here:

jsreport server graph output with html-with-browser-client
https://prnt.sc/ycosft

jsreport server graph output with chrome-pdf
https://prnt.sc/ycp3w2

with renderAsync displaying res.toString() no graph html in side string data
https://prnt.sc/ycqlu6

jan_blaha

Regarding chrome-pdf. The problem can be that the chart is printed before the rendering is finished. For this purpose chrome-pdf provides printing trigger feature
https://jsreport.net/learn/chrome-pdf#printing-triggers
https://playground.jsreport.net/w/admin/O3R9I~xl

The problem with chart in html can have various causes.
For example, you can link the charting library from some external location and the request gets blocked by the browser when running in your app. You will need to isolate the problem. Try to just render html, save it to the disk and open the html page in browser. Do you see errors in F12 console? You get back from jsreport a raw html, so you should be able to find out why the chart isn't printed without any jsreport knowledge and with standard "debugging".