Change the legend order

Fuigi · June 3, 2015

Hi I create a bar chart

Fuigi · June 3, 2015

here I attach a report exemple what I have.

JFreeman · June 3, 2015

You can modify the legendIndex of the series options to change the order of the items in the legend of an HTML5 chart.
For Example:
<pre class="_prettyXprint _lang-js">
beforeDrawSeries: function(series, seriesOptions, chart, seriesIndex)
{
if(seriesIndex == 0){
seriesOptions.legendIndex = 2;
}
},
</pre>
Take a look at the attached modified version of your sample report with this code in place.

Fuigi · June 4, 2015

Hum. When you're executing your report with that code the legend order is 2012 above 2011 ?
 
 
because me I have that

Fuigi · June 4, 2015

I'm not sure but I think I understand something.
 
In this code we use serie, so serie 1 and serie 2 for exemple.
 
"seriesIndex == 0" is for the serie 1 so ?
 
But here I don't use a serie so I don't know if this has an influence. I use the "optional grouping" the seriesIndex can be used in this ?
 
I try different way but nothing work

JFreeman · June 4, 2015

Yes, in the modified sample report I attached in my previous the legend displays the 2012 series above the 2011 series.
 
When you use option grouping on the y series, it will create a separate series for each grouping dynamically when the chart is rendered. Therefore, when the chart is rendering there will be a separate series and series index created for each grouping.
 
The legend index, like the series index, is the index associated with each item in the legend. Since your sample has 2 series, by default, the legend index for series 1 will be 0 and the legend index for series 2 will be 1.
 
What I have done is to simply change the legend index of the first series to 2 which will place it after the second series in the legend index list causing it to display below the second series' legend entry.

Fuigi · June 4, 2015

Ok I understand

. 
But why that don't work with me ? I try to generate your report without modification by me. And that make the screen you can see just above.
 
I will try something else tomorow

JFreeman · June 4, 2015

Hmm that is strange as I just downloaded the report I attached myself and ran it without modifications and I get the correct result.
See the attached screenshot for reference.
 
What version of the designer are you using?

Fuigi · June 6, 2015

I use the last version 4.4 birt designer pro. 

That don't work with my professionnal computer (and IE 10)

I try with my personnal computer, with same version of Birt designer pro but google chrome and that work. 
 
I don't know if this issu is due to IE or my professionnal computer.

JFreeman · June 8, 2015

I do not believe it is specific to IE 10 itself.
I just tested with IE 10 on my machine and it worked without issue. See the attached screenshot for reference.
 
This makes me believe it is something specific to the machine.
What are your browser security settings like on the machine with the issue?
Do you get any javascript errors on the page?
 
My guess would be that something is blocking this client side code from running.

Fuigi · June 10, 2015

That's work now. My network administrator make some modification and that work.

JFreeman · June 10, 2015

Wonderful.
I am glad to hear you got it working.

Fuigi · June 11, 2015

Thank for your help !

JFreeman · June 11, 2015

You're welcome.
I'm happy to help.

EsthervdP_70 · June 2, 2017

Really appreciate your answer and example. Thanks!

Grimmr74 · October 21, 2021

Im new here, if threads are this old, are the attached report examples deleted or are they hidden in a way I cant easily see them

Karen Weir · October 21, 2021

Thank you @Grimmr74

It looks like this conversation was migrated from a previous system, and unfortunately the attachment was not included in the process. We do not have the original attachment available, nor the attachment in @JEFreeman 's comment. Our apologies for this inconvenience.

newcomer1 · February 20, 2023

Hi, my BIRT designer version is 4.9.0, and the parameters in beforeDrawSeries have changed. How to control legend order in this function now. Could anyone please help me with this problem?

/**
 * Called before rendering Series.
 * 
 * @param series
 *      Series
 * @param isr
 *      ISeriesRenderer
 * @param icsc
 *      IChartScriptContext
 */

function beforeDrawSeries( series, isr, icsc )
{
}

newcomer1 · February 20, 2023

I solve the problem by swapping the left and right item locations, the order will be reversed. It works fine for me.

function beforeRendering( gcs, icsc )
{
var legendItems = gcs.getRunTimeContext().getLegendLayoutHints().getLegendItemHints( );

for( i=0; i < legendItems.length / 2; i++ ){
// left item and right item
var leftItem = legendItems[i];
var rightItem = legendItems[legendItems.length-1-i];
//swap their location(top, left)
top = leftItem.getTop();
left = leftItem.getLeft();
leftItem.top(rightItem.getTop());
leftItem.left(rightItem.getLeft());
rightItem.top(top);
rightItem.left(left);
}

}

Change the legend order

Comments

Categories