ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: wd_perf on April 07, 2022, 08:54:26 pm

Title: Excel like Data Bars
Post by: wd_perf on April 07, 2022, 08:54:26 pm

I'm looking to implement an Excel like DataBars feature for numeric columns. Please see the attached screenshot. For the row containing the max value in the column, it would fill the entire cell's background color. For the row containing the minimum value it would be empty. However for the values in-between it would only fill a certain portion appropriately. Any advice on how we could approach this?

Title: Re: Excel like Data Bars
Post by: paramvir on April 08, 2022, 01:49:48 pm

Use Excel formulas in column.render callback to compute conditional styles.

Code: [Select]

                    render: function (ui) {
                        var F = this.Formulas(),
                            col = pq.toLetter(ui.colIndx),
                            range = col + ":" + col,
                            min = F.exec("MIN(" + range + ")"),
                            max = F.exec("MAX(" + range + ")"),
                            val = ((ui.cellData - min) / (max - min)) * 100;

                        return {
                            style: {
                                background: "linear-gradient(to right, salmon " + val + "%, #fff 0%)"
                            }
                        };
                    }

Example: https://paramquery.com/pro/demos/data_bars

Title: Re: Excel like Data Bars
Post by: wd_perf on April 09, 2022, 08:45:56 pm

Wow. Simply amazing! Thank you.