Introducing Info Charts in Design Studio 1.6
In Design Studio 1.6, we are introducing a new type of charting component: Info Charts. Visually they are nearly identical to the old chart component, but their configuration is much more flexible. In this post I will give an overview of the component, how to configure it and what are its main features.
Overview
Info Charts are a new charting component that you will find under “Analytic Components” in Design Studio 1.6. The key difference between charts and Info Charts is the fact that Info Charts can be configured independently of the initial view. In the configuration dialog for Info Charts, dimensions from the data source are bound to specific areas of the chart. This means that if two dimensions are in the rows in the initial view, they can be displayed in different areas of the chart. This was not possible with charts in previous versions of Design Studio.
Other differences include:
- New chart types (bullet, trellis charts, combination charts)
- Missing chart types (waterfall planned to be added in a future release)
- Better integration with the Chart Type Picker
- More properties
An Info Chart component and its configuration dialog
Going forward, Info Charts will be the main charting component of Design Studio, and all new charting features will be available on Info Charts. The recommendation for customers is to use Info Charts when creating new dashboards in Design Studio 1.6. However, Charts will still be supported.
Configuring Info Charts
Creating an Info Chart requires the same steps as creating a Chart: dragging the component onto the canvas and assigning it a data source. Once the data source is assigned to the chart, a default configuration will be generated and a chart will be displayed.
To configure the Info Chart, click on the “Chart Configuration” property, where the chart type is displayed. In the Configure Chart dialog you can:
- Change the chart type
- Change where each dimension is assigned by dragging a dimension from one group to another. The available groups depend on the chart type. For instance, only a Trellis chart will have Trellis Rows and Trellis Columns available.
- Change where each measure is assigned. For instance, Value Axis 1 and Value Axis 2 for a dual axis chart.
Each change to the configuration will be reflected in the chart on the right of the dialog.
Configuring a Trellis Info Chart using the Configure Chart dialog
❗ Swap Axis is not a relevant property any more: Since dimensions are assigned directly to chart areas, the chart is not bound to the initial view any more. Moving a dimension from the columns to the rows will have no impact on an Info Chart. To change the look of an Info Chart at runtime, the recommendation is to use the Info Chart Feeding Panel component.
Main features
In no particular order, here are the main features of Info Charts. Some are copied from the Chart component.
Integration with Chart Type Picker and Info Chart Feeding Panel
Two components are meant to be used in parallel with Info Charts: the Chart Type Picker and the Info Chart Feeding Panel.
The Feeding Panel is a component that should be bound to an Info Chart via the properties. It allows you to configure the chart at runtime and change where the measures and dimensions are bound.
The Chart Type Picker works with both Charts and Info Charts. It will allow to change the type of the Info Chart. For Info Chart, it will automatically reflect which type is currently set.
An application with an Info Chart, a Feeding Panel and a Chart Type Picker
Conditional Formatting
This feature is different from the Chart component. In Info Charts, only exceptions coming from the BW query will be displayed. They will display the exact same way they are in the crosstab. To enable conditional formatting, set the “Conditional Formatting Visible” property to true in the Info Chart properties.
An Info Chart component displaying the same conditional formatting as the crosstab
Properties
Similar to the Chart Component, the Info Charts have additional properties to configure the look and feel. The tabs are:
- General: allows to change the Info Chart title, background and padding
- Plot area: allows to configure the area where the shapes are drawn, for instance show/hide data labels, gridlines, etc.
- Axes: allows to configure each axis of an Info Chart
- Legend: allows to configure the legend area
- Data Series: allows to change the color palette and define which measures should be a bar or line for combination Info Charts
- Interaction: allows to configure tooltips and Info Chart selectability
Chart Selection
Info Charts support the same scripting methods than the Chart component regarding selection and behave the same way:
- INFOCHART_1.getSelectedMember(dimension);
- INFOCHART_1.getSelectedMembers(dimension);
Hi Etienne,
thanks for your overview about the new info charts.
I wonder if it's possible to show data labels in combination with conditional formatting. It was possible with the "old" chart component in DS 1.5, but I didn't manage to activate this
combination in DS 1.6. The data labels are unfortunately not shown.
Kind regards
Martin
Hi Martin,
That's actually a bug! CVOM allows to show/hide data labels per condition and we do not pass the property with the conditional formatting. That's why they're always off. I just raised a ticket internally.
Cheers,
Etienne
Hi Etienne
I was not aware of this bug and opened this post: InfoCharts Data Labels
Any updates in regard to this bug?
Regards,
Carlos
Hello Carlos,
We actually noticed that all plotArea properties were ignored once conditional formatting is turned on. We submitted a fix in 1.6 SP1, so it should now work. I will also reply to the other thread.
Regards,
Etienne
* EDIT * Apologies, I didn't realize this was still reproducible in SP1. I will double check and get back to you ASAP.
Hi Etienne,
thanks for your overview, it was vey helpfull.
I have one question: did the usage of the setDataSelection() changed in this component. It looks like it's available but it doesn't work for me.
In my case I want to replace the Chart Type components with the new ones in an existing application. On one page I have additionaly a Dropdown box which users could use to "filter" the charts.
Script for this onselect of the Dropdown looks simple yet it doesn't work for Info Chart.
var filter = DROPDOWN_REGION.getSelectedValue();
D_CHART_1.setDataSelection({"(MEASURES_DIMENSION)":["OBJ_144","OBJ_143"],"OBJ_168":filter});
Info Chart ignores the selection completely and shows all dimension and measures instead.
What am i doing wrong?
Regards,
Pawel
Hello Pawel,
You are doing nothing wrong. This is a bug that slipped through the cracks and we're working on a fix at this very moment.
setDataSelection accepts either:
Passing a JSON object does not work in SP0, but the JSON string works fine, so a workaround for the moment is to add quotes to make it a string.
Let me know if that works. We're hoping to fix this is SP1.
Regards,
Etienne
Hi Etienne,
thanks for sharing the new Info Chart. It looks fantastic!
As there are some exsiting CVOM chart extensions in my case, I find it possible to use in "Chart" component. However, I wonder whether it is also possible to use these CVOM chart extensions in Info Chart & Chart Type Picker.
Best regards!
Daisy
Hi Daisy,
Apologies for the delay! I should check the thread more often. Regarding CVOM extensions, they will only work with the Chart component. It is a topic we have in the backlog however, for a future release.
Regards,
Etienne
It might sound trivial, but the reason I'm not using InfoCharts, is because I can't get rid of the plot borders. I have also not yet been able to get rid of them using css. Any ideas (possibly a hint as to what css class I could use)?
http://scn.sap.com/thread/3856673
Try the solution in the above link. The css mentioned in the post removes the plot border Infochart done in Design Studio 1.6.
Thanks
Awesome, it works! Thank you very much
Unfortunately, doesn't work in IE11.
Hi Etienne,
Thanks for the article.
I have an issue with Info Chart Feeding (ICF). I have created an Info Chart (IC), assigned a data source (BEx Query) to it and then assigned ICF to my IC.
In Design mode everything looks fine, I can preview all my axes in ICF.
However in Executing I see only blue field instead of ICF. IC itself shows proper values.
What property else should be configured?
Thanks and regards,
Ekaterina
Hello Ekaterina,
All you're doing is correct, I do suspect this is a bug and would recommend to open a ticket since I cannot reproduce that issue myself. Normally the feeding panel would always at least display 2 boxes for measures and dimensions. It should never be completely empty.
Could you try the following things? This could help understanding what the problem is:
Cheers,
Etienne
Hi Etienne,
I have opened my application, delete and add IFC once again and it works. But on Tuesday deleting and adding didn't help.
Without any binding I do not see anything.
However, when I click on Chart Configuration, I see no IFC and IC has Data not available above it instead of columns. My DS has Compact View in Rows, though I set up "Show Totals = true" could it be the reason?
And one more question - can I change measures and dimensions height individually?
Regards,
Ekaterina
That is very odd... Compact view should have no impact, as long as all measures are available for all members. For instance the crosstab below does not work because Net Sales and Lost Deals are not available for the members "North East", "South East" and "West":
If you can attach a screenshot of your initial view, this could help, otherwise creating a ticket sounds like the only option to me.
Regarding the height of dimension and measures, if you're talking about making the "Dimensions" part of the Feeding Panel larger, unfortunately no it isn't possible at the moment. The control we are using for the feeding panel doesn't allow this at the moment.
Cheers,
Etienne
Hi Etienne,
Initial view:
I filtered measures and added a dynamic calculated, filtered Cost Centers and switched on Compact view.
Regarding the height of dimension and measures - yes I meant that. I post it as a new idea if somebody hasn't done it yet. 🙂
Regards,
Ekaterina
Hi Ekaterina,
Are you executing in Platform mode? If so, make sure you have the newest (relevant to the client) BIP addon installed?
Regards,
Bogdan
Hi Bogdan,
tried both locally and BI. Add-on is installed
Hi Etienne,
I have one more question. 🙂 Charts and Info Charts have a Data Selection property. Is there any component to bind to the Data Selection property and to change it when an application is executed?
Regards,
Ekaterina
Hello,
To do this usually using the scripting method setDataSelection() should be enough, for instance: INFOCHART_1.setDataSelection({"gender":"M"});
"gender" can be replace with any dimension
"M" can be replace by any member for this dimension
You can then use another chart and do something like below:
INFOCHART_1.setDataSelection({"gender":INFOCHART_2.getSelectedMember("gender").text});
Let me know if that helps.
Cheers,
Etienne
Not exactly. Maybe it was not clear in my comment...
I would like something like a table, where an end-user can select dimensions and members and Info Chart values are changed automatically, in Execution mode.
Regards,
Ekaterina
Would the following not work?
INFOCHART_1.setDataSelection(CROSSTAB_1.getSelection());
This updates an infochart on selection in the crosstab, like below, where I selected F in the crosstab:
No, it doesn't work... Or I do something wrong.
I set properties of the table Y:
On Select: INFOCHART_X.setDataSelection(CROSSTAB_Y.getSelection());
Selection Type: Multi
But Info Chart X doesn't change. No errors, just nothing happens.
With "Keep members on axis" in the context menu of the table all my charts of the same Data Source are modified, I would like to avoid it. And neither Undo Previous Step nor Back To Start in the context menu is available in this case, both options are greyed out. Seems to be a bit uncomfortable for the end-users.
Sorry for the delay, I'm just back from holidays. I'm a little confused as to why nothing happens with this script... I'm reproducing it right now and it works fine for me.
So to clarify, when using "keep members on axis" it works, but does filter out the entire data source, which you do not want, correct?
The scripting above should definitely work, even with multi. I would suggest to test step by step to understand what is not working.
For instance, this should display an alert with all the selected members in the crosstab:
var a = "";
CROSSTAB_1.getSelection().forEach(function(value, key) {
value.forEach(function(element, index) {
a = a + " " + element;
});
});
APPLICATION.alert(a);
You can then try to manually set the data selection like this:
INFOCHART_1.setDataSelection({
"0D_DBREGCOD": element;
});
Sorry I cannot provide with more help, but this is all I can think of. I hope this helps.
Cheers,
Etienne
Hi Etienne,
No, it just doesn't work. "Keep members on axis" is the alternative for the table selection, I have described why it is not the option in this case.
This script works
var a = "";
CROSSTAB_1.getSelection().forEach(function(value, key) {
value.forEach(function(element, index) {
a = a + " " + element;
});
});
This not, I haven't understood what should I put instead of "element", 'cause element itself causes an error.
INFOCHART_1.setDataSelection({
"0D_DBREGCOD": element;
});
These are my current properties for Crosstab (I have changed them several times already but script never worked). Do you have the same? Or should I change anything in IC properties also?
Thanks a lot in advance!
I have to say I am lost as to what could be the problem here... I do not think the crosstab parameters are an issue. I would try the following:
- Does it work when selecting from one chart instead of a crosstab?
- If so, what are the differences between "element" when coming from a crosstab or a chart?
- If not, at least you know if is not a crosstab issue, but I am really not sure what could cause this problem...
Sorry I cannot be of more help but trial and error seems to be the only option from here.
Regards,
Etienne
P.S. Have endly found where to configure Steps Back, but it seems to be a bit confusing: if application property Maximum Number of Steps Back is set to 0, users still see both options as greyed out. I think it would be better not to see them at all in that case. Is it already planned?
I am not aware of any plans to change this behavior actually, but glad you managed to get this working!
Hello,
when can we expect the chart type "waterfall"?
Kind regards
Martin
Hello Martin,
We are currently working on a first version of the info waterfall chart and are hoping to get it in Design Studio for 1.6 SP2. Please keep in my that we cannot commit to any date and it could be pushed out to a later release.
Cheers,
Etienne
Hello Etienne,
thanks for your quick reply. Waterfall is one of the most important chart types for us.
I just noticed unfortunately that another important features is still missing. Under additional properties the “Extend Label Capacity” is not available.
Should I raise an incident ticket for this issue?
Kind regards
Martin
Hello Martin,
Unfortunately, as the info chart component is a new component, we did not have time to import all previous features from the old charts to info charts. We're hoping to harmonize everything soon, but this will not be in 1.6 SP2.
Cheers,
Etienne
The property "Extend Label Capacity" is finally available with DS1.6 SP4.
Hello Etienne
I had check the chart type and cannot find the "box spot" chart.
It is a useful chart type in Lumira & webi.
Will "box spot" chart type release in the following SP?
Thank you!
Willy
Hello Yen,
No other chart types are being considered for 1.6 SP2. The box plot is definitely on our backlog and should be implemented in a later release, especially considering the fact that Design Studio and Lumira both use the same charting library in the background.
I hope this helps.
Regards,
Etienne
Hi Etienne
Wow! That is a good news!
Hope to see it soon!
Willy
Hello Yen,
No other chart types are being considered for 1.6 SP2. The box plot is definitely on our backlog and should be implemented in a later release, especially considering the fact that Design Studio and Lumira both use the same charting library in the background.
I hope this helps.
Regards,
Etienne
Hi Etienne
Thank you for addressing all questions posted about new INFOCHART component.
I have another one. When Conditional formatting is turned on the colours used seems to follow BW exceptions palette. Is it possible to use a different one?
I created a BW exception to highlight the highest value in the chart, then set chart's Conditional Formatting to 'true', now I would like to use a particular colour for it.
I already found the data point css classes, the problem is which one of the data points will be the highest one is unknown therefore not possible to use these classes. Maybe there is another css class that I am missing? One that is used for indicating conditional formatting fill, stroke, etc.
Regards,
Carlos
Hello Carlos,
I cannot test this at the moment, but an option could be to try to match the color of the bar, like this for instance:
path[stroke="#87c958"] {
stroke: red;
}
This should match all paths with this specific color and you can replace them like that. Ideally we should implement a css class however, but this will not be available soon.
I hope this helps.
Cheers,
Etienne
Hello Etienne
I was able to change the colour of the exception by matching the colour of the rectangles.
Thanks a lot for the idea.
Kind Regards,
Carlos W.
Hi Carlos,
I am trying to change the color of the bar based on the target value. Can you please explain me how you were able to change the colors in the info chart.
Thanks,
Chandra.
Hello,
I am stuck in a similar situation. I have tried everything along with all possible options from SDN to change the colour of my bar chart based on exceptions. BW exceptions are applied to chart correctly but I am unable to replace them with custom colours. I tried using the path option you mentioned above but no luck.
Will you be kind enough to provide the exact css code for it please?
Regards,
SD
Hi,
Basically you need to look for the color you want to overwrite and define a CSS rule for that specific color. For a basic chart with no conditional formatting, one bar looks like this:
<rect width="69.46329941767442" height="145.685090342" fill="#748cb2" stroke-opacity="1"></rect>
So the rule I create is:
rect[fill="#748cb2"] {
fill: blue;
}
The result is:
Let me know if that helps.
Cheers,
Etienne
Hi Etienne,
I am using exceptions in BW Query but its not reflecting on Info Chart(Bullet Chart) . Exceptions are working on Bar Chart but it does not have the Target. So i want to use Bullet Chart. Is there a way to use the rule( rule : rect[fill="#748cb2"] { fill: blue;}) dynamically based on the Chart value?
Please sugest.
Thanks,
Chandra.
Hello Chandra,
Just to be clear, you want the target to have conditional formatting in a bullet chart?
I don't think that is supported, I'll double check if this is coming up in a future release.
Cheers,
Etienne
Hi Etienne,
Yes .....If the value is below Target value then red else green.
If its not supporting then any other idea or way to acheive this.
Does Chart Component support BW Query Exceptions??? or can we pass dynamic value in Conditional Formatting?
Thanks,
Chandra.
Hi Chandra,
This is not supported unfortunately... I don't think there is a nice way to achieve that either actually.
In 1.6 Info Charts support BW exceptions, there is no way to do any other conditional formatting with them. Charts do support conditional formatting defined in Design Studio itself. For the next release we're planning to unify all this in a single component.
Cheers,
Etienne
Etienne,
Can you please advise how to change a colour of one bar in the chart (not the whole series of bars, but one bar within the same series). The code you have provided for the rect element changes all bars of the same colour (same series).
I have tried:
.chart-style-8 g.v-m-main g.v-m-plot g.v-datapoint-group rect[fill="#748cb2"]:first-child {
fill: red !important;
}
but this doesn't work.
Thank you,
Agata
Hi,
I am experiencing a problem with the info chart when changing the chart type (either in script or using the chart picker).
If I use the advanced properties to set palette colours and/or selectability properties, my settings are overridden if I change the chart type. In my case, I want to disable the ability to right click on the category to get the menu and I want to use a custom colour palette.
This works well until the chart type is changed, at which point the settings are lost and the defaults are restored.
I am using DS 1.6 SP01 in M mode.
Has anyone else noticed this? Am I doing something wrong?
Any help would be appreciated.
Cheers, Pat
Hi Etienne,
I try to use InfoChart with conditional formatting. When I set the conditional formatting property to true it works, but some of additional properties of the chart stops working. Example:
1.
a) without conditional formatting:
b) with conditional formatting
2.
a) without conditional formatting:
b) with conditional formatting
Is there a way to use conditional formatting and set dotted grid lines and display the labels? Also I try want to display the measure in the data labels but couldn't find way to do it. In my query the measure is presented in the cells but it doesn't appear in the chart data labels.
Hi,
I have a situation where I needed to display two lines on an info chart from a single BEx Query results (shown below). Line 1 on the chart represents first 12 values and Line 2 represents the remaining 12 values of the column "Key Figure 1 (4SG0VOFHHE69A1NP0IHC2EG2N)". The dimension to use for X-axis is Start Month (ZSTARTMON).
I ran the above code to check whether it returns the first 12 values from the dimension ZSTARTMON and display in a list box, and it works.So, I replaced the Listbox line code with the following code to display first 12 rows of ZSTARTMON & its Key Figure 1 column values on the info chart but it doesn't work instead it display all the KF's and dimensions. Not sure what am I missing here.
INFOCHART_1.setDataSelection('{"(MEASURES_DIMENSION)":"ZSTARTMON","4SG0VOFHHE69A1NP0IHC2EG2N"}');
Thank you for any help.
Regards,
Dilip
Hi Etienne,
It seems the dynamic scaling for info charts (line charts) is not working in Design Studio 1.6 SP2. Before we were on Design Studio 1.5 and we used the Chart Component. When the scaling indicator in the chart component was set the y-axis was dynamically determined based on the plotted data in the graph.
So it all values in the graph were between 80 and 100. The Y-axis started at 80 and ended at 100. But when we set this indicator in the infochart nothing happens.
Any help would be appreciated.
Regards,
Rob
Etienne,
Can you please clarify what you mean by this:
Swap Axis is not a relevant property any more: Since dimensions are assigned directly to chart areas, the chart is not bound to the initial view any more. Moving a dimension from the columns to the rows will have no impact on an Info Chart.
I have tried using InfoCharts, but regardless of how my data is structured in my data source, InfoCharts decides what is a row, what is a column and I can't force it to "swap axis" like I used to be able to do in the old Chart component. I get it that you changed that. But how do I force my InfoChart to display data differently?
In an example similar to yours above I want years to be the different categories and Sales values to be one series. How do I make InfoChart "swap axis" please? I tried dragging and droping things around, but it's not working.