ReferenceError: google is not defined | Google Charts in pdfkit

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

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