how to add header above of columns header in webdatarocks

Muhammad Saleem

how can i add header above of columns header using webdatarocks

this is my sample code which i'm using


var report = { 
         "dataSource": { 
                     "data": Josndata, 
                     "excelSheetName": Report${exportFormatDate(new Date())}`, 
                    "type": "elasticsearch", 
                     "mapping": { "Column1": { "type": "string" }, 
                                  "Column2": { "type": "string" },   
                                  "Column3": { "type": "string" }, 
                                  "Column4": { "type": "number", }, 
                                  "Column5": { "type": "number", }, 
                                  "Column6": { "type": "number", } } }, 
        "slice": {

        "reportFilters": [
            // Top Filter
            {
                "uniqueName": "Column1", "caption": "Column 1",
            },
            {
                "uniqueName": "Column3", "caption": "Column 3",
            },
            {
                "uniqueName": "Column2", "caption": "Column2",
            }
        ],
        "rows": [
            {
                "uniqueName": "Column1",
            },
            {
                "uniqueName": "Column2",
            }
        ],
        "expands": { expandAll: true },

        "columns": [
            {
                "uniqueName": "[Measures]" 
            },
            {
                "uniqueName": "Column3",
                "sort": "unsorted"
            }
        ],
        "measures": [
            {
                uniqueName: "Column4",
                aggregation: "sum",
                active: true,
                caption: "Column 4"
            },
            {
                uniqueName: "Column5",
                aggregation: "sum",
                active: true,
                caption: "Column 5"
            },
            {
                uniqueName: "Column6",
                formula: "\"Column4\"*100 / \"Column5\" %",
                active: true,
                caption: "Column 6",
                format: "customFormat"
            }
        ],
        "sorting": {
            "column": {
                "type": "desc",
                "tuple": [],
                "measure": {
                    "uniqueName": "Budget_FieldDays",
                    "aggregation": "sum"
                }
            }
        },
        "drillThrough": [
           "Column1",
           "Column2",
           "Column3",
           "Column4",               
           "Column5",
           "Column6",
        ]
    
    },
    "formats": [ 
        {
            "decimalSeparator": ".",
            "decimalPlaces": 0,
            "thousandsSeparator": ",",
            name: "customFormat",
            currencySymbol: "%",
            currencySymbolAlign: "right",
            nullValue: "",
            textAlign: "right",
            isPercent: false
        }
    ],
    "options": {
        "grid": {
            "type": "classic",
            "showTotals": "off",
            "showGrandTotals": "off" //rows
        },
        showAggregationLabels: false

    }
 

}

BindWebDataRocksPivot(report, true, "100%", "1000", "#pivot-container");

this end result that I want

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tahir Ansari3y ago

To add a header above the columns header in WebDataRocks, you can utilize the toolbar configuration option. This option allows you to add custom HTML content to the pivot toolbar. Here's how you can modify your existing code to include a custom header:

var report = {
    // ... (your existing report configuration)
    "options": {
        "toolbar": {
            "top": [
                {
                    "id": "custom-header",
                    "template": "Custom Header Above Columns"
                }
            ]
        },
        "grid": {
            // ... (your existing grid options)
        },
        "showAggregationLabels": false
    }
}

BindWebDataRocksPivot(report, true, "100%", "1000", "#pivot-container");

Mohammad Hussain3y ago

var report = {
    // Other properties...
    "dataSource": {
        "data": Josndata,
        "excelSheetName": `Report${exportFormatDate(new Date())}`,
        "type": "elasticsearch",
        "mapping": {
            // Mapping properties...
        },
        "columnHierarchies": [
            // Define the hierarchical columns with the header
            {
                "uniqueName": "Header1",
                "caption": "Header 1",
                "subfields": [
                    {
                        "uniqueName": "Column1",
                        "caption": "Column 1"
                    },
                    {
                        "uniqueName": "Column2",
                        "caption": "Column 2"
                    },
                    {
                        "uniqueName": "Column3",
                        "caption": "Column 3"
                    }
                ]
            }
        ]
    },
    // Other properties...
};

BindWebDataRocksPivot(report, true, "100%", "1000", "#pivot-container");