Google Visualization Column and Bar chart vaxis and haxis labels overlap in firefox 3.6.12 and IE

Can anyone help me on this problem I am having with chart labels on firefox and IE8, on chrome and safari the labels are working as they are expected to, but on Firefox and IE, the axis labels will overlap each other and won't obey any of the haxis 开发者_JAVA技巧or vaxis options. I am coding in ruby on rails and using an erb template partial to write out my javascript. As I said before, it works great on chrome and safari but on firefox and IE8 I run into these axis label problems. Any help would be grateful.

This is the code I am doing

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load('visualization', '1', {'packages':['corechart']});

google.setOnLoadCallback(drawBarChart);

function drawBarChart() {
  var bar_data = new google.visualization.DataTable();
  bar_data.addColumn('string', 'yaxis');
  bar_data.addColumn('number', 'xaxis');
  bar_data.addRows(5);
  var col = 0;
  <% array.each do |value| %>
    bar_data.setValue(col, 0, 'realllly longggggggggggggggggggggggggg');
    bar_data.setValue(col, 1, <%= value %>);
    col++;
  <% end %>

var bar_chart = new google.visualization.BarChart(document.getElementById('<%= element %>'));
bar_chart.draw(
  bar_data,
  {
    width: 870,
    height: 350,
    title: 'Quantity per Suspect Code',
    legend: 'none',
    vAxis: {
      textStyle: {
        fontSize: 11
      }
    },
    hAxis: {
      title: 'Quantity'
    }
  }
) };

  </script>

Notes: The element id is passed to this partial, so in this case the element would be 'line_chart' and the id on the template rendering this partial is #line_chart

Thanks