Skip to Content
avatar image
Former Member

Infochart - Line Chart with multiple Shapes

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Jun 12, 2017 at 10:02 PM

    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-vbx-user-guide.pdf - 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

    Add comment
    10|10000 characters needed characters exceeded

    • 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.

  • Jun 13, 2017 at 04:04 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • 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.