Viz Frame Dynamic Legend

[Former Member]

Hello,

Currently I am working on an application where I have several vizframe charts on my page. Upon clicking a section on my charts (i.e slice of a pie chart, a stack on my bar chart) the data on the page will apply a filter based on what the user clicks on, the charts should then update accordingly.

Currently I am having some issues with dynamically updating the legend on my chart.

For example:

I have a pie chart displaying the amount for 4 different payment types. The data I feed to the chart is in this format:

{
{PmntType: "CCP", Sum: 5961124.239999991}
{PmntType: "RBT", Sum: 84314601.23000008}
{PmntType: "MDF", Sum: 144967.26000000085}
{PmntType: "BDF", Sum: 1779.74}
}

Thus each PmntType is represented by a slice on my pie chart. Each PmntType will also appear on the legend. When a user clicks on one of the slices, the page will filter out a larger data set to show only records with the corresponding PmntType. The pie chart will then re-render with the filtered data:

{
{PmntType: "CCP", Sum: 5961124.239999991}
}

The pie chart will now just be one big circle as expected. The issue I am running into is that on the charts legend, I am still seeing all 4 different PmntType. What I would like to achieve is given the filtered data above, I should only see that one PmntType(CCP) in my legend.

Below are the settings I have in vizProperties.

vizProperties="{
	plotArea: {
		background: {
			border: {
				top: {
					visible: false
				},
				bottom: {
					visible: false
				},
				left: {
					visible: false
				},
				right: {
					visible: false
				}
			}
		},
		dataLabel: {
			visible: true,
			formatString: '0.0u',
			type: 'value'
		},
		dataPointSize: {
			min: 10,
			max: 40
		},
		dataPointStyle: {
			rules: [
				{
					dataContext: {PmntType: 'CCP'},
					displayName: 'CCP',
					properties: {
						color: 'sapUiChartPaletteQualitativeHue1'
					}
				},
				{
					dataContext: {PmntType: 'MDF'},
					displayName: 'MDF',
					properties: {
						color: 'sapUiChartPaletteSemanticGoodLight2'
					}
				},
				{
					dataContext: {PmntType: 'BDF'},
					displayName: 'BDF',
					properties: {
						color: '#2B7D2B'
					}
				},
				{
					dataContext: {PmntType: 'RBT'},
					displayName: 'RBT',
					properties: {
						color: '#2C4E6C'
					}
				}
			]
		}
	},
	title: {
		text: 'Reward Amount by Reward Type',
		visible: false
	},
	legend: {visible: 'true'},
	valueAxis: {
		title: { visible: false, text: 'Sum in EUR' }
	},
	interaction: {
		selectability: {
			mode: 'single',
			plotLassoSelection: false
		}
	}
}"

What I have found is that when setting dataPointStyle above to control the colors of the chart, the legend fails to update dynamically, If removed, the legend updates as expected, however I do not have control of the chart colors if removed.

I have attempted to use dataPointStyleMode: 'update', this resulted in my legend values to be duplicated where the first set will be my 4 PmntTypes with the colors set in my dataPointStyle rules followed by the same 4 PmntTypes with default colors. The second set however DOES update dynamically.

I have also tried, legend.ignoreNoValues with no success.

If any one has any similar experiences please do share, Thanks for reading!

[former_member196805]

Would that be possible for you to share your filtering logic when user has clicked on one of the slice? I am asking because dimension values visible on legend aligns with the dimension values in the dataset. If CCP is the only dimension value remains after the filtering, CCP should be the only one visible on legend.