Filter use in Column Chart

Certified Senior Developer

Hello everyone,

Can anyone suggest how we can use userfilter in column chart? I am fetching data from records in column chart. However, filter is not working. Please suggest.

Thanks

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer
    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.

  • 0
    Certified Senior Developer
    in reply to Konduru Chaitanya

    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. 



  • 0
    Certified Lead Developer
    in reply to manjit.1486

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

  • 0
    Certified Senior Developer
    in reply to Konduru Chaitanya

    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?

  • 0
    Certified Senior Developer
    in reply to manjit.1486

    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.

  • 0
    Certified Senior Developer
    in reply to Konduru Chaitanya

    Okay. I will try to do the same.

  • 0
    Certified Senior Developer
    in reply to manjit.1486

    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?

  • 0
    Certified Senior Developer
    in reply to Konduru Chaitanya

    Did you get a chance to check the code?

  • 0
    Certified Senior Developer
    in reply to manjit.1486

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

  • 0
    Certified Senior Developer
    in reply to Konduru Chaitanya

    Not get any luck by doing this.

  • +1
    Certified Senior Developer
    in reply to manjit.1486

    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"
                )
              }
            )
          }
        )
      }
    )

Reply Children