Josh Windsor Josh Windsor - 1 month ago 14
HTML Question

Google Chart IE9 Issue (undefined)

I'm developing some charts for use across all supported browsers and am getting an error only in IE9. Console states either: gvjs_wa is undefined, gvjs_t is undefined or gvjs_uz is undefined.

Thanks!

<HTML>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

function drawGLine() {
var bin =JSON.parse('[0.65, 0.78, 1.16, 1.68, 2.0, 2.56, 3.03, 3.65, 4.51, 5.16, 6.0, 6.58, 7.47, 8.57, 9.58, 10.38, 11.28, 12.25, 13.03, 13.78, 14.8, 15.69, 16.49, 17.33, 18.06, 18.96, 20.49, 21.85, 22.94, 24.14, 25.31, 26.27, 27.22, 28.12, 29.87, 31.56, 32.58, 33.67, 35.14, 37.33, 38.41, 40.02, 41.87, 43.31, 44.98, 46.03, 47.84, 49.1, 50.81, 52.38, 54.17, 55.37, 57.3, 59.13, 61.14, 63.39, 64.43, 65.92, 67.53, 69.04, 70.82, 72.07, 73.17, 74.9, 76.63, 78.16, 79.2, 80.33, 81.09, 82.36, 83.34, 84.35, 85.27, 86.48, 87.58, 88.37, 89.25, 89.89, 90.68, 91.24, 92.2, 92.83, 93.87, 94.82, 95.38, 95.94, 96.58, 97.21, 97.45, 97.85, 98.25, 98.57, 98.81, 98.81, 99.28, 99.44, 99.44, 99.6, 99.84, 100.0, 100.0]');
var culmativeData =JSON.parse('[0.0, 7.0, 14.0, 21.0, 28.0, 34.0, 41.0, 48.0, 55.0, 62.0, 69.0, 76.0, 83.0, 89.0, 96.0, 103.0, 110.0, 117.0, 124.0, 131.0, 138.0, 144.0, 151.0, 158.0, 165.0, 172.0, 179.0, 186.0, 193.0, 200.0, 206.0, 213.0, 220.0, 227.0, 234.0, 241.0, 248.0, 255.0, 261.0, 268.0, 275.0, 282.0, 289.0, 296.0, 303.0, 310.0, 316.0, 323.0, 330.0, 337.0, 344.0, 351.0, 358.0, 365.0, 372.0, 378.0, 385.0, 392.0, 399.0, 406.0, 413.0, 420.0, 427.0, 433.0, 440.0, 447.0, 454.0, 461.0, 468.0, 475.0, 482.0, 488.0, 495.0, 502.0, 509.0, 516.0, 523.0, 530.0, 537.0, 544.0, 550.0, 557.0, 564.0, 571.0, 578.0, 585.0, 592.0, 599.0, 605.0, 612.0, 619.0, 626.0, 633.0, 640.0, 647.0, 654.0, 660.0, 667.0, 674.0, 681.0, 688.0]');

var dataArray = [['X','Test']];

for(i = 0; i < bin.length; i++){
dataArray.push([culmativeData[i], bin[i]]);
}
var data = new google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'Test',
curveType: 'function',
legend: { position: 'bottom' },
vAxis:{ title:'Probability (%)',
viewWindow:{ min:0, max: 100}
},
hAxis:{ title:'Cost',
format: 'currency'}
};
var chart = new google.charts.Line(document.getElementById('chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
$( document ).ready(function(){
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawGLine);
});
</script>
</head>
<body>
<div id="chart"></div>
</Body>
</HTML>

Answer

i've seen questions in the past where jquery conflicts with google charts,
specifically with the setOnLoadCallback method

google.setOnLoadCallback not able to get the document elements
GoogleChart not working in MVC

to rule these out, suggest removing jquery

google's callback can be referenced directly in the load statement
and you can depend on the callback to know when the page is ready
so really no need for $( document ).ready anyway

recommend trying the following snippet...

function drawGLine() {
    var bin =JSON.parse('[0.65, 0.78, 1.16, 1.68, 2.0, 2.56, 3.03, 3.65, 4.51, 5.16, 6.0, 6.58, 7.47, 8.57, 9.58, 10.38, 11.28, 12.25, 13.03, 13.78, 14.8, 15.69, 16.49, 17.33, 18.06, 18.96, 20.49, 21.85, 22.94, 24.14, 25.31, 26.27, 27.22, 28.12, 29.87, 31.56, 32.58, 33.67, 35.14, 37.33, 38.41, 40.02, 41.87, 43.31, 44.98, 46.03, 47.84, 49.1, 50.81, 52.38, 54.17, 55.37, 57.3, 59.13, 61.14, 63.39, 64.43, 65.92, 67.53, 69.04, 70.82, 72.07, 73.17, 74.9, 76.63, 78.16, 79.2, 80.33, 81.09, 82.36, 83.34, 84.35, 85.27, 86.48, 87.58, 88.37, 89.25, 89.89, 90.68, 91.24, 92.2, 92.83, 93.87, 94.82, 95.38, 95.94, 96.58, 97.21, 97.45, 97.85, 98.25, 98.57, 98.81, 98.81, 99.28, 99.44, 99.44, 99.6, 99.84, 100.0, 100.0]');
    var culmativeData =JSON.parse('[0.0, 7.0, 14.0, 21.0, 28.0, 34.0, 41.0, 48.0, 55.0, 62.0, 69.0, 76.0, 83.0, 89.0, 96.0, 103.0, 110.0, 117.0, 124.0, 131.0, 138.0, 144.0, 151.0, 158.0, 165.0, 172.0, 179.0, 186.0, 193.0, 200.0, 206.0, 213.0, 220.0, 227.0, 234.0, 241.0, 248.0, 255.0, 261.0, 268.0, 275.0, 282.0, 289.0, 296.0, 303.0, 310.0, 316.0, 323.0, 330.0, 337.0, 344.0, 351.0, 358.0, 365.0, 372.0, 378.0, 385.0, 392.0, 399.0, 406.0, 413.0, 420.0, 427.0, 433.0, 440.0, 447.0, 454.0, 461.0, 468.0, 475.0, 482.0, 488.0, 495.0, 502.0, 509.0, 516.0, 523.0, 530.0, 537.0, 544.0, 550.0, 557.0, 564.0, 571.0, 578.0, 585.0, 592.0, 599.0, 605.0, 612.0, 619.0, 626.0, 633.0, 640.0, 647.0, 654.0, 660.0, 667.0, 674.0, 681.0, 688.0]');

    var dataArray = [['X','Test']];

    for(i = 0; i < bin.length; i++){
        dataArray.push([culmativeData[i], bin[i]]);
    }
    var data = new google.visualization.arrayToDataTable(dataArray);
    var options = {
        title: 'Test',
        curveType: 'function',
        legend: { position: 'bottom' },
        vAxis:{ title:'Probability (%)',
            viewWindow:{ min:0, max: 100}
        },
        hAxis:{ title:'Cost',
        format: 'currency'}
    };
    var chart = new google.charts.Line(document.getElementById('chart'));
    chart.draw(data, google.charts.Line.convertOptions(options));
}
google.charts.load('current', {
  callback: drawGLine,
  packages: ['line']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

EDIT

in addition to the above, using a previous or frozen version might also help
instead of using the 'current' version

the latest frozen version, at this time, is '45'
you can go back to '41'

in this specific case, version '44' corrects the problem, i.e.

google.charts.load('44', {
  callback: drawGLine,
  packages: ['line']
});

recommend using frozen versions anyway,
to ensure something doesn't break when the 'current' release is updated...

Comments