I'm trying to convert a table over from AnyChart because AnyChart does not
support text wrapping or scrolling inside the cells of their tables.
Sometimes the data inside the cells of this table can be quite long. I'm
completely new to Google charts and have no idea how to begin converting
this. Here's the relevant AnyChart code. Keep in mind this is part of a
Grails project.
//Below is the first column of 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"]
];
// this is the header for the second and third column.
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>
});
// Create the table
var table = anychart.standalones.table();
// set table content
// Category | Value from GDS Server 1 | Value from GDS Server 2
table.contents(tableData);
//highlight the cell whose result is cheaper!
var cell1 = table.getCell(1,1);
var cell2 = table.getCell(1,2);
var cell3 = table.getCell(2,1);
var cell4 = table.getCell(2,2);
var cell5 = table.getCell(3,1);
var cell6 = table.getCell(3,2);
var cell7 = table.getCell(4,1);
var cell8 = table.getCell(4,2);
var cell9 = table.getCell(5,1);
var cell10 = table.getCell(5,2);
var cell11 = table.getCell(6,1);
var cell12 = table.getCell(6,2);
// if the prices are equal, don't do anything
var cell = cell1.content() > cell2.content() ? cell2 : (cell1.content() <
cell2.content() ? cell1 : null);
if (cell){cell.fill("#4b8509"), cell.fontColor("white") }
var cellr2 = cell3.content() > cell4.content() ? cell4 : (cell3.content() <
cell4.content() ? cell3 : null);
if (cellr2){cellr2.fill("#4b8509"), cellr2.fontColor("white") }
var cellr3 = cell5.content() > cell6.content() ? cell6 : (cell5.content() <
cell6.content() ? cell5 : null);
if (cellr3){cellr3.fill("#4b8509"), cellr3.fontColor("white") }
var cellr4 = cell7.content() > cell8.content() ? cell8 : (cell7.content() <
cell8.content() ? cell7 : null);
if (cellr4){cellr4.fill("#4b8509"), cellr4.fontColor("white") }
// options, may want to highlight larger amount of options not less?
var cellr5 = cell9.content() < cell10.content() ? cell10 : (cell9.content()
> cell10.content() ? cell9 : null);
if (cellr5){cellr5.fill("#4b8509"), cellr5.fontColor("white") }
var cellr6 = cell11.content() > cell12.content() ? cell12 :
(cell11.content() < cell12.content() ? cell11 : null);
if (cellr6){cellr6.fill("#4b8509"), cellr6.fontColor("white") }
// Set the font for the table header
table.getRow(0).height(30).fontWeight(900);
table.getCol(0).width(160).fontWeight(900);
for (var i=0; i<29; i++){
table.getRow(i).height('29px');
table.getRow(i).fontSize(11);
table.getRow(i).textOverflow('...');
}
// we don't need this for google chart tables
table.getCol(1)
.width(580)
table.getCol(2)
.width(580)
table.rowOddFill("#F5F5F5"); // color for odd rows
table.rowEvenFill("#FFFFFF"); // color for even rows
table.fontWeight('regular');
// adjust table border and position text in each cell into center
table.cellBorder("#B8B8B8").vAlign("center").hAlign("center");
// set table container and initiate draw
table.bounds("0", "30%", "100%", "33%");
table.container(stage).draw();
//-
});
</g:if>
</script><br>
If anyone can help me either here or offline I would appreicate it immensely.
-Peter
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/5c4de717-934c-4dd3-ae42-1377b6254069%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
