Google Charts: Drawing Multiple Bar Charts with dual axis in IE
Solution 1:
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>Solution 2:
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.