Filter use in Column Chart

manjit.1486 said:

userfilter in column chart?

What do you mean by this? AFAIK We have filters on the data. Not sure what you mean by user filters. Could you please elaborate.

For example:


I want to put a dropdown filter option on top of right side. I have already created a userfilter in record. below image will give you a reference(This is just a sample image). In my case: dropdown option would be q1,q2,q3,q4. 

Charts do not support such a feature. You will have to build this separately.

okay, thanks. In this case do I need to change approach of column chart. Like currently I am fetching data from records. Should I change something for column chart?

No, you just have to apply filters in the record Data that is being used in the column chart and have some variables that would change based on your dropdown selection.

Okay. I will try to do the same.

a!localVariables( 
  local!status: "Q1",
  a!dropdownField(
    label: "Status",
    choiceLabels: {
      "Q1",
      "Q2",
      "Q3",
      "Q4"
    },
    choiceValues: {
      "Q1",
      "Q2",
      "Q3",
      "Q4"
    },
    value: local!status,
    saveInto: local!status,
    placeholder: "Status",
    searchDisplay: "AUTO"
  ),
  a!sectionLayout(
    label: "",
    contents: {      
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!boxLayout(
                label: "Open Status",
                contents: {
                  a!columnChartField(
                    data: a!recordData(
                      recordType: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}INN Status',
                      filters: a!queryLogicalExpression(
                        operator: "AND",
                        filters: {
                          a!queryFilter(
                            field: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}INN Status.fields.{status}status',
                            operator: "=",
                            value: "Q1"
                          ),
                        },
                        ignoreFiltersWithEmptyValues: true
                      )
                       
                    ),
                    config: a!columnChartConfig(
                      primaryGrouping: a!grouping(
                        field: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}INN Status.fields.{status}status',
                        alias: "status_primaryGrouping"
                      ),
                      secondaryGrouping: a!grouping(
                        field: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}INN Status.fields.{stage}stage',
                        alias: "stage_secondaryGrouping"
                      ),
                      measures: {
                        a!measure(
                          function: "COUNT",
                          field: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}INN Status.fields.{id}id',
                          alias: "id_count_measure1"
                        )
                      },
                      dataLimit: 100
                    ),
                    label: "",
                    stacking: "NONE",
                    showLegend: true,
                    showDataLabels: true,
                    showTooltips: true,
                    allowDecimalAxisLabels: false,
                    labelPosition: "ABOVE",
                    allowImageDownload: false,
                    colorScheme: a!colorSchemeCustom(
                      colors: {
                        "#00a88f",
                        "#0087ac",
                        "#f7d027",
                        "#6ba547",
                        "#619ed6"
                      }
                    ),
                    height: "MEDIUM",
                    xAxisStyle: "STANDARD",
                    yAxisStyle: "STANDARD",
                    refreshAfter: "RECORD_ACTION"
                  )
                  
                },
                style: "STANDARD",
                marginBelow: "STANDARD"
              )
            },
            width: "8X"
          )
        }
      )
    }
  )
)

Hi.. Can you please guide where do I need to modify the variables?

Did you get a chance to check the code?

Replace the value in the queryFilter of the column chart data parameter with local!status and try.

Not get any luck by doing this.

You need to define your code in a {} as you have array of components post the local variable definition

a!localVariables(
  local!status: "Q1",
  {
    a!dropdownField(
      label: "Status",
      choiceLabels: { "Q1", "Q2", "Q3", "Q4" },
      choiceValues: { "Q1", "Q2", "Q3", "Q4" },
      value: local!status,
      saveInto: local!status,
      placeholder: "Status",
      searchDisplay: "AUTO"
    ),
    a!sectionLayout(
      label: "",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!boxLayout(
                  label: "Open Status",
                  contents: {
                    a!columnChartField(
                      data: a!recordData(
                        recordType: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}',
                        filters: a!queryLogicalExpression(
                          operator: "AND",
                          filters: {
                            a!queryFilter(
                              field: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}.fields.{status}',
                              operator: "=",
                              value: local!status
                            ),

                          },
                          ignoreFiltersWithEmptyValues: true
                        )
                      ),
                      config: a!columnChartConfig(
                        primaryGrouping: a!grouping(
                          field: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}.fields.{status}',
                          alias: "status_primaryGrouping"
                        ),
                        secondaryGrouping: a!grouping(
                          field: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}.fields.{stage}',
                          alias: "stage_secondaryGrouping"
                        ),
                        measures: {
                          a!measure(
                            function: "COUNT",
                            field: 'recordType!{6f02251f-0cbb-40a2-881d-0a6bd9983952}.fields.{id}',
                            alias: "id_count_measure1"
                          )
                        },
                        dataLimit: 100
                      ),
                      label: "",
                      stacking: "NONE",
                      showLegend: true,
                      showDataLabels: true,
                      showTooltips: true,
                      allowDecimalAxisLabels: false,
                      labelPosition: "ABOVE",
                      allowImageDownload: false,
                      colorScheme: a!colorSchemeCustom(
                        colors: {
                          "#00a88f",
                          "#0087ac",
                          "#f7d027",
                          "#6ba547",
                          "#619ed6"
                        }
                      ),
                      height: "MEDIUM",
                      xAxisStyle: "STANDARD",
                      yAxisStyle: "STANDARD",
                      refreshAfter: "RECORD_ACTION"
                    )
                  },
                  style: "STANDARD",
                  marginBelow: "STANDARD"
                )
              },
              width: "8X"
            )
          }
        )
      }
    )
  }
)

Let me try.

Let me try.

Thank you so much. It worked.

Great! Do verify the answers which were helpful to you.

Sure. :)