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

Javascript to Create Bar Charts

  • February 17, 2023
  • 5 replies
  • 453 views

ChantalPe
Level 2 ●●
Forum|alt.badge.img+5

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([ 
["Estimate", "Euro", { role: "style"}],
 ["Ihr Lohn",3,"gold"],
 ["Schätzung", 2, "color: #4885ed"],
 ]);
var view = new google.visualization.DataView(data);
 view.setColumns([0, 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);
}
});

5 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • 1555 replies
  • February 17, 2023

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!


ChantalPe
Level 2 ●●
Forum|alt.badge.img+5
  • Author
  • Level 2 ●●
  • 12 replies
  • February 17, 2023

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


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6083 replies
  • February 17, 2023

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.


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • 1555 replies
  • February 17, 2023

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!


ChantalPe
Level 2 ●●
Forum|alt.badge.img+5
  • Author
  • Level 2 ●●
  • 12 replies
  • February 18, 2023

Thanks a lot everyone!