Dynamic arrayToDataTable for Waterfall Chart

[Jay Shrybersson]

Hello all,

I tried to build a waterfall chart where the array data table should be filled with a dynamic for loop depending on the data i receive. The creation of the final variable 'chart_data' is working as intended. 

Nevertheless I still receive an error message Uncaught (in promise) Error: Invalid row #0

It would be great if you can help me out to solve this problem. 

Thank you! 

P.S.: See code snippet below.

function drawChart() {

var Com_Nam= "";

var Com_Sha = 0;

for (var i = CBD.length - 1; i >=0 ; i--){

var raise = parseInt(CBD[i].Share);

var raise_adj = Com_Sha+raise;

var co_name = "['" + CBD[i].Component_Name + "'," + Com_Sha + "," + Com_Sha + "," + raise_adj + "," + raise_adj +"],";

Com_Sha += parseInt(CBD[i].Share);

Com_Nam += co_name;

}

var chart_data = String(Com_Nam + "['Total',0,0,100,100]");

console.log(Com_Nam);

console.log(chart_data);

var data = google.visualization.arrayToDataTable([

chart_data

], true);

var options = {

title: 'Breakdown of cost levers with highest assumed impact',

legend: 'none',

tooltip: {trigger: 'none'},

bar: { groupWidth: '80%' },

hAxis: {title: 'Cost Components'},

vAxis: {title: 'Share in %'},

chartArea:{

width: '90%',

height: '70%'

},

candlestick: {

risingColor: { strokeWidth: 0, fill: '#4580c2' }

}

};

var chart = new google.visualization.CandlestickChart(document.getElementById("waterfall-chart"));

chart.draw(data, options);

}