I am creating a stacked barchart dynamically that will look something like this: https://developers.google.com/chart/interactive/docs/gallery/barchart#stacked-bar-charts
I have created a static graph that works. HOwever when I create the arrayToDataTable dynamically and pass the array object to arrayToDataTable(myobject) I get a different style/scale of graph.
Instead of the stacked example above my stacked bars go full width for each category of data. It's as if the scale is 100% for each category.
If compare the data array with my correct static example with my dynamically created data array they are identical except the dynamically generated column array has 'id' and pattern 'keys' whereas the statically generated does not. THe dynamic graphs the correct columns and rows data but just produces the wrong width of graph.
Its difficult to extract full code as its part of a dashboard but here is my drawchart function that takes a global variable carbonChartData from a google sheet, that is transposed to a global var 'tcd' (transposed carbon data). I then loop through the dashboard table elements and the transposed data to construct gData that is passed to to visualisation. I've also included the static array that works.
function drawCarbonChartData() {
//carbonChartData is our core data return
if(carbonChartData.length < 1) return ;
var rows = document.querySelectorAll('#dataTable tbody tr');
tcd = tcd.slice(1); //remove 'table' headers chartdata
var dn=[];
gData = new google.visualization.DataTable();
gData.addColumn('string', 'Scenario');
//build columns by looping through table and grabbing current select value choices
for(var i =0 ; i < rows.length;i++ ){
ptype = rows[i].cells[2].querySelector('.part').value;
if (ptype.length > 0){
// Declare columns
gData.addColumn('number', ptype);
}
}
//build rows array from array tcd - the transposed value data and add scenario label on front
for(var i =0 ; i < tcd.length;i++ ){
dn = 1 + i;
designLabel = 'DS ' + dn;
tcd[i].unshift(designLabel);
}
//add rows to gData
gData.addRows(tcd);
//static data array to console test against gData
gDataTest = google.visualization.arrayToDataTable([
['Scenario', 'PCBA 2 layer PCB + EE', 'Cable, PE jacket, 4.5g/m, D1.4', 'Al INGOT, DIE CAST', 'HIPS, SINGLE INJECTION', 'ABS, SINGLE INJECTION', 'BATTERY, Li-ion Rechargable single cell', 'BATTERY AA ALKALINE'],
['DS1', 0.04, 0.11, 0.16, 0.24, 0.31, 0.00, 0.14],
['DS2', 0.05, 0.09, 0.10, 0.24, 0.62, 0.58, 0.00],
['DS3', 0.06, 0.17, 0.33, 0.48, 0.93, 1.17, 0.00]
]);
var view = new google.visualization.DataView(gData);
var chart = new
google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(view, globalOptions);
}
The dynamic vis data passed looks like this in console:
The static data (different values but correct structure) console output:
The difference in the dynamic array appears to be the empty keys 'id' and 'pattern'. Charts still render but dynamic a becomes 100% wide.
