CODEWITHSUNDEEP
jquerychartsgoogle-visualizationbar-chart
Manu Singh
Manu Singh

Reputation: 414

Google Charts: Drawing Multiple Bar Charts with dual axis in IE

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>

Upvotes: 1

Views: 3174

Answers (2)

WhiteHat
WhiteHat

Reputation: 61222

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>

Upvotes: 2

Lienwyn
Lienwyn

Reputation: 21

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.

Upvotes: 1

Related Questions