update google chart when the value changes

Question

Hello, I am using a slider as input and want to display the result of a function in real-time above the slider. I am using the Google charts library to handle the visualization. I have created a toy example to illustrate my problem. If there is a page break between question one and this field that draws the chart, it works fine. But if the question and the chart are on the same page, the chart does not update, when I move the slider. My javascript code is:

Qualtrics.SurveyEngine.addOnload(function()
{
    google.charts.load('current', {'packages':['corechart']});
     google.charts.setOnLoadCallback(drawChart);

    var q1 = "${q://QID1/ChoiceNumericEntryValue/1}";

     function drawChart() {
       var data = google.visualization.arrayToDataTable([
         ['factor', 'result', 'baseline'],
         ['1', parseInt(q1)*1, 0],
         ['10', parseInt(q1)*10, 0],
         ['50', parseInt(q1)*50, 0 ]
       ]);

       var options = {
         title: 'Multiplication',
         curveType: 'function',
       legend: { position: 'none' }
       };

       var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

       chart.draw(data, options);
     }

});

Best answer by Shashi

Piped text only works once we submit the page by clicking next buuton.
Instead of reading the values by piped text, read it using JS and to make it dynamic you need to call the google draw function every time the value of slider changes.

Shashi · Accepted Answer

Piped text only works once we submit the page by clicking next buuton.
Instead of reading the values by piped text, read it using JS and to make it dynamic you need to call the google draw function every time the value of slider changes.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded