Default selection functionality in Pie Charts

[kgaurav2k14]

Hi Friends,

Scenario : I have a pie chart in my design. I need to incorporate some functionality on selection of pie chart member. At the moment, I am able to achieve this by writing below piece of code in "on select" event of Pie Chart.

TEXT_1.setText(CHART_1.getSelectedMember("ZCMP").text);

This text box now gets the value once I select any company from my pie chart.

Issue : However, this value gets populated in text box only when I select the company manually in pie chart, I need to have a default selection on load of the page i,e I need one company to be selected once the page is loaded automatically.

My Approach : I thought of putting a code for CHART_1.Onselect() method. But I couldn't find any method which selects any value by default. Can you please help me in this matter.

SDN Search : I tried to find its solution in web but couldn't find much except one thread which is close to my requirement. But it doesn't have the solution.

Thanks,

Gaurav

[MustafaBensan · Accepted solution]

Hi Gaurav,

I am very familiar with the chart default selection feature you are trying to replicate from Dashboards (Xcelsius).  As you have realised, unlike Xclesius, this feature is not supported out-of-the-box with Design Studio.  The approach suggested by Anand will work but let me elaborate with two options you can consider:

1) Set default filter value of column chart at startup

I have replicated your scenario with a Pie Chart and Column Chart.  The "On Startup" script of the application is as follows:

var defaultRegion = DS_1.getMembers("ZAIRLINID__ZAIREGN", 1);

var defaultRegionText = "";

DS_2.setFilter("ZAIRLINID__ZAIREGN", defaultRegion);

defaultRegion.forEach(function(element, index) {

  defaultRegionText = element.text;

});

TEXT_1.setText(defaultRegionText);

Here data source DS_1 is assigned to the pie chart and data source DS_2 is assigned to the column chart.  The result is that on startup, the first member of the data source DS_1 (in my example, region "Domestic"), is applied as the default filter for the column chart, as shown below:

As, Anand has pointed out, the Design Studio charts do not have a concept of an always selected state (as we are used to with Xcelsius), so this may be a little confusing for the users.  You could try applying CSS to highlight a default selection using a technique similar to that described by Haripriya Gopi in the post Default Selection in a Crosstab in SAP BusinessObjects Design Studio.  However, I'm not sure if the equivalent could be easily achieved for the pie chart.

An additional point you need to be aware of is that if the user clicks on a selected item again, it becomes deselected, resulting in the filter being effectively removed.  Therefore you need to check for this in the "On Select" script of the pie chart and update the selection text accordingly.  The script is as shown below:

var selectedMember = me.getSelectedMember("ZAIRLINID__ZAIREGN");

var selectedMemberKey = selectedMember.internalKey;

var selectedMemberText = selectedMember.text;

DS_2.setFilter("ZAIRLINID__ZAIREGN", selectedMemberKey);

if (selectedMemberText == "") // check for deselection

{

  selectedMemberText = "All Regions";

}

TEXT_1.setText(selectedMemberText);

When a pie chart selection is made, the result looks like this:

When the pie chart item is deselected, the result looks like this (note the text title reads "All Regions"):

2) Select all items on default

Since with the standard functionality although you can set a default filter but you can't highlight a default selection on the pie chart at startup, a more intuitive approach for users could be to simply show all companies in the column chart initially and subsequently allow users to select and filter from the pie chart.  In this case your "On Startup" script would simply read as follows:

TEXT_1.setText("All Regions");

Or you could have an empty script and specify the startup text as a default value in the Properties panel.

The result of this is the same as the "All Regions" screenshot shown above.  There is no change to the "On Select" event script of the pie chart so it would behave the same way as option 1 above.

Regards,

Mustafa.

[kgaurav2k14 · Accepted solution]

Thanks Mr.Bensan for your efforts to show two approaches. I went ahead with the later approach.

Its very difficult to highlight a pie chart sector using CSS as it separates out from the shape when selected and comes in when again gets deselected.

During application load, I show all the companies value in the column graph. On selection and deselection of Pie chart values, the column graph values also changes according to the approach mentioned by you.

Thanks,

Gaurav

[MustafaBensan · Accepted solution]

Hi Gaurav,

Yes, I thought it might be a little tricky to set a pie chart default via CSS because of the issues you've pointed out.  If you would still like to investigate highlighting via CSS, you might find it easier to implement by replacing the pie chart with a bar chart.  In general, this is recommended as a better visualization option than a pie chart as it allows a clear and more direct comparison of values.

Regards,

Mustafa.