Converting a table from AnyChart

[Peter Cook]

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

[Peter Cook]

In particular I'm looking for advice on how to get the data to show up. I can get a small sample table to appear on my grails page, I just don't know what to do with the table data.

[Ray Thomas]

I'm not quite sure what you want to do but once you have a datatable, it can be manipulated to create a dataview, and then can either be displayed as a table or charts created from it.

Each cell in the table can contain two values, the actual value and a formatted value, and operations can be carried out on either. There are functions to find things like unique, minimum and maximum values or you can get find the number of columns and rows in the table and make your own JS functions to manipulate the data.

The best source for what can be done to the tables and views is at https://developers.google.com/chart/interactive/docs/reference 

Once you've created a dataview you can then display it as a table on your page and apply other formatting options to it, the help for that is at https://developers.google.com/chart/interactive/docs/gallery/table 

Not only that, but once drawn, the table or chart can be made interactive on your page by using controls and dashboards - https://developers.google.com/chart/interactive/docs/gallery/controls