Has anyone got Google Charts to work? | XM Community
Question

Has anyone got Google Charts to work?

  • 11 March 2020
  • 1 reply
  • 42 views

In our survey, we are collecting some data, and then, later on, we ask some survey questions about the data.

I've been trying to display that data in a chart before the question using some javascript. So far, no joy whatsoever.

I've attached the following into the Survey Header (using Look+Feel html editor):

"script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/script script
google.charts.load('current', {packages: ['corechart']});
/script"

(deleted the slashes in above)

And then into the individual question:

Qualtrics.SurveyEngine.addOnload(function()
{
var iDiv = document.createElement('div');
iDiv.id = 'chart_div';
iDiv.className = 'chart_div';

document.body.appendChild(iDiv);

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

// usual code to create the chart //

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

});

Not sure where to start really. The code does run (I tested using an alert).

I'm not sure that the google charts library is loading correctly - using developer tools, I can't see that the script has been added to the header. Similarly with the 'div' I tried to create .

Looks like this is something to do with dynamic loading?

Any ideas / examples of where people have got this to work would be gratefully received.

Thanks,

Phil

1 reply

Update, I've now got a chart to appear.

However, the same chart appears on every page, not just against the single question I want it to appear alongside:

Qualtrics.SurveyEngine.addOnload(function()
{
var iDiv = document.createElement('div');
iDiv.id = 'chart_div';
iDiv.className = 'chart_div';

document.body.appendChild(iDiv);

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

// usual code to create the chart //

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

Leave a Reply