Google chart not showing Axis?

Question

I've been messing around with Google Geo Chart this morning and while I've got it working for the most part, it does not show the axis at the bottom. It also does not show the country in the tooltip on hover.

The code I'm using is:

<script type="text/javascript">
    function mapMe() {
      google.charts.load('upcoming', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        arr = myParse();        
        var data = google.visualization.arrayToDataTable(arr);  

        var options = {colorAxis: {colors: ['#f5f5f5','#267114']}};
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    }
</script>
<div class='container'>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
        <br><br><br><textarea rows="4" cols="50" id="testArea"></textarea>
        <button onclick='mapMe()'>
</div>

..and the function called for the array is:

function myParse() {
    var data = $('#testArea').val();
    var rows = data.split("\n");
    var result = [];
    var col = [];
    for (var r in rows) {
        row = rows[r].split("\t");
        result.push(row);
    }
    return result;
}

The result:

The data I am entering is copied from Excel and pasted into a text area. It looks like:

|Country|Number|
|Russia |1     |
..etc

Am I missing something silly? Just can't puzzle it out. Any help is much appreciated!

Answer 1

Changed my approach and got it working, albeit not in the way I originally intended:

    function mapMe() {

        google.charts.load('upcoming', {'packages':['geochart']});
        google.charts.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {

            var data_table = new google.visualization.DataTable();

            //NEED TO UPDATE THIS TO CHECK DATA TYPE OF FIRST ROW AND AUTO OUTPUT COLUMN HEADERS
            data_table.addColumn({"type": "string","label": "Country"});
            data_table.addColumn({"type": "number","label": "Volume"});

            var datas = $('#testArea').val();
            var rows = datas.split("\n");

            for (var r = 1; r < rows.length; r++) {
                row = rows[r].split("\t");
                data_table.addRow([{v: row[0]}, {v: parseInt(row[1])}]);
            }

            var options = {colorAxis: {colors: ['#f5f5f5','#267114']},  legend: {textStyle: {color: 'blue', fontSize: 16}}};
            var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));


            chart.draw(data_table, options);
        }
    }

Rather than try to pass an array in, I'm looping through and using the addRow command as I go.