Google chart is not printing in form

Frappe Framework Print Formats
1

I defined HTML docfield in doctype and name it “chart” then create chart by google chart library and render it in custom script:

frappe.ui.form.on(“ali”, {
refresh: function(frm) {

$.getScript(“https://www.gstatic.com/charts/loader.js”, function(){

google.charts.load(‘current’, {‘packages’:[‘bar’]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Year’, ‘Sales’, ‘Expenses’, ‘Profit’],
[‘2014’, 1000, 400, 200],
[‘2015’, 1170, 460, 250],
[‘2016’, 660, 1120, 300],
[‘2017’, 1030, 540, 350]
]);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      }
    };

   var chart = new google.charts.Bar($('[title=chart]')[0]);

    chart.draw(data, options);

  }

});
}
});

it will be like this:

Pasted image1007×359 15 KB

but chart not in print view:

Pasted image1140×816 13.4 KB

if I press control + P it will appear:

Pasted image910×656 22.3 KB

Could you advice me How I can print chart in frappe framework?

2 Likes
2

@Mohammed_Redha tough one. JS libraries, triggers are not fully loaded in print formats.

Maybe you can modify the print format for HTML fields to include the full inner-html

(But you might still miss the Google Charts CSS)

3

From where I can modify Print format?

I tried to render it with img URI without luck:

chart_div.innerHTML = ‘<img src="' + chart.getImageURI() + '">’;

4

Hi, Actually i am also facing the same issue… how can i modify the print format to get the charts? kindly explain the steps how to change

5

hi, Did you get the chart in print format?