InfoChart - unable to swap axis

[Former Member]

Hello,

In the old Chart component there was an option of swapping axis - in the new InfoChart this option is gone and I am unable to swap. I try dragging and dropping and nothing happens. Even if I make changes to my data source it has no effect on the InfoChart - it just doesn't care what's a category, what's a measure always showing one picture.

I desperately need to change colours of my InfoChart's columns, and I am unable to do it either with CSS, or using DS palette.

It seems to be a simple thing - I have three columns in my InfoChart, I want each to be of different colour. I thought, if I swap axis, it will treat them as different series, and let me use the DS palette, but no...

Anyone help please?

[TammyPowlas]

Hi - Etienne, SAP, explains here why swap axis is no longer relevant for Info Charts - see https://blogs.sap.com/2015/11/27/introducing-info-charts-in-design-studio-16/

Could you share screen shots of what you are trying to accomplish, and share version /SP of Design Studio?

[Former Member]

Hi Agata,

I have tried to do the following samples using the VisualBi extensions. Hope this will solve your issue

1. Permanent color assignment to Dimensions

You will notice that even on filtering, the members of the dimension retain their assigned color

2. Permanent color assignment to Measures

As you can see that even after filtering a measure the color assignment for other measures don’t change.

There is a 15 day free trial available for VBX extensions - http://dsxshop.visualbi.com/

Regards,

Bhupi

[Former Member]

Hi Bhupi,

Thanks very much. I suspected the VBX extension could do that. However, currently we are not able to use it.

[MustafaBensan]

Hi Agata,

There's no need to swap axes to implement separate colours for the infoChart. Taking your 3-column column chart as an example, you can achieve the desired result with CSS as follows:

1. Specify the following CSS in the custom CSS file attached to your application:

/* Override infoChart column fill colour for each column */
/* Add more columns as needed                            */

/* Column 1 */
.Col1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect 
{    
   fill: blue;   
}

/* Column 2 */
.Col2 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect 
{    
   fill: green;   
}

/* Column 3 */
.Col3 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(4) rect 
{    
   fill: orange;   
}

2. To apply the colours, execute the following script code in the application "On Startup" event or other suitable point:

INFOCHART_1.setCSSClass("Col1 Col2 Col3");

3. The colour fills are applied to each column of the chart in sequence, so you need to create a CSS class corresponding to each column you want to override with a different colour instead of the standard colour. You will notice that the column nth-child offset starts from 2 for the first column and increments sequentially after that.

4. If you need to apply colours for each column based on a calculated condition, then you can create multiple classes for the same column but with different colours and then apply the appropriate CSS class based on script logic.

Let me know how you go.

Regards,

Mustafa.

[Former Member]

Mustafa. It works!!! Please see below.

I have actually used only .Col1 with the three lines, and applied the whole class to my chart directly and not used the script on Startup. Like this:

.myChart g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect {fill: blue;}

.myChart g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect {fill: green;}

.myChart g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(4) rect {fill: orange;}

It worked anyway (not in the design mode, but when I ran the application). Thank you so much. I have tried a similar code before and it didn't work:

.myChart g.v-m-main g.v-m-plot g.v-datapoint-group .v-datapoint.v-morphable-datapoint:nth-child(1) rect {fill: #aa005f;}

Wonder why it didn't work? Is it because children start with 2, because of the "path" element that precedes the rect elements? Or is it because of the v-morphable-datapoint that I have added? Nevermind.

Thank you so much! You're a star.

Agata

[Former Member]

Interesting turn of events. I have hidden some measures on my charts, and it seems like the colours are only applied to the columns which have values. If the columns doesn't have a value, the colour skips to the next one (see the orange one) - which sort of makes sense as the columns with no values don't really exist.

I will try with some if statements, as it's quite important that the colours are applied to the right columns.

I have tried your code, by the way, but it works the same way.

[MustafaBensan]

Hi Agata,

Thanks for sharing your results. I'm glad the suggested approach worked for you. That's certainly a good idea to combine the three lines into one class in this case. Separating the classes by column is more relevant when you need to apply conditional formatting to each column based on script calculations.

Yes, I suspect your previous similar code may not have worked mainly because the children start with an index of 2 instead of 1 due to the "path" element that you mentioned. The v-morphable-datapoint element does not appear to have any influence.

Regards,

Mustafa.

[MustafaBensan]

Hi Agata,

Yes, that is correct, if you filter the measures/category dimension, the colours will be out of sync because the corresponding column indices change. Therefore if you are applying filters, you need to use script logic that will determine the correct sequence. I have done this in the past by dynamically building an array of the category axis dimensions in the correct sequence after filtering and then applying individual column classes by looping through the array.

[Former Member]

Array sounds like a good plan. Thanks for the hint.

[Former Member]

Thanks Tammy,

I will have a look at Vidya's idea. Well, the reason to change colour on the chart is that each column shows a completely different category, so it's a bit like comparing apples to oranges if they were in the same colour. My example was simplified, I actually show a few more columns on that chart, that can be divided into three categories. So I need two columns that are red, one column that is green, and five columns that are blue. I want them side by side, possibly with a gap in between, and I need to be able to compare amounts, so a common y axis is a must. If they all were the same colour that just wouldn't make any sense.

Now, you could show them on three different charts, and I will try that, but the x axis would not be continuous, and I would need to calculate the max for y-axis and apply it to all three charts. The last time I tried to do that, using setAxisMax would reset my entire CSS class for that chart (definitely a bug), although that was in the older version of DS and I didn't have a chance to check in the newest version if the bug still exists.

So, an answer to your question is simple, there are some cases where you do want to change the colour of the column - it's up to the user/designer and I don't want SAP to be telling me what the "best practice" is (Excel, for that matter, is telling me no such thing and I can do anything I want, and let's keep it that way ;-)), as in many cases best practice just doesn't apply. Another example would be a chart showing 12 months of columns and you want to highlight the most recent month, or any other exception, like values higher than x. There are tons of other scenarios I can think of where I would change column colours (DS, WAD, Excel) and trust me it looks good if not better. I just don't understand why SAP are messing up with their products so much, making chunks of CSS code that worked beautifully in the past, defunct. It took me ages to figure out the right code to do the colour changing in the older version of Chart component, now all this time has just gone to waste and I have to find another way of doing things in InfoChart - when will it end? I know this is not the best place to vent, but there are days that I want to throw my computer out of the window. Lots of bugs in DS to start with, and making users' life even more difficult by removing staff that did actually work. Not cool.

[Former Member]

Hi Agata,

I totally agree with you. "Swap Axes" is a much needed feature for me and I don't understand why they abolished it. Thanks a lot for all your research on that.
I just tried to convert an old waterfall chart to InfoChart/Lumira 2.0. It seems I will have to do a complete redesign of my query and perhaps even data model. Really frustrating, because in this case, it is really complicated.
To SAP: Bring back the "Swap Axis" function! It will do no good, if I tell my customer that they should change their layout because SAP thinks (without knowing the exact business scenario) it's not best practice.
I think Agata already described some valid business scenarios. Where ist the point in restricting the customer in such a way?

Best regards Dominik

[TammyPowlas]

OK, I dropped year/quarter

Changed it to a bar chart (only way I could see changing axis)

[Former Member]

No, it can't be bars. And you have not actually changed axis 🙂

Now, try changing your data source, and see that it won't make any difference. InfoChart is "telling" you how you want to view your data and you can't change it. I thought when they said "swap axis is no longer active", they have introduced a replacement, like you can drag and drop things on your InfoChart. But it seems like they have simply broken the chart. This is so frustrating 😞

[TammyPowlas]

I tried the same in Lumira, and it doesn't allow this type of control on the axis:

[Former Member]

That's just bizarre! In your example displaying data like this (by month etc.) could make sense, but my structure is different, I have something else in place of months, and I really want things to be placed differently.

Swapping axis is also possible in WAD, so I don't understand how on earth am I supposed to display my data now?

Can't change axis, can't change colours, what should I do now?

[TammyPowlas]

You can look at the Design Studio extensions (some are free, some are trial)

The SAP Analytics Extensions directory is here:

https://analytics-extensions.enter.sap/

As an example, Visual BI extensions offer the swap axis feature on some charts

http://cdn.visualbi.com/wp-content/uploads/visualbi-extensions-for-sap-businessobjects-design-studio...

[Former Member]

Yes, we have spoken to them, but unfortunately not able to use their extension for now.

Tammy, thank you very much for your help! Seems like we may need to drop DS entirely and move back to WAD, which is such a shame to be doing this for such a trivial reason!

[TammyPowlas]

OK, I had screen shots but the site ate them up.

Are you trying to do this?

[Former Member]

Tammy,

I am trying to have Water Consumption and Sewer Consumption to swap axis with Year/Quarter. Try it on the standard Chart and you will see what I mean. Why does the InfoChart "think" this is the way I want to show my data? And it thinks this regardless what I do in my data source. This is NOT how I want to display my data.

Apologies, but I have been struggling with this for days now, and I'm reaching my limit here.

I need to start using InfoCharts, because Charts are full of bugs of all sorts, and everytime I am trying to ask questions about them people are telling me to use InfoCharts instead. Now I am trying, and it's not even displaying the data correctly!

[Former Member]

Tammy,

Please drop year and quarter in your example, leaving just months. Then try to rearrange the chart so that you have water consumption and sewer consumption on the x-axis, so two series only.

[TammyPowlas]

If it is a hard requirement to swap axes, why not go back and use the CHART component instead of the INFOCHART? There are a lot a posts on how to control the CSS with the CHART component.

As Etienne stated in his blog you cannot swap axes with the INFOCHART component.

[Former Member]

I need to use InfoCharts because in the new DS the Charts are gone. And they had too many bugs anyway for me to be able to use them.

If you cannot swap axes, then the chart is useless, isn't it?

[TammyPowlas]

I shared some screen shots below - sorry for the delay but every time I post I am getting a site error this morning. I posted 3 series, 2 measures with the infochart below.

[TammyPowlas]

I agree, Infocharts are the future. FYI in 1.6.4.1 there is no more swap axes that I could find with the CHART component. I am sorry for your frustrations with this.

[Former Member]

Ha, ha, that's even better 😄 When will they stop breaking things?

[Former Member]

Just to clarify, I am still using Charts in the older version of DS, not the newest, that's why I am still seeing the swap axis option. I am alternating between the two versions for technical reasons.

[Former Member]

My InfoChart definitely does not work 😞 Pleasy can anyone guide me through the process of swapping measures and dimensions in an InfoChart?

By default my InfoChart displays data like this (two series, three measures):

This is not what I want and standard Chart seems to understand that I need this instead (three series and two measures):

I go into InfoChart configuration and see this:

I can't change the assignment of Measures and Dimensions whatever I try. Dragging and dropping doesn't work. Rearragning the structure in my data source doesn't help either.

Please can anyone show me how to swap Measures and Dimensions?

[TammyPowlas]

You could try using Vidya's idea here https://blogs.sap.com/2016/11/16/changing-bar-colors-sap-design-studio-1.6/

But a business question for you - why do you want to change bar colors? After the IBCS Open SAP class, such colors are not recommended as part of best practice visualization practice. Also see Ingo's ASUG presentation https://discuss.asug.com/docs/DOC-40910

[Former Member]

Yes, I have seen this thread. Although I don't understand what the below means:

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.

I have three numbers in my BW query and I want to display them on an InfoChart as columns. Currently, the InfoChart displays three columns of the same, blue colour:

But I want three different colours. I am not able to do it with CSS - unless someone please share the code with me. I have tried everything. The code that used to work with the old Chart no longer works for InfoChart.

Second possibility I was thinking about, was to use the colours available in Design Studio, but I can't get them to work because the chart shows me only one series of data and I cannot change it to three series - InfoChart does not respond to anything. I want to see my three numbers not as one series, but as three series.

The old Chart component can do the following:

Show as one series in one color:

Swap axis and show as three different categories with different colours, although it won't show the labels!

The old Chart is also responsive to the changes I make in the data source, which InfoChart is no longer capable of. I have tried everything on InfoChart, changing data source, dragging and dropping, nothing.

I know that this is two questions really, but I am only trying to change colours of the columns in the InfoChart.

I am on the latest version with the latest patch of DS.