Column Chart Configuration in interface

Question

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.

Konduru Chaitanya · Answer

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

goddativ5526 · Answer

Thank you Komal Jain and Chaitanya ,It is working as expected.

Column Chart Configuration in interface

Top Replies