Pie chart series label line break

NielsP · 2016-01-08T10:57:15+00:00

<p>Hi,</p><br/> <p> </p><br/> <p>I'm working in Actuate BIRT Designer Professional Version: 4.4.0 Build id: v20150710, and I've made a pie chart with rather long series label names.</p><br/> <p> </p><br/> <p>Is there any way to break the label names over multiple lines? I've already tried the following:</p><br/> * Insert…

NielsP

<p>Hi,</p>
<p> </p>
<p>I'm working in Actuate BIRT Designer Professional Version: 4.4.0 Build id: v20150710, and I've made a pie chart with rather long series label names.</p>
<p> </p>
<p>Is there any way to break the label names over multiple lines? I've already tried the following:</p>
<ul><li>Insert line breaks in the strings in the database (didn't work)</li>
<li>Tried this script (<a data-ipb='nomediaparse' href='https://www.eclipse.org/forums/index.php/t/81975/'>https://www.eclipse.org/forums/index.php/t/81975/</a> [didn't work - chart wont load in viewer]) </li>
<li>Tried this other script (<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/23592-2-line-labels-on-a-pie-chart/'>http://developer.actuate.com/community/forum/index.php?/topic/23592-2-line-labels-on-a-pie-chart/</a> [didn't work either - chart didn't load again]) </li>
</ul><p>I'm not very experienced with BIRT scripts and all the before and after phases.</p>
<p> </p>
<p>Is there any other way I can insert a line break? The "label builder" (Chart > Format Chart > Value Series > Labels) is quite strict and will only allow Category data, Value data, Value series name, and Percentile value data in combination with prefix and suffix. The goal is to have a the Percentile value data followed by the Category data (with line breaks).</p>
<p> </p>
<p>I hope you can help me

</p>
<p> </p>
<p>
Thank you,</p>
<p>Niels</p>

Find more posts tagged with

Comments

pricher

<p>Hi,</p>
<p> </p>
<p>You will need to add some Highcharts scripting to your chart to control the width of data labels, the Highcharts property being not exposed in the UI.</p>
<p> </p>
<p>In the Chart builder, go to the Script tab and add the following:</p>
<p> </p>
<div><span style="font-family:'courier new', courier, monospace;">beforeGeneration: function(options)</span></div>
<div><span style="font-family:'courier new', courier, monospace;">{</span></div>
<div><span style="font-family:'courier new', courier, monospace;"> //You can change options here.</span></div>
<div><span style="font-family:'courier new', courier, monospace;"> options.series[0].dataLabels.style= {</span></div>
<div><span style="font-family:'courier new', courier, monospace;"> width: '100px'</span></div>
<div><span style="font-family:'courier new', courier, monospace;"> }</span></div>
<div><span style="font-family:'courier new', courier, monospace;">},</span></div>
<div> </div>
<div>I have attached also a working example.</div>
<div> </div>
<div>Hope this helps,</div>
<div> </div>
<div>P.</div>

NielsP

<blockquote class="ipsBlockquote" data-author="pricher" data-cid="141549" data-time="1452273755">
<div>
<p> </p>
<p>Hi,</p>
<p> </p>
<p>You will need to add some Highcharts scripting to your chart to control the width of data labels, the Highcharts property being not exposed in the UI.</p>
<p> </p>
<p>In the Chart builder, go to the Script tab and add the following:</p>
<p> </p>
<div><span style="font-family:'courier new', courier, monospace;">beforeGeneration: function(options)</span></div>
<div><span style="font-family:'courier new', courier, monospace;">{</span></div>
<div><span style="font-family:'courier new', courier, monospace;"> //You can change options here.</span></div>
<div><span style="font-family:'courier new', courier, monospace;"> options.series[0].dataLabels.style= {</span></div>
<div><span style="font-family:'courier new', courier, monospace;"> width: '100px'</span></div>
<div><span style="font-family:'courier new', courier, monospace;"> }</span></div>
<div><span style="font-family:'courier new', courier, monospace;">},</span></div>
<div> </div>
<div>I have attached also a working example.</div>
<div> </div>
<div>Hope this helps,</div>
<div> </div>
<div>P.</div>
<p> </p>
</div>
</blockquote>
<p> </p>
<p>Hi Pierre,</p>
<p> </p>
<p>Thank you so much! This works like a charm

</p>
<p> </p>
<p>What would be the equivalent for SVG output? I read somewhere that it removes these client side scripts when changing the output format.</p>
<p> </p>
<p>Best,</p>
<p>Niels</p>

pricher

<p>Hi Niels,</p>
<p> </p>
<p>You are correct : SVG chart scripting is executed server side when the report is rendered. Script is entered by selecting the chart in the report and going to the script tab in the editor. The API is of course very different than the one used for Highcharts.</p>
<p> </p>
<p>Adding line breaks in a data label for SVG charts is not as straightforward as with Highcharts, i.e. you cannot directly control the width of the label. The workaround is to add your own line breaks through code. The following script in the beforeDrawDataPointLabel function of the onRender method will split the lines based on an arbitrary line length of about 20 characters:</p>
<pre class="_prettyXprint _lang-js">
function beforeDrawDataPointLabel( dph, label, icsc )
{
var minLineLength = 20;
var currentLineLength = 0;
var lbl = label.getCaption().getValue()
var lengthLabel = lbl.length();
var newLabel = "";
for (i = 0; i < lengthLabel; i++) {
if (lbl.substr(i,1) == " " && currentLineLength >= minLineLength) {
newLabel = newLabel + "\n";
currentLineLength = 0;
}
else {
newLabel = newLabel + lbl.substr(i,1);
currentLineLength++;
}
}
label.getCaption().setValue(newLabel)

}

</pre>
<p>I have attached a sample report.</p>
<p> </p>
<p>Hope this helps,</p>
<p> </p>
<p>P.</p>

NielsP

<blockquote class="ipsBlockquote" data-author="pricher" data-cid="141570" data-time="1452523279">
<div>
<p>Hi Niels,</p>
<p> </p>
<p>You are correct : SVG chart scripting is executed server side when the report is rendered. Script is entered by selecting the chart in the report and going to the script tab in the editor. The API is of course very different than the one used for Highcharts.</p>
<p> </p>
<p>Adding line breaks in a data label for SVG charts is not as straightforward as with Highcharts, i.e. you cannot directly control the width of the label. The workaround is to add your own line breaks through code. The following script in the beforeDrawDataPointLabel function of the onRender method will split the lines based on an arbitrary line length of about 20 characters:</p>
<pre class="_prettyXprint _lang-js">
function beforeDrawDataPointLabel( dph, label, icsc )
{
var minLineLength = 20;
var currentLineLength = 0;
var lbl = label.getCaption().getValue()
var lengthLabel = lbl.length();
var newLabel = "";
for (i = 0; i < lengthLabel; i++) {
if (lbl.substr(i,1) == " " && currentLineLength >= minLineLength) {
newLabel = newLabel + "\n";
currentLineLength = 0;
}
else {
newLabel = newLabel + lbl.substr(i,1);
currentLineLength++;
}
}
label.getCaption().setValue(newLabel)

}

</pre>
<p>I have attached a sample report.</p>
<p> </p>
<p>Hope this helps,</p>
<p> </p>
<p>P.</p>
</div>
</blockquote>
<p> </p>
<p>Hi Pierre,</p>
<p> </p>
<p>My problems have been solved thanks to you! Thank you very much for the help and examples which were easy to follow

</p>
<p> </p>
<p> </p>
<p>Best,</p>
<p>Niels</p>