Move the legend Position

[Former Member]

Hi,

Has anybody worked on moving the legend position in charts?

I have tried many options to play with sap.viz.ui5.types.legend.Common_position but the default position(which is set to right) isnt actually changing.

I am trying the legend on a combination chart. Here is the exact code.

<code>

var oChart1 = new sap.viz.ui5.Combination({

                width : "22em",

                height : "21em",

                plotArea : {

                'colorPalette' : d3.scale.category20().range(),

                'dataShape' :{primaryAxis: ['bar','bar','line']}

                },

                'legend':{position:left},

                /* title : {

                        visible : true,

                        text : 'LyAverage and CYYID By CBDIO'

                }, */

                dataset : oDataset1

        });

        oChart1.setModel(oModel);

</code>

I am not sure hot to use "legendGroup.layout.position" as referenced in JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.viz.ui5.types.legend.Commo...

Please advise.

Thanks,

Atul

[surendra_pamidi · Accepted solution]

Hi Atul,

"sap.viz.ui5.types.legend.Common_position" is Deprecated

i.e. they removed that property in new versions..

[Former Member · Accepted solution]

Hi Surendra,

So, does that mean I cannot alter the legend position? There must be some way round?

Any suggestions?

Regards,

Atul

[surendra_pamidi · Accepted solution]

At present you can do by changing css....

Use this class to do that..

.v-m-legends{

}

or chnage transform property position..

Add marked line in your body  and change translate position as your requirement..

[Former Member · Accepted solution]

Hi Surendra,

I had already tried to play with this class and posted the question when was unsuccessful. I tried to alter the class as below

<script>

      $('.v-m-legends').animate({ transform = translate(0,0)});

</script>

OR

<style>

           .v-m-legends{

              transform = translate(0,0) ; !important

              }

</style>

But none of the two methods worked for me. Please guide me if I am at the wrong path..

Thanks,

Atul

[surendra_pamidi · Accepted solution]

Hi,

Try this

http://www.w3.org/TR/css3-transforms/

[Former Member · Accepted solution]

The stupidest thing I would have ever done- Not checking the documentation.

transform: translate(100px, 100px); works

But transform: translate(100, 100); doesn't.

Thanks for pointing me to the right direction

Regards,

Atul

[Former Member · Accepted solution]

Hey Surendra,

But it seems to be browser dependent. Not sure why it has different behavior in Google chrome and Mozilla firefox. The inline script works fine in FF but chrome denies that

[surendra_pamidi · Accepted solution]

Hi Atul,

-webkit-transform: translate(-100px,-100px);

    -moz-transform: translate(-100px,-100px);

    transform: translate(-100px,-100px);

The transform property used in above is working for both chrome and FF..

.class{

    -webkit-transform: translate(100px,100px);

    -moz-transform: translate(100px,100px);

    transform: translate(100px,100px);

}

Regards,

Surendra.

[Former Member · Accepted solution]

Though it resolves the current problem, but it is not the best solution.

Say I want to use 3 charts in a page. If I alter the css, it would reflect for all three. What if I want top position for one, left position for another and bottom position for the third chart?

Can you help me figure out the placeholder where the svg is defined so that I can add an ID to it and write the custom css for that?

Thanks,

Atul

[surendra_pamidi · Accepted solution]

Hi Atul,

Then give different class or id for each chart and try by using parent class and legend class both  for each chart..

There is a facility in CSS3 that we can give

.parentclass.childclass{

}

I am not sure whether above syntax is correct, but facility is there...

And svg is defined in their js.. You can't overwrite it..

In future, they will surely create some new methods to do like that in API..

So chill..

Regards,

Surendra.

[adtoth]

Hi,

I know it's an old topic but you can try this maybe:

var legend = this.byId("pieChart").getLegendGroup();




var layout = legend.getLayout();




layout.setPosition("bottom");




legend.setLayout(layout);




this.byId("pieChart").setLegendGroup(legend);

[surendra_pamidi]

Hi David,

But in the positions, top and bottom, if the legend text is long, we are not getting the total text.

Do you have any suggestions on that??

Thanks,

Surendra.