Converting a table from AnyChart to Google Charts? - google-visualization

Question

Has anyone converted charts from AnyChart over to Google Charts? I'm trying to convert a table in a Grails project.
I can get the table to appear just fine along with some hard coded date but I can't get my array of data to appear. The concept of data between the two seem to be totally incompataible.
In AnyChart I could just do this and then add the data to the table.
var tableData = [
[null],
["Cheapest"],
["Highest"],
["Average"],
["Median"],
["Options"],
["Avg/50"],
["Stops [stops:total]"],
["Cheapest/Stops"],
["Star Profile Totals"],
["Cheapest Star Profiles"],
["GDS ID Totals"],
["Cheapest/GDS ID"],
["DynamicPrice Totals"],
["PRV Pricing Totals"],
["PUB Pricing Totals"],
["Cheapest/PricingType"],
["Contract Type Totals"],
["Cheapest/Contract"],
["CabinType Totals"],
["Cheapest/CabinType"],
["Arrival Port Totals"],
["Departure Port Totals"],
["Carrier Totals"],
["Cheapest/Carrier"],
["Avg Commission/Profile"],
["Itins w/Dyn Discount"],
["Opaque Totals"],
["Cheapest/Opaque"],
["Searched Contracts"]
];
var url1 = "${apiInstanceList[-1].serverName}";
var url2 = "${apiInstanceList[-2].serverName2}";
// now set up the data for the table
tableData.forEach(function(d){
<g:each in="${apiInstanceList.size() >= 2 ? apiInstanceList[-2..-1] : apiInstanceList}" var="apiInstance">
if (d[0] == null){
var url = url1;
d.push(d[1] == url ? url2 : url);
}else if(d[0] === "Cheapest" && ${apiInstance.cheapestPrice}){
d.push("$"+${apiInstance.cheapestPrice});
} else if (d[0] === "Highest") {
d.push("$"+${apiInstance.highestPrice});
} else if (d[0] === "Average"){
d.push("$"+${apiInstance.averagePrice});
} else if (d[0] === "Median"){
d.push("$"+${apiInstance.medianPrice});
} else if (d[0] === "Options"){
d.push(${apiInstance.totalOptions});
} else if (d[0] === "Avg/50") {
d.push("$"+${apiInstance.avg50});
} else if (d[0] === "Stops [stops:total]") {
var aoo = "${apiInstance.numberOfStops}";
d.push(aoo);
} else if (d[0] === "Star Profile Totals") {
var boo = "${apiInstance.profileNumbers}";
d.push(boo);
} else if (d[0] === "Cheapest/CabinType") {
var coo = "${apiInstance.cheapestByCabin}";
d.push(coo);
} else if (d[0] === "Contract Type Totals") {
var doo = "${apiInstance.contractTypeNumbers}";
d.push(doo);
} else if (d[0] === "DynamicPrice Totals") {
var eoo = "${apiInstance.dynamicNumbers}";
d.push(eoo);
} else if (d[0] === "PRV Pricing Totals") {
var foo = "${apiInstance.privatePricingTypeNumbers}";
d.push(foo);
} else if (d[0] === "PUB Pricing Totals") {
var goo = "${apiInstance.publicPricingTypeNumbers}";
d.push(goo);
} else if (d[0] === "Cheapest/PricingType") {
var ioo = "${apiInstance.cheapestByPassengerType}";
d.push(ioo);
} else if (d[0] === "CabinType Totals") {
var hoo = "${apiInstance.cabinNumbers}";
d.push(hoo);
} else if (d[0] === "Cheapest/Contract") {
var koo = "${apiInstance.cheapestByContractType}";
d.push(koo);
} else if (d[0] === "Arrival Port Totals") {
var loo = "${apiInstance.arrivalAirportTotals}";
d.push(loo);
} else if (d[0] === "Departure Port Totals") {
var moo = "${apiInstance.departureAirportTotals}";
d.push(moo);
} else if (d[0] === "Carrier Totals") {
var soo = "${apiInstance.carrierNumbers}";
d.push(soo);
} else if (d[0] === "Cheapest/Carrier") {
var too = "${apiInstance.cheapestByCarrier}";
d.push(too);
} else if (d[0] === "Cheapest Star Profiles") {
var noo = "${apiInstance.cheapestByProfileId}";
d.push(noo);
} else if (d[0] === "Cheapest/Stops") {
var ooo = "${apiInstance.cheapestByStops}";
d.push(ooo);
} else if (d[0] === "GDS ID Totals") {
var poo = "${apiInstance.gdsIdNumbers}";
d.push(poo);
} else if (d[0] === "Cheapest/GDS ID") {
var qoo = "${apiInstance.cheapestByGdsID}";
d.push(qoo);
} else if (d[0] === "Avg Commission/Profile") {
var roo = "${apiInstance.averageCommissionByStarProfileId}";
d.push(roo);
} else if (d[0] === "Itins w/Dyn Discount") {
var too = "${apiInstance.dynamicDiscountTotal}";
d.push(too)
} else if (d[0] === "Opaque Totals") {
var uoo = "${apiInstance.opaqueTotals}";
d.push(uoo)
} else if (d[0] === "Cheapest/Opaque") {
var voo = "${apiInstance.cheapestByOpaqueType}";
d.push(voo)
} else if (d[0] === "Searched Contracts") {
var soo = "${apiInstance.searchedContracts}";
d.push(soo);
}
</g:each>
});
But google charts are different. Hard coded it looks like this:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
Here is the code:
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
//var data = new google.visualization.DataTable();
var tableData2 = new google.visualization.DataTable();
//data.addColumn('string', 'Name');
//data.addColumn('number', 'Salary');
//data.addColumn('boolean', 'Full Time Employee');
//data.addRows([
// ['Mike', {v: 10000, f: '$10,000'}, true],
// ['Jim', {v:8000, f: '$8,000'}, false],
// ['Alice', {v: 12500, f: '$12,500'}, true],
// ['Bob', {v: 7000, f: '$7,000'}, true]
//]);
tableData2 = [
[null],
["Cheapest"],
["Highest"],
["Average"],
["Median"],
["Options"],
["Avg/50"],
["Stops [stops:total]"],
["Cheapest/Stops"],
["Star Profile Totals"],
["Cheapest Star Profiles"],
["GDS ID Totals"],
["Cheapest/GDS ID"],
["DynamicPrice Totals"],
["PRV Pricing Totals"],
["PUB Pricing Totals"],
["Cheapest/PricingType"],
["Contract Type Totals"],
["Cheapest/Contract"],
["CabinType Totals"],
["Cheapest/CabinType"],
["Arrival Port Totals"],
["Departure Port Totals"],
["Carrier Totals"],
["Cheapest/Carrier"],
["Avg Commission/Profile"],
["Itins w/Dyn Discount"],
["Opaque Totals"],
["Cheapest/Opaque"],
["Searched Contracts"]
];
var url1 = "${apiInstanceList[-1].serverName}";
var url2 = "${apiInstanceList[-2].serverName2}";
// now set up the data for the table
tableData2.forEach(function(d){
<g:each in="${apiInstanceList.size() >= 2 ? apiInstanceList[-2..-1] : apiInstanceList}" var="apiInstance">
if (d[0] == null){
var url = url1;
d.push(d[1] == url ? url2 : url);
}else if(d[0] === "Cheapest" && ${apiInstance.cheapestPrice}){
d.push("$"+${apiInstance.cheapestPrice});
} else if (d[0] === "Highest") {
d.push("$"+${apiInstance.highestPrice});
} else if (d[0] === "Average"){
d.push("$"+${apiInstance.averagePrice});
} else if (d[0] === "Median"){
d.push("$"+${apiInstance.medianPrice});
} else if (d[0] === "Options"){
d.push(${apiInstance.totalOptions});
} else if (d[0] === "Avg/50") {
d.push("$"+${apiInstance.avg50});
} else if (d[0] === "Stops [stops:total]") {
var aoo = "${apiInstance.numberOfStops}";
d.push(aoo);
} else if (d[0] === "Star Profile Totals") {
var boo = "${apiInstance.profileNumbers}";
d.push(boo);
} else if (d[0] === "Cheapest/CabinType") {
var coo = "${apiInstance.cheapestByCabin}";
d.push(coo);
} else if (d[0] === "Contract Type Totals") {
var doo = "${apiInstance.contractTypeNumbers}";
d.push(doo);
} else if (d[0] === "DynamicPrice Totals") {
var eoo = "${apiInstance.dynamicNumbers}";
d.push(eoo);
} else if (d[0] === "PRV Pricing Totals") {
var foo = "${apiInstance.privatePricingTypeNumbers}";
d.push(foo);
} else if (d[0] === "PUB Pricing Totals") {
var goo = "${apiInstance.publicPricingTypeNumbers}";
d.push(goo);
} else if (d[0] === "Cheapest/PricingType") {
var ioo = "${apiInstance.cheapestByPassengerType}";
d.push(ioo);
} else if (d[0] === "CabinType Totals") {
var hoo = "${apiInstance.cabinNumbers}";
d.push(hoo);
} else if (d[0] === "Cheapest/Contract") {
var koo = "${apiInstance.cheapestByContractType}";
d.push(koo);
} else if (d[0] === "Arrival Port Totals") {
var loo = "${apiInstance.arrivalAirportTotals}";
d.push(loo);
} else if (d[0] === "Departure Port Totals") {
var moo = "${apiInstance.departureAirportTotals}";
d.push(moo);
} else if (d[0] === "Carrier Totals") {
var soo = "${apiInstance.carrierNumbers}";
d.push(soo);
} else if (d[0] === "Cheapest/Carrier") {
var too = "${apiInstance.cheapestByCarrier}";
d.push(too);
} else if (d[0] === "Cheapest Star Profiles") {
var noo = "${apiInstance.cheapestByProfileId}";
d.push(noo);
} else if (d[0] === "Cheapest/Stops") {
var ooo = "${apiInstance.cheapestByStops}";
d.push(ooo);
} else if (d[0] === "GDS ID Totals") {
var poo = "${apiInstance.gdsIdNumbers}";
d.push(poo);
} else if (d[0] === "Cheapest/GDS ID") {
var qoo = "${apiInstance.cheapestByGdsID}";
d.push(qoo);
} else if (d[0] === "Avg Commission/Profile") {
var roo = "${apiInstance.averageCommissionByStarProfileId}";
d.push(roo);
} else if (d[0] === "Itins w/Dyn Discount") {
var too = "${apiInstance.dynamicDiscountTotal}";
d.push(too)
} else if (d[0] === "Opaque Totals") {
var uoo = "${apiInstance.opaqueTotals}";
d.push(uoo)
} else if (d[0] === "Cheapest/Opaque") {
var voo = "${apiInstance.cheapestByOpaqueType}";
d.push(voo)
} else if (d[0] === "Searched Contracts") {
var soo = "${apiInstance.searchedContracts}";
d.push(soo);
}
</g:each>
});
//var table = new google.visualization.Table(document.getElementById('container3'));
//table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
var table = new google.visualization.Table(document.getElementById('container3'));
var data2 = google.visualization.arrayToDataTable(tableData2);
table.draw(data2, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
<div id="container3" style="width: 1350px; height: 1400px;"></div>
I'm not sure how to convert it over to Google charts. Any help vastly appreciated.