Hi Friends,
I have a requirement for an interface that consists of a column chart and a filter with top 1 and top 2 values.
I am using a record field for grouping, so it is giving 10 columns in the chart. However, when I select top 1 in the filter, I want the graph to display only 1 column. If I select top 2, I want the graph to display only the top 2 columns.
Refer below pics
Normal Pic :
when I select top1 I want to show only inventory management in entire graph,.
When I select top2 I want to show only inventory management and Quality control columns in chart.
Discussion posts and replies are publicly visible
Please share the code for this interface, and ...
Hello goddativ5526
You will have to get rid of the record data from the data parameter of the column chart component and group the data in a separate local variable. Later you will have to use the series parameter of the column chart to build your column chart.
Use the below example expression
a!localVariables( local!data: index( a!queryRecordType( recordType: recordType!YourRecordType, fields: a!aggregationFields( groupings: { a!grouping( field: "recordField1", alias: "categoryId_grouping2" ) }, measures: { a!measure( function: "COUNT", field: "recordField2", alias: "id_count_measure1" ) } ), pagingInfo: a!pagingInfo( sort: a!sortInfo( field: "id_count_measure1", ascending: false() ), startIndex: 1, batchSize: 100 ) ).data, if( a!isNullOrEmpty(ri!ruleIn), {}, enumerate(ri!ruleIn) + 1 ), {} ), { a!dropdownField( choiceLabels: { "Top 1", "Top 2" }, choiceValues: { 1, 2 }, label: "Select", labelPosition: "ABOVE", placeholder: "--- Select a Value ---", value: ri!ruleIn, saveInto: { ri!ruleIn }, searchDisplay: "AUTO", validations: {} ), a!columnChartField( label: "Column Chart", categories: {}, series: { a!chartSeries(data: local!data.id_count_measure1) }, stacking: "NONE", showLegend: true, showTooltips: true, labelPosition: "ABOVE", allowImageDownload: true, colorScheme: "RAINFOREST", height: "MEDIUM", xAxisStyle: "STANDARD", yAxisStyle: "STANDARD", refreshAfter: "RECORD_ACTION" ) } )
Hi goddativ5526
posting on behalf of Konduru Chaitanya
Here is the solution for your issue
a!localVariables( local!data:index( a!queryRecordType( recordType:<your record>, fields: a!aggregationFields( groupings: { a!grouping( field:<record field for grouping>, alias: "categoryId_grouping2" ) }, measures: { a!measure( function: "COUNT", field: <Record field for count>, alias: "id_count_measure1" ) } ), pagingInfo: a!pagingInfo( sort: a!sortInfo( field: "id_count_measure1", ascending: false() ), startIndex: 1, batchSize: 100 ) ).data, if( a!isNullOrEmpty(ri!ruleIn), {}, enumerate(ri!ruleIn) + 1 ), {} ), { a!dropdownField( choiceLabels: {"Top 1","Top 2"}, choiceValues: {1, 2}, label: "Select", labelPosition: "ABOVE", placeholder: "--- Select a Value ---", value: ri!ruleIn, saveInto: {ri!ruleIn}, searchDisplay: "AUTO", validations: {} ), a!columnChartField( label: "Column Chart", categories: {local!data.categoryId_grouping2}, series: {a!chartSeries(data:local!data.id_count_measure1)}, stacking: "NONE", showLegend: true, showTooltips: true, labelPosition: "ABOVE", allowImageDownload: true, colorScheme: "RAINFOREST", height: "MEDIUM", xAxisStyle: "STANDARD", yAxisStyle: "STANDARD", refreshAfter: "RECORD_ACTION" ) } )
Thank you Komal Jain and Chaitanya ,It is working as expected.