Infochart - Line Chart with multiple Shapes

[Former Member]

Hi Experts,

I have created dashboard with Infochart to display Sales and Sales Target for last 12 months in m mode. I have displayed information in line chart with 2 lines one is for Sales and another line is for target.

my requirement is, I want to represent data points of Sales measure (1st line) with circle (shape) and Sales target (2nd line) with square or triangle.

Is there any way to achieve this functionality with CSS? I have searched this requirement in SCN but did not get any information on how to change shape of Infochart.

Environment: Design Studio 1.6

Thanks for your help in advance!

Regards,

Satyam

[MustafaBensan]

Hi Satyam,

It appears that the chart markers are generated in the chart HTML as an SVG path, rather than by applying a CSS class, as shown in the example below, where the marker shape is a cross:

<g xmlns="http://www.w3.org/2000/svg" class="v-datapoint v-morphable-datapoint v-datapoint-default" fill-opacity="1" transform="translate(677.32 121.589)" data-id="3" data-datapoint-id="4"><path fill="#748cb2" fill-opacity="1" stroke-opacity="1" d="M -11 -4.33333 H -4.33333 V -11 H 4.33333 V -4.33333 H 11 V 4.33333 H 4.33333 V 11 H -4.33333 V 4.33333 H -11 Z" /></g>

As such, unless others have suggestions, I don't think you can influence the SVG path definition via CSS to create a different marker shape.

This is a very good example of a situation where you should consider the value of partner extensions to meet business requirements.

Regards,

Mustafa.

[Former Member]

Hi Mustafa,

Thank you so much for your response. I would like to share our observations here. We have tried below CSS code and it is working perfectly in Chrome browser, but in Internet explorer it is not working. So In chrome, we have achieved our requirement.

.v-plot-main .v-datapoint-group g:NTH-CHILD(2) g.v-morphable-datapoint path{
d:path("M0,-4L4,4 -4,4Z") !important;
fill:#748CB2;
}

We also noticed that in iPad also, the above code did not work.

Regards,

Satyam

[MustafaBensan]

Hi Satyam,

Thanks very much for sharing your findings. That's great you were able to inject an SVG path via CSS to create the desired marker shape per series. I guess cross-browser support and compatibility can be a challenge with certain CSS code, such as the current scenario. At least you have been able to meet your requirement in Chrome.

Regards,

Mustafa.

[TammyPowlas]

Hi Satyam - thank you for searching

Have you tried debugging the CSS to see if you could add it yourself? See https://blogs.sap.com/2014/05/11/how-to-find-and-change-the-css-class-design-studio/

I also Googled this, and found this as an option - perhaps ask for a trial: http://cdn.visualbi.com/wp-content/uploads/visualbi-extensions-for-sap-businessobjects-design-studio... - page 28/29 - looks like it is part of the properties of the chart

Maybe some other partners have add-ons too https://www.sapappcenter.com/home

[Former Member]

Hi Tammy Powlas,

Thanks for sharing the above links. As per the link https://blogs.sap.com/2014/05/11/how-to-find-and-change-the-css-class-design-studio/, I had tried with F12 but I did not find the style which changes the data point shape to triangle. I am not sure If I am missing some thing here.

I would like to know if we can control data point shape on line and legend with CSS.

we do not want to go with custom components for this requirement at this moment.

Regards,

Satyam

[TammyPowlas]

Analysis Office is not custom code; have you tried that? The smart copy should work...

[Former Member]

Hi Tammy Powals,

Thank you for your reply. we are not using Analysis for office. So I did not get chance to try on smart copy option.

Regards,

Satyam

[TammyPowlas]

Hi Satyam - I encourage you to look at Analysis Office, as that is one of the "going-forward" tools that SAP mentioned this morning on their BW/4HANA webinar. Or you can look at extensions as Mustafa mentions below.