Google Chart Inconsistent | XM Community
Skip to main content

Hi all,

I have code that involves a dynamic pie chart from google.charts. It worked perfectly two days ago. Now, the chart will appear for some blocks but not for others even though the code is exactly the same. Not sure what is going on... If anyone has any insight, I would be grateful. 

```````

Qualtrics.SurveyEngine.addOnload(function() {
    var qid = this.questionId;
    var elid = qid + "~1~true-result";

    var jq = jQuery.noConflict();
    var df_numimm = jq.Deferred();
    
    google.charts.load('current', {
        'packages': 'corechart']
    });

    keepTrying();

    df_numimm.done(function() {
        google.charts.setOnLoadCallback(drawChart);
        jq(choice_table).ready().mousemove(function() {
            google.charts.setOnLoadCallback(drawChart);
        });
        jq(choice_table).ready().on("touchmove",function() {
            google.charts.setOnLoadCallback(drawChart);
        });
        jq(choice_table).ready().click(function() {
            google.charts.setOnLoadCallback(drawChart);
        });
        jq(choice_table).ready().on("tap",function() {
            google.charts.setOnLoadCallback(drawChart);
        });

    });

    function keepTrying() {
        table_selector = jq("#" + qid).find('.QuestionBody');
        slider = document.getElementById(elid);
        if (slider !== null && table_selector !== null) {
            choice_table = table_selectors0];
            df_numimm.resolve();
            console.log('I have located all elements, state of prom is: ' + df_numimm.state());
            return df_numimm.promise();
        } else {
            console.log('I have failed to locate elements, retrying.');
            setTimeout(function() {
                keepTrying();
            }, 500);
        }
    }

    function drawChart() {
        var local_result = 0;
        var result = parseInt(slider.value);
        if (isNaN(result) === true) {
            console.log('Waiting for user input');
        } else {
            console.log('User is choosing');
            local_result = result;
        }
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Race');
        data.addColumn('number', 'Share');
        data.addRows(e
            .'Other', 100 - local_result],
            z'You', local_result],
        ]);

        // Set chart options
        var options = {
            'title': '% You vs. Other in your County',
            'width': 400,
            'height': 300
        };
        
         // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }   

});

``````````

Alright, so I got this to work. For anyone having this problem in the future, you need to add the following code to the header:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300">&nbsp;</div>

 

HOWEVER, for whatever reason, this code works perfectly fine in the Qualtrics preview web/mobile page, but not when I sent out survey link for testing purposes. What gives? Has anyone encountered this problem and if so, how did you fix it?


Leave a Reply