1

I'm creating multiple bar charts with dual axis on the same page. It works fine in chrome but it doesn't work in IE. In IE it shows an error

"Object doesn't support property or method 'contains'"

HTML & JavaScript code as follows:

      

startChart();
      function startChart() {
       
          var data = new google.visualization.arrayToDataTable([
              ['Galaxy', 'Distance', 'Brightness'],
              ['Canis Major Dwarf', 8000, 23.3],
              ['Sagittarius Dwarf', 24000, 4.5],
              ['Ursa Major II Dwarf', 30000, 14.3],
              ['Lg. Magellanic Cloud', 50000, 0.9],
              ['Bootes I', 60000, 13.1]
          ]);

          var options = {
              width: 900,
              chart: {
                  title: 'Nearby galaxies',
                  subtitle: 'distance on the left, brightness on the right'
              },
              series: {
                  0: {
                      axis: 'distance'
                  }, // Bind series 0 to an axis named 'distance'.
                  1: {
                      axis: 'brightness'
                  } // Bind series 1 to an axis named 'brightness'.
              },
              axes: {
                  y: {
                      distance: {
                          label: 'parsecs'
                      }, // Left y-axis.
                      brightness: {
                          side: 'right',
                          label: 'apparent magnitude'
                      } // Right y-axis.
                  }
              }
          };

          var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
          chart.draw(data, options);
  var chart1 = new google.charts.Bar(document.getElementById('dual_y_div1'));
          chart1.draw(data, options);

      };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 900px; height: 500px;"></div>
<div id="dual_y_div1" style="width: 900px; height: 500px;"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
Manu Singh
  • 414
  • 4
  • 16

2 Answers2

2

Following is an example, with the changes needed, for multiple Material Charts 

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

function startChart() {

  var data = new google.visualization.arrayToDataTable([
    ['Galaxy', 'Distance', 'Brightness'],
    ['Canis Major Dwarf', 8000, 23.3],
    ['Sagittarius Dwarf', 24000, 4.5],
    ['Ursa Major II Dwarf', 30000, 14.3],
    ['Lg. Magellanic Cloud', 50000, 0.9],
    ['Bootes I', 60000, 13.1]
  ]);

  var options = {
    width: 900,
    chart: {
      title: 'Nearby galaxies',
      subtitle: 'distance on the left, brightness on the right'
    },
    series: {
      0: {
        axis: 'distance'
      }, // Bind series 0 to an axis named 'distance'.
      1: {
        axis: 'brightness'
      } // Bind series 1 to an axis named 'brightness'.
    },
    axes: {
      y: {
        distance: {
          label: 'parsecs'
        }, // Left y-axis.
        brightness: {
          side: 'right',
          label: 'apparent magnitude'
        } // Right y-axis.
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
  chart.draw(data, options);
  var chart1 = new google.charts.Bar(document.getElementById('dual_y_div1'));
  chart1.draw(data, options);
};
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <div id="dual_y_div" style="width: 900px; height: 500px;"></div>
  <div id="dual_y_div1" style="width: 900px; height: 500px;"></div>
</body>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • Awesome finding @WhiteHat. Now it worked. But adding meta tag is not encouraged for production use because of the possible unexpected results of rendering page content. Thanks. – Manu Singh Oct 06 '15 at 02:32
  • Removed IE distinction from answer, reported [here](http://stackoverflow.com/q/33417224/5090771) that it fixed other browsers as well... – WhiteHat Oct 30 '15 at 12:43
  • Would you mind to document what is the actual fix? Perhaps in the form of a diff patch. That will help those who arrive here with the same problem and need the same fix applied to their code. – Alex R Nov 08 '15 at 15:02
1

I guess this is still a bug of the google visualization api. (link)

However, I changed the Bar chart into a columnChart and changed the options for the axis so that they work with the column chart and it did the trick.

However this https://jsfiddle.net/5b8au8t4/1/ is working. 

startChart();
      function startChart() {
       
          var data = new google.visualization.arrayToDataTable([
              ['Galaxy', 'Distance', 'Brightness'],
              ['Canis Major Dwarf', 8000, 23.3],
              ['Sagittarius Dwarf', 24000, 4.5],
              ['Ursa Major II Dwarf', 30000, 14.3],
              ['Lg. Magellanic Cloud', 50000, 0.9],
              ['Bootes I', 60000, 13.1]
          ]);

          var options = {
              width: 900,       
              title: 'Nearby galaxies',
              vAxes: {
   0: {
    title: 'parsecs',
    
    },
   1: {
    title: 'apparent magnitude',
    
   },
          },
              series: {
   0:{
    targetAxisIndex:0,
    
    },
   1:{
    targetAxisIndex:1,
    
    },
            },
          };
          var chart = new google.visualization.ColumnChart(document.getElementById('dual_y_div'));
          chart.draw(data, options);
  var chart1 = new google.visualization.ColumnChart(document.getElementById('dual_y_div1'));
          chart1.draw(data, options);

      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="dual_y_div" style="width: 900px; height: 500px;"></div>
<div id="dual_y_div1" style="width: 900px; height: 500px;"></div>

I'm hoping that this will help you.

Lienwyn
  • 21
  • 3