Google Charts: Drawing Multiple Charts in IE

Question

I am trying to visualize some data into 4 different charts using google charts. Below is a sample of the code I use to draw the charts. It works in every browser except IE (works in edge).

In IE, it always draws the first chart, but the rest of the charts show "Object doesn't support property or method 'contains'." I am able to draw any one single chart in IE without problems, but if I add more than one I am presented with the error.

Any thoughts?

var chart = [
          new google.charts.Line(document.getElementById('chart-0')),
          new google.charts.Bar(document.getElementById('chart-1')),
          new google.charts.Bar(document.getElementById('chart-2')),
          new google.charts.Bar(document.getElementById('chart-3'))
        ],
        chartData = [
          new google.visualization.DataTable({
            cols: [
              {id: 'date', label: 'Date', type: 'string'},
              {id: 'calls', label: 'Calls', type: 'number'}
            ],
            rows: Calls.totalCalls()         
          }),
          new google.visualization.DataTable({
            cols: [
              {id: 'time', label: 'Time of Day', type: 'timeofday'},
              {id: 'calls', label: 'Calls', type: 'number'},
              {id: '', type: 'string', role: 'tooltip', p: {html: true}}
            ],
            rows: Calls.hourlyCalls() 
          }),
          new google.visualization.DataTable({
            cols: [
              {id: 'day', label: 'Day of the Week', type: 'string'},
              {id: 'calls', label: 'Calls', type: 'number'}
            ],
            rows: Calls.weeklyCalls() 
          }),
          new google.visualization.DataTable({
            cols: [
              {id: 'msr', label: 'Member Service Representative', type: 'string'},
              {id: 'calls', label: 'Calls', type: 'number'}
            ],
            rows: Calls.msrCalls() 
          })
        ],
        chartOptions = [
          { 
            chart: {
              title: 'Total Calls',
              subtitle: 'From ' + formData.start + ' to ' + formData.end
            },
            height: 500,
            pointSize: 5,
            curveType: 'function',
            animation: {
              duration: 2500,
              startup: true
            },
            series: {
              0: {
                pointSize: 5,
                curveType: 'function'
              }
            },              
            legend: {position: 'none'},
            vAxis: {
              viewWindow: {
                min: 0
              }
            }
          },
          {
            chart: {
              title: 'Total Calls By Hour',
              subtitle: 'From ' + formData.start + ' to ' + formData.end
            },
            height: 500,
            animation: {
              duration: 2500,
              startup: true
            },
            tooltip: {isHtml: true},
            legend: {position: 'none'}
          },
          {
            chart: {
              title: 'Total Calls By Weekday',
              subtitle: 'From ' + formData.start + ' to ' + formData.end
            },
            height: 500,
            animation: {
              duration: 2500,
              startup: true
            },
            legend: {position: 'none'}
          },
          {
            chart: {
              title: 'Total Calls By MSR',
              subtitle: 'From ' + formData.start + ' to ' + formData.end
            },
            height: 500,
            animation: {
              duration: 2500,
              startup: true
            },
            legend: {position: 'none'}
          }
        ];
    chart[0].draw(chartData[0],google.charts.Line.convertOptions(chartOptions[0]));
    chart[1].draw(chartData[1],google.charts.Bar.convertOptions(chartOptions[1]));
    chart[2].draw(chartData[2],google.charts.Bar.convertOptions(chartOptions[2]));
    chart[3].draw(chartData[3],google.charts.Bar.convertOptions(chartOptions[3]));

Answer 1

I had the same problem and found the solution in this issue on google-visualization-issues on GitHub. It appears to be a bug in version 42 which apparently is the current one. This jsfiddle shows the solution. The crucial parts is the following:

google.charts.load('41', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(loadAll);

And I think you need to load this script first to be able to use google.charts calls.

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>