ColumnChart not show all string labels

Question

I have The following problem related with ColumnChart (https://developers.google.com/chart/interactive/docs/gallery/columnchart).

If the label (when you mouse hover into any columns that looks like a tooltip) is set as a number, all 2000 items shows correctly. But if the label is set as a string it only shows 289 items in the chart and it is missing 1711 columns for an unknown reason.

I have this code (Label set with String, only shows 289 items instead of 2000): http://jsfiddle.net/c809mbjx/11/

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string' ,'Day');
    data.addColumn('number', 'Matches');
    var dataArray = []
    let number = 2000
    data.addRows(number);
    for (var i = 0; i < number;i++) {
     data.setCell(i,0,"aaa_"+i)
     data.setCell(i,1,i);
    }
    //var data = new google.visualization.arrayToDataTable(dataArray);        
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);
    var options = {
            colors: ['#0095e8'],
            hAxis: {textPosition: 'none'},
            vAxis: {minValue: 0, viewWindow: {min: 0}},
            legend: 'none',
            animation: {duration: 10000, easing: 'out'}
        };
    chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

And this code (Label set with Number and works correctly): http://jsfiddle.net/c809mbjx/12/

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number' ,'Day');
    data.addColumn('number', 'Matches');
    var dataArray = []
    let number = 2000
    data.addRows(number);
    for (var i = 0; i < number;i++) {
     data.setCell(i,0,i)
     data.setCell(i,1,i);
    }
    //var data = new google.visualization.arrayToDataTable(dataArray);        
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);
    var options = {
            colors: ['#0095e8'],
            hAxis: {textPosition: 'none'},
            vAxis: {minValue: 0, viewWindow: {min: 0}},
            legend: 'none',
            animation: {duration: 10000, easing: 'out'}
        };
    chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

Answer 1

we can use numbers on the x-axis and still display the string on the tooltip.
which can be accomplished by setting the last argument of the setCell method --> formattedValue

setCell(rowIndex, columnIndex, value, formattedValue)

the tooltip will display the formatted value by default.
so we provide the number as the value, and our own string as the formatted value.

   data.setCell(i,0,i,"aaa_"+i);

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number' ,'Day');
  data.addColumn('number', 'Matches');
  let number = 2000;
  data.addRows(number);
  for (var i = 0; i < number;i++) {
   data.setCell(i,0,i,"aaa_"+i);
   data.setCell(i,1,i);
  }
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);
  var options = {
    colors: ['#0095e8'],
    hAxis: {textPosition: 'none'},
    vAxis: {minValue: 0, viewWindow: {min: 0}},
    legend: 'none',
    animation: {duration: 10000, easing: 'out'}
  };
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

---

note: the version of google charts loaded using jsapi has been deprecated and should no longer be used.

instead, use loader.js, this will only change the load statement.
see above snippet...