Long Length Legends issue on Pie chart

Hi,
 
I was trying to display long length legends on pie chart.The legends are overlapping the pie chart.
 
Current layout is "Auto Layout". Please find the attached example report design.is their a way to wrap the text to avoid overlap?
 
<div>Actuate BIRT Designer Professional Version: 4.2.3</div>
<div> </div>
<div>Regards</div>
<div>Kishore G</div>

Find more posts tagged with

Comments

JFreeman

You can specify the width for the data labels which will force a wrap on each space in the label.
<pre class="_prettyXprint _lang-js">
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex)
{
pointOptions.dataLabels = {
style: {
width: "50px"
}
}
},
</pre>
If the Legend is displaying the exact same information as the data labels, you can also turn off the Legend as it is redundant data that distracts from analyzing the pie chart itself.

mwilliams

What would you like to see instead? It seems that the issue here is too much stuff in too small of a space. One thing you could do would be to use tooltips to show the label information instead of leader lines and labels. Also, you could build your own legend in a grid outside the chart to free up space. Let me know.

rajkishore

<blockquote class="ipsBlockquote" data-author="JFreeman" data-cid="133986" data-time="1424883035">
<div>
You can specify the width for the data labels which will force a wrap on each space in the label.
<pre class="_prettyXprint _lang-js">
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex)
{
pointOptions.dataLabels = {
style: {
width: "50px"
}
}
},
</pre>
If the Legend is displaying the exact same information as the data labels, you can also turn off the Legend as it is redundant data that distracts from analyzing the pie chart itself.
</div>
</blockquote>
Thanks, I tried you solution it is working only if there is a space in text as you mentioned. Since we don't have any spaces in the label text. it is causing issue and overlapping the legend.Can we have any alternative solution

rajkishore

<blockquote class="ipsBlockquote" data-author="mwilliams" data-cid="133988" data-time="1424883165">
<div>
What would you like to see instead? It seems that the issue here is too much stuff in too small of a space. 
One thing you could do would be to use tooltips to show the label information instead of leader lines and labels. Also, you could build your own legend in a grid outside the chart to free up space. 
Let me know.
</div>
</blockquote>
Thanks, Do you have any sample to create own legend, Please share with me that would be helpful.

mwilliams

Unfortunately, I didn't notice that you were using BDPro and HTML5 charts. That changes the way this would be done. I don't have an example, but I can look at creating one. It wouldn't be til Monday though, probably. Maybe Jesse has time to try to create something.

JFreeman

There are probably a few different ways to create a custom legend. Here is how I did it.
 
Add scripting to the chart itself to create a global array for the browser and push the name/color of each legend item into the array:
<pre class="_prettyXprint _lang-js">
afterRendering: function(chart)
{
//create global variable for legend properties array
window.legendProps = [];

//get total number of items to be placed into legend and iterate through them
var legendItemCount = chart.getCore().series[0].data.length;
for(var i=0; i<legendItemCount; i++){
//create nested array to hold particular legend item name and color
var itemProp = [];
itemProp.push(chart.getCore().series[0].data[i].name);
itemProp.push(chart.getCore().series[0].data[i].color);

//push nested array into gloabl legend properties array
window.legendProps.push(itemProp);
}
},
</pre>
Then add a Text Item to the report design. Within the Text Item, use javascript to create a table and push the name/color of each item into a row:
<pre class="_prettyXprint _lang-js">
<script>
//create table to hold canvas and textItem
var newTable = document.createElement('table');

//get total number of legend items from global variable set in chart scripts
var legendLength = window.legendProps.length;

//Loop through all legend items to be added to custom legend
for(var i=0; i<legendLength; i++){

//crate new Table Row for items
var newRow = document.createElement('tr');

//create new detail row and canvas
var newDetail1 = document.createElement('td');
var newCanvas = document.createElement('canvas');

//set width/height of canvas
newCanvas.width = 20;
newCanvas.height = 15;

//obtain 2d context of canvas and set fill color obtained from legendProps array set in chart script
var ctx = newCanvas.getContext("2d");
ctx.fillStyle=window.legendProps[i][1];
ctx.fillRect(0,0,20,15);

//append canvas into table detail and table detail into table row
newDetail1.appendChild(newCanvas);
newRow.appendChild(newDetail1);

//create new detail and text item
var newDetail2 = document.createElement('td');
var newText = document.createElement('p');

//set contents of text item from legendProps array
newText.textContent = window.legendProps[i][0];

//remove default margins on text item
newText.style.marginTop="0px";
newText.style.marginBottom="0px";

//append text item into table detail and table detail into table row
newDetail2.appendChild(newText);
newRow.appendChild(newDetail2);

//append table row to table
newTable.appendChild(newRow);
}
//append table to this text element
//element id is obtained based on value specified as its bookmark.
document.getElementById("js3_customLegend").appendChild(newTable);
</script>
</pre>
Take a look at the attached modified version of your sample report with these modifications made.

mwilliams

Thanks, Jesse!

Diren

Hi JFreeman,
 
I tried the method mentioned in this post and this example you have posted.<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1112-custom-html5-chart-legend/'>http://developer.actuate.com/community/forum/index.php?/files/file/1112-custom-html5-chart-legend/</a>
 
I couldn't run the example report because of an error in the chart.
Then i used the code in this post for the report i created. I added the first script in the chart's script area and i added a text element and put the second script in that.
 
But it doesn't generate the legend at the place where the text element is placed.
 
I tried debugging but i'm using a scripted data source where i'm getting data from a java method.
(In the java class i'm sending a http request and gets a json response.Then i use that to create a list of objects which then will be returned).When i try to debug it gives me an error saying that java class cannot be found. 
That's a separate issue i'm having with debugging.
 
Anyway what i'm trying to achieve is to put the legend of the chart in a separate column of the grid.
(Reason behind this requirement is explained in this question i posted - <a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/36650-aligning-birt-charts-regardless-of-the-legend-size/)'>http://developer.actuate.com/community/forum/index.php?/topic/36650-aligning-birt-charts-regardless-of-the-legend-size/)</a>

JFreeman

What version of BIRT are you using?
Are you using the OS designer or the Professional designer?

Diren

<blockquote class="ipsBlockquote" data-author="JFreeman" data-cid="136524" data-time="1432826986">
<div>
What version of BIRT are you using?
Are you using the OS designer or the Professional designer?
</div>
</blockquote>
I'm using the latest BIRT verision. I Downloaded " birt-report-designer-all-in-one-4_4_2-20150217" on 30th April.
It's running on eclipse luna.

JFreeman

Okay, that will be why the example did not work for you.
The example in this thread is for HTML5 charts in the Professional designer which are not available in the open source designer you are using.
 
Let me see if I can dig up an external legend example for SVG charts in OS BIRT.