Google Charts not working with my numbers when formatted in (usability) commas

[Swar Det]

I have loads of big data that I pull from a database into an array where I really need commas for usability. So, in SQL I Format the numbers and they're really nice (e.g. 21,876,987,000). However, when I use them in Google Charts, the charts break. So to make Google Charts happy I remove the Format in SQL and display raw numbers.

What a dilemma. Usability of both would be splendid.

Any idea of what line(s) to add and where, so I can utilize my properly formatted numbers from my SQL??

Below is my current chart code.

<script type="text/javascript">
google.charts.load('current', {packages: ['corechart'],
callback: drawChart});

function drawChart() {
var tableRows = [];
var results = document.getElementById('allstage');
Array.prototype.forEach.call(results.rows, function(row) {
var tableColumns = [];
Array.prototype.forEach.call(row.cells, function(cell) {
var cellText = cell.textContent || cell.innerText;
switch (cell.cellIndex) {
case 0:
tableColumns.push(cellText.trim());
break;

default:
switch (row.rowIndex) {
case 0:
tableColumns.push(cellText.trim());
break;

default:
tableColumns.push(parseFloat(cellText));
    }
  }
});
tableRows.push(tableColumns);
});

var data = google.visualization.arrayToDataTable(tableRows);
var formatter = new google.visualization.NumberFormat(
     {negativeColor: 'red', negativeParens: true, pattern: '###,###'});
    formatter.format(data, 1);       

var options = {

title: 'All Stages In Percent', 
titleTextStyle: {color: 'black', fontSize: 28},
 bar: {groupWidth: '70%'},
    chartArea: { backgroundColor: { fill: '#F0F8FC', opacity: 100 }},
    fontSize:12,
    legend:  { position: 'right', textStyle: { color: 'black', fontSize: 12}},
     tooltip: {isHtml: true},
      is3D: true,
    };

var chart = new google.visualization.PieChart(document.getElementById('allstage_div'));


chart.draw(data, options);
	}
</script>