Javascript to Create Bar Charts | XM Community
Skip to main content

Hello Everyone,
I would like to create a simple bar chart in Qualtrics using Javascript. My main question is what kinds of features need to be enabled in my account such that this figure becomes visible?
The code I am using (see below) works when inserted into a survey that was built by someone at an institution with a broader license, but not with mine, and I would like to know what kinds of features need to be enabled. I am also attaching a photo of what this chart looks like when previewed in the account with the broader license (the preview tab remains blank, however, in my version of Qualtrics
Screenshot 2023-02-17 at 09.28.07.jpg).
Thanks a lot!
Best,
Chantal

--
This is the code:

Qualtrics.SurveyEngine.addOnload(function(){
google.charts.load("current", {
 packages: 'corechart'], 'language': 'pt'
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
 var data = google.visualization.arrayToDataTable(e 
r"Estimate", "Euro", { role: "style"}],
 >"Ihr Lohn",3,"gold"],
 r"Schätzung", 2, "color: #4885ed"],
 ]);
var view = new google.visualization.DataView(data);
 view.setColumns(C0, 1, 
{calc: "stringify",
 sourceColumn: 1,
 type: "string",
 role: "annotation"
},
2]);
 var options = {
  title: "Ihre Schätzung",
  width: 600,
  height: 400,
   vAxis: { 
viewWindow: {
    min: 0},
format: '#.#' },
  fontSize: 15,  
  bar: {
   groupWidth: "67.5%"
  },
  legend: {
   position: "none"
  },
 };
 var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
 chart.draw(view, options);
}
});

ChantalPe
I believe along with this code there has to be a source link as well. If not you can check within console the errors which need to be resolved. As of the license if you have Javascript option enabled there's nothing more you need.
Hope it helps!


https://community.qualtrics.com/XMcommunity/discussion/comment/55542#Comment_55542Thanks a lot, @Deepak!
I am quite new to this – could you let me know where I should be adding the source link (and where do I find the source link, given that this is a simple plot created "on the go" and not uploaded in any way?). Also, how do I see the error messages this code produces? My understanding is that Qualtrics only lets me save JavaScript if it is error-free.
Many thanks again,
Chantal


https://community.qualtrics.com/XMcommunity/discussion/comment/55544#Comment_55544Google charts is not defined. Try adding this to your survey header is source mode:

The Qualtrics JS editor doesn't let you save code that has syntax errors. There are other types of errors that can't be detected until the code runs.


https://community.qualtrics.com/XMcommunity/discussion/comment/55544#Comment_55544In addition to TomG , you can check for errors when you preview the survey and right click to inspect you would have a tab of console where the errors appear.
Hope it helps!


Thanks a lot everyone!


Leave a Reply