1

Here is an example (that doesn't work in qualtrics, works fine if I just make an HTML file and open in browser)

In qualtrics:

  • Make a (text/graphic question)

  • In HTML put <canvas id="myChart" style="width:100%;max-width:700px"></canvas>

  • In the question javascript put

jQuery.getScript("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js", function(){
var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});

});

Then, if you try to preview the survey , the chart will not load and you will get a console error of TypeError: undefined is not an object (evaluating 'iScale.axis')

If you change the source to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js (version 3.3.2) then the chart will load.

Any way to deal with this? Or is the only option to stick with version 3.3.2 or older?

Aside: Instead of using jQuery.getScript, you can just put the script source in the look and feel header section. Same behavior though.

majmun
  • 131
  • 9
  • Might want to read this first before using v3: https://www.chartjs.org/docs/master/getting-started/v3-migration.html – LeeLenalee Sep 10 '21 at 15:52
  • @LeeLenalee if the problem was with migration or integration, I think that there would be errors with the script in a HTML and js file as well, instead of only in Qualtrics. – majmun Sep 10 '21 at 16:40
  • Yeah well still might just correct your code first because you said it runs correct in normal html which it clearly doesnt do because your options get ignored – LeeLenalee Sep 10 '21 at 17:01

0 Answers0