Table Chart Example

An example of a Google Table Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['table']}]}"></script>
<body style='background-color:beige;'>


<div id='Text'>
<h1 style='color: purple;'>
Rank Table 
</h1>
</div>



<i class="material-icons"></i>

<div style='color:purple; ' id="table_div1"></div>

       <div style='color:purple;' id="table_div"></div>
       </body>

JavaScript

google.setOnLoadCallback(draw);
google.setOnLoadCallback(drawMystores);

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

function allStores() {
  data.addColumn('number', 'Rank');
  data.addColumn('string', 'Store Name');
  data.addColumn('number', ' Sales');
  data.addColumn('number', 'SOS');
  var Raw= ([
    [1 ,'Bayfair',  4895, 68 ],
    [2 ,'Greerton',  3158,  126],
    [3 ,'Frankton',  3689,  79],
    [4 ,'Mt Manganui', 3069,  72],
    [5 ,'Tauranga', 2689 , 68],
    [6 ,'Te Rapa',  2269,  143],
    [7 ,'The Base', 1895,  125],
  ]);
  data.addRows(Raw);
  var sorted = Raw.slice().sort(function(a,b){return b-a})
var ranks = Raw.slice().map(function(v){ return sorted.indexOf(v)+1 });
var formatter = new google.visualization.NumberFormat({ prefix: '$' });
formatter.format(data, 2);

}

allStores();
var Table = new google.visualization.Table(document.getElementById('table_div'));
var view = new google.visualization.DataView(data);

function draw() {
 Table.draw(data, {showRowNumber: false, width: '100%',height: '100%'});
}

var data2 = new google.visualization.DataTable();
var array = [];
var dollarSign= '$';
var formatter = new google.visualization.NumberFormat({ prefix: '$' });
function initialiseColumns() {
data2 = new google.visualization.DataTable();
	data2.addColumn('number', 'Rank');
  data2.addColumn('string', 'Store Name');
  data2.addColumn('number', 'Sales');
  data2.addColumn('number', 'SOS');
    
    for (var j = 0; j < array.length; j++) {
      data2.addRow([array[j][0], array[j][1], array[j][2], array[j][3]]); 
      formatter.format(data2, 2);
		}
   var table2 = new google.visualization.Table(document.getElementById('table_div1'));
function drawMystores() {
  table2.draw(data2, {showRowNumber: false, width: '100%',height: '100%'});
  }
}
var table2 = new google.visualization.Table(document.getElementById('table_div1'));
function drawMystores() {
  table2.draw(data2, {showRowNumber: false, width: '100%',height: '100%'});
}

function...