How to change some data on the table?

Question

I am trying to change the info that shows up on the table to the info that shows up on the left side of a table <td>. This is the code that I have :

var tableData = [
                        [null],
                        ["${apiInstanceList[0].serverName}"],
                        ["${apiInstanceList[1].serverName2}"]
                    ];

                    var cheapestByAirlineByLeg_data1 = [];
                    var cheapestByAirlineByLeg_data2 = [];
                    var cheapestByAirlineByLegChart = anychart.column();

                    <g:each in="${apiInstanceList}" var="apiInstance">
                        <g:each in="${apiInstance.cheapestByAirlineByLegMap}" var="leg">
                            var entry  = [];
                            entry.push("${leg.legs}");
                            entry.push("${leg.price}");

                            <g:if test="${apiInstance.id % 2 == 0}">
                                cheapestByAirlineByLeg_data2.push({x: entry[0], value: entry[1]});
                                tableData[0].push(entry[0]);
                                tableData[1].push("$"+entry[1]);
                            </g:if>
                            <g:else>
                                cheapestByAirlineByLeg_data1.push({x: entry[0], value: entry[1]});
                                if(tableData[0].indexOf(entry[0]) == -1){ tableData[0].push(entry[0]); }
                                tableData[2].push("$"+entry[1]);
                            </g:else>
                        </g:each>
                    </g:each>[enter image description here][1

This how is looking the page. I'm not able to change de [B6, B6] for example to the GDSQA1.

Answer 1

You should use the dataTable on the initiate like an array of columns, not rows. Then you should change the order of pushing data to the tableData. You should push to the column, not the line.