ReferenceError: google is not defined | Google Charts in pdfkit - express

Question

I was trying to render graph in pdf generated using pdfkit. I found this solution https://quickchart.io/documentation/google-charts-image-server/#example
const GoogleChartsNode = require('google-charts-node');
// Define your chart drawing function
function drawChart() {
const data = google.visualization.arrayToDataTable([
['City', '2010 Population',],
['New York City, NY', 8175000],
['Los Angeles, CA', 3792000],
['Chicago, IL', 2695000],
['Houston, TX', 2099000],
['Philadelphia, PA', 1526000]
]);
const options = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Population',
minValue: 0
},
vAxis: {
title: 'City'
}
};
const chart = new google.visualization.BarChart(container);
chart.draw(data, options);
}
// Render the chart to image
const image = await GoogleChartsNode.render(drawChart);
This works fine and I got a generated graph in my pdf. So tried to give dynamic data into new function I written
function drawtIntelligenceBarchar(intelligence) {
console.log(intelligence)
try{
const data = google.visualization.arrayToDataTable([
['Intelligence', 'Intelligence Level',],
["Linguistic", intelligence["Linguistic"]],
["Logical", intelligence["Logical"]],
["Musical", intelligence["Musical"]],
["Visual-Spatial", intelligence["Visual-Spatial"]],
["Kinesthetic", intelligence["Kinesthetic"]],
["Intra-Personal", intelligence["Intra-Personal"]],
["Inter-Personal", intelligence["Inter-Personal"]],
["Naturalistic", intelligence["Naturalistic"]],
["Existential", intelligence["Existential"]]
]);
const options = {
title: 'Intelligence Graph',
chartArea: {width: '70%'},
hAxis: {
title: 'AVERAGE GOOD VERY GOOD EXCELLENT',
minValue: 0,
maxValue: 100,
},
vAxis: {
title: 'INTELLIGENCE TYPE'
}
};
const chart = new google.visualization.BarChart(container);
chart.draw(data, options);
} catch(error){
console.log(error);
}
}
const intelligenceGraph = await GoogleChartsNode.render(drawtIntelligenceBarchar(intelligence));
Then I got this error
ReferenceError: google is not defined
It will be awesome if you can help me on this.

Answer 1

I faced a similar issue a while ago, the thing here is that you have to consider that google charts is a library that is loaded when the page is rendered, meaning that in order to generate a pdf it should be already there before generating it.
The approach you can use is to use a headless browser to emulate that the page is open and then the dependencies are loaded so when you send the HTML to pdfkit it will contain everything you need to generate the pdf or you can use selenium to do something similar. The tricky part however is to adjust the window size to hold all the charts, but you can sort it out with some trials.

Answer 2

This is due to accessibility of variable intelligence inside child function from external function. There is a solution by quickcharts.io . Instead of using a function use const variable for write code in js string and pass.
const drawtIntelligenceBarchar = `
const data = new google.visualization.DataTable();
data.addColumn('string', 'Intelligence');
data.addColumn('number', 'Intelligence Level (%)');
data.addRows([
["Linguistic", ${intelligence["Linguistic"]}],
["Logical", ${intelligence["Logical"]}],
["Musical", ${intelligence["Musical"]}],
["Visual-Spatial", ${intelligence["Visual-Spatial"]}],
["Kinesthetic", ${intelligence["Kinesthetic"]}],
["Intra-Personal", ${intelligence["Intra-Personal"]}],
["Inter-Personal", ${intelligence["Inter-Personal"]}],
["Naturalistic", ${intelligence["Naturalistic"]}],
["Existential", ${intelligence["Existential"]}]
]);
const options = {
title: 'Intelligence Graph',
chartArea: {width: '50%'},
hAxis: {
title: 'AVERAGE GOOD VERY GOOD EXCELLENT',
minValue: 0,
maxValue: 100,
},
vAxis: {
title: 'INTELLIGENCE TYPE'
}
};
const chart = new google.visualization.BarChart(container);
chart.draw(data, options);`;
const intelligenceGraph = await GoogleChartsNode.render(drawtIntelligenceBarchar, {width: 500,
height: 300,});
doc.image(intelligenceGraph, 0, 0,)
For more information visit the source code documentation