Pfthb

google.charts.load('current', 
 'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
);

renderChart_onPageLoad();

function renderChart_onPageLoad() 
 google.charts.setOnLoadCallback(function() 
 drawTable();
 ); //END setOnLoadCallback
 //END function renderChart_onEvent

function drawTable() 
 var jsonArray = jsonDataArray_1to1(json);

 //Modify header row to include id and label
 jsonArray = arrayHeaderRow_id_label_date(jsonArray);
 console.log('jsonArray'); console.log(jsonArray);

 var data = google.visualization.arrayToDataTable(jsonArray, false); // 'false' means that the first row contains labels, not data.
 //console.log('data');
 //console.log(data);

 var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

 var categoryPicker1 = new google.visualization.ControlWrapper(
 'controlType': 'CategoryFilter',
 'containerId': 'div_categoryPicker1',
 'matchType': 'any',
 'options': 
 'filterColumnIndex': 0, //Column used in control
 'ui': 
 'label': 'Is exclude selection possible?',
 //'labelSeparator': ':',
 'labelStacking': 'vertical',
 'selectedValuesLayout': 'belowWrapping',
 'allowTyping': false,
 'allowMultiple': false,
 'allowNone': true
 
 
 );

 var table = new google.visualization.ChartWrapper(
 chartType: 'Table',
 containerId: 'div_table',
 options: 
 allowHtml: true
 
 );

 dashboard.bind([categoryPicker1], [table]);
 dashboard.draw(data);







//Library

function jsonDataArray_1to1(json) 
 //DYNAMIC JSON ARRAY

 var dataArray_cln = ;

 //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
 var dataArray_keys = Object.keys(json[0]);

 dataArray_cln.push(dataArray_keys);

 //Add rows 1 to json.length with null values
 var dataArray_rows = json.length;
 var dataArray_cols = dataArray_keys.length;

 for (i = 0; i < dataArray_rows; i++) 
 dataArray_cln.push(Array(dataArray_cols).fill(null));
 

 //Update array from json data
 for (i = 0; i < dataArray_rows; i++) 
 //[i + 1] because row 0 is the header, push begins with row 1
 //dataArray_cln[row][col]

 //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
 for (var j = 0; j < dataArray_keys.length; j++) 
 eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
 
 

 //console.log(dataArray_cln);
 return dataArray_cln;


function arrayHeaderRow_id_label_date(arr) 
 for (var i = 0; i < arr[0].length; i++) 
 var valueOrig = arr[0][i];
 var valueNew;
 switch (true) 
 case valueOrig === 'wd':
 valueNew = JSON.parse('"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"');
 break;
 default:
 valueNew = JSON.parse('"id":"' + valueOrig + '", "label": "' + valueOrig + '"');
 
 arr[0][i] = valueNew;
 
 return arr;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='div_dashboard'>
 <div id='div_categoryPicker1'></div>
 <div id='div_table'></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>

<script>
 var json = [
 "division": "GS",
 "m1": 100.000000,
 "m2": 100.000000,
 "m3": null,
 "m4": null,
 "m5": null,
 "m6": null,
 "m7": null,
 "m8": null,
 "m9": null,
 "m10": null,
 "m11": null,
 "m12": null,
 ,
 
 "division": "GS",
 "m1": 100.000000,
 "m2": 90.000000,
 "m3": null,
 "m4": null,
 "m5": null,
 "m6": null,
 "m7": null,
 "m8": null,
 "m9": null,
 "m10": null,
 "m11": null,
 "m12": null,
 ,
 
 "division": "PS",
 "m1": null,
 "m2": null,
 "m3": 100.000000,
 "m4": null,
 "m5": 100.000000,
 "m6": 100.000000,
 "m7": 75.000000,
 "m8": null,
 "m9": null,
 "m10": null,
 "m11": null,
 "m12": null,
 ,
 
 "division": "PS",
 "m1": null,
 "m2": null,
 "m3": 100.000000,
 "m4": 100.000000,
 "m5": 100.000000,
 "m6": 100.000000,
 "m7": 80.000000,
 "m8": null,
 "m9": null,
 "m10": null,
 "m11": null,
 "m12": null,
 
 ];

</script>

google.charts.load('current', 
 'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
);

renderChart_onPageLoad();

function renderChart_onPageLoad() 
 google.charts.setOnLoadCallback(function() 
 drawTable();
 ); //END setOnLoadCallback
 //END function renderChart_onEvent

function drawTable() 
 var jsonArray = jsonDataArray_1to1(json);

 //Modify header row to include id and label
 jsonArray = arrayHeaderRow_id_label_date(jsonArray);
 console.log('jsonArray'); console.log(jsonArray);

 var data = google.visualization.arrayToDataTable(jsonArray, false); // 'false' means that the first row contains labels, not data.
 //console.log('data');
 //console.log(data);

 var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

 var categoryPicker1 = new google.visualization.ControlWrapper(
 'controlType': 'CategoryFilter',
 'containerId': 'div_categoryPicker1',
 dataTable: data,
 'matchType': 'any',
 'options': 
 'filterColumnIndex': 0, //Column used in control
 'ui': 
 'label': 'Is exclude selection possible?',
 //'labelSeparator': ':',
 'labelStacking': 'vertical',
 'selectedValuesLayout': 'belowWrapping',
 'allowTyping': false,
 'allowMultiple': false,
 'allowNone': true
 
 
 );

 google.visualization.events.addListener(categoryPicker1, 'statechange', function () 
 var visibleRows = data.getFilteredRows([
 column: categoryPicker1.getOption('filterColumnIndex'),
 test: function (value) 
 return (categoryPicker1.getState().selectedValues.indexOf(value) === -1);
 
 ]);

 table.setView(
 rows: visibleRows
 );
 table.draw();
 );

 var table = new google.visualization.ChartWrapper(
 chartType: 'Table',
 containerId: 'div_table',
 dataTable: data,
 options: 
 allowHtml: true
 
 );

 table.draw();
 categoryPicker1.draw();







//Library

function jsonDataArray_1to1(json) 
 //DYNAMIC JSON ARRAY

 var dataArray_cln = ;

 //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
 var dataArray_keys = Object.keys(json[0]);

 dataArray_cln.push(dataArray_keys);

 //Add rows 1 to json.length with null values
 var dataArray_rows = json.length;
 var dataArray_cols = dataArray_keys.length;

 for (i = 0; i < dataArray_rows; i++) 
 dataArray_cln.push(Array(dataArray_cols).fill(null));
 

 //Update array from json data
 for (i = 0; i < dataArray_rows; i++) 
 //[i + 1] because row 0 is the header, push begins with row 1
 //dataArray_cln[row][col]

 //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
 for (var j = 0; j < dataArray_keys.length; j++) 
 eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
 
 

 //console.log(dataArray_cln);
 return dataArray_cln;


function arrayHeaderRow_id_label_date(arr) 
 for (var i = 0; i < arr[0].length; i++) 
 var valueOrig = arr[0][i];
 var valueNew;
 switch (true) 
 case valueOrig === 'wd':
 valueNew = JSON.parse('"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"');
 break;
 default:
 valueNew = JSON.parse('"id":"' + valueOrig + '", "label": "' + valueOrig + '"');
 
 arr[0][i] = valueNew;
 
 return arr;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='div_dashboard'>
 <div id='div_categoryPicker1'></div>
 <div id='div_table'></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>

<script>
 var json = [
 "division": "GS",
 "m1": 100.000000,
 "m2": 100.000000,
 "m3": null,
 "m4": null,
 "m5": null,
 "m6": null,
 "m7": null,
 "m8": null,
 "m9": null,
 "m10": null,
 "m11": null,
 "m12": null,
 ,
 
 "division": "GS",
 "m1": 100.000000,
 "m2": 90.000000,
 "m3": null,
 "m4": null,
 "m5": null,
 "m6": null,
 "m7": null,
 "m8": null,
 "m9": null,
 "m10": null,
 "m11": null,
 "m12": null,
 ,
 
 "division": "PS",
 "m1": null,
 "m2": null,
 "m3": 100.000000,
 "m4": null,
 "m5": 100.000000,
 "m6": 100.000000,
 "m7": 75.000000,
 "m8": null,
 "m9": null,
 "m10": null,
 "m11": null,
 "m12": null,
 ,
 
 "division": "PS",
 "m1": null,
 "m2": null,
 "m3": 100.000000,
 "m4": 100.000000,
 "m5": 100.000000,
 "m6": 100.000000,
 "m7": 80.000000,
 "m8": null,
 "m9": null,
 "m10": null,
 "m11": null,
 "m12": null,
 
 ];

</script>