3

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]));
Neve12ende12
  • 1,154
  • 4
  • 17
  • 33
  • It does not work in any version supported by the API (8+) – Neve12ende12 Aug 19 '15 at 20:43
  • 1
    Misterious, and hard to debug with the internal error-handling of the charts-API – Dr.Molle Aug 20 '15 at 17:57
  • there's a bug with multiple material charts, see my answer [here](http://stackoverflow.com/questions/32884121/google-charts-drawing-multiple-bar-charts-with-dual-axis-in-ie/32907208#32907208) for an example of a workaround – WhiteHat Oct 07 '15 at 11:43

1 Answers1

2

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>
ehannes
  • 499
  • 4
  • 18