Author Topic: Excel like Data Bars  (Read 410 times)

wd_perf

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 26
    • View Profile
Excel like Data Bars
« 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?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6178
    • View Profile
Re: Excel like Data Bars
« Reply #1 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
« Last Edit: April 08, 2022, 03:21:16 pm by paramvir »

wd_perf

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: Excel like Data Bars
« Reply #2 on: April 09, 2022, 08:45:56 pm »
Wow. Simply amazing! Thank you.