nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Text in middle of pie

shamo

I have these two reports with same scripts. when I run in version 11.0.4 build id 20121023, I get image on right with both text and number fitting as I want it but when I run in version 4.2.3 build id v20131216, I get image on left. Any help to get them both as on the right with number up text below.

Find more posts tagged with

Comments

Matthew L.

This can happen because of a few properties that have changed between v11 and iHub3 versions.
I believe the reason is because of the "Explode Slice When" feature.
In the "Format Chart" tab of the chart editor, select "Value Series" then find "Explode Slice When" and set its value to "true" (without double quotes).
I believe this will correct the issue.
If not, then check the "Chart Area" menu option and verify that "Coverage" is set to 100%.
You can also check to see if the value in "By Distance" in the "Value Series" menu option to see if this changes the behavior.
 
*by the way, great color scheme.

shamo

Thanks Matthew. Unfortunately i can't get he iHub to show both as i the v11. Do you have any sample you can share for me to look at?

shamo

Anyone with a workaround sample to the mentioned problem above?

Clement Wong

Please attach a sample design with your script.

shamo

This is a sample report from classic models

Clement Wong

You can do this easier without using all those PGVs, and overriding the onCreate and beforeRender events.
 
Attached is a revised design.
 
In the beforeRendering of the chart, we do the following to save the values and update the Title text (should be self explanatory since you are familiar with the HTML5 scripting). Add a debugger; if you want to walk through.
<pre class="_prettyXprint">
beforeGeneration: function(options)
{
for (var i=0; i < options.series[0].data.length; i++ ) {
if (options.series[0].data[i].name == options.title.text)
{
var displayAmount = options.series[0].data[i].y;
var chartTitle = options.title.text;
}
}

//You can change options here.
options.title =
{
useHTML: true,
verticalAlign: 'middle',
text: '<div>' + displayAmount + '</div><div style="color:#ffffff;font-size:12pt;font-family:Arial;font-weight:400;font-style:normal">' + chartTitle + '</div>'
},

options.plotOptions =
{
pie: {
size: "85%"
}
},
options.chart =
{
spacingLeft: 0,
spacingRight:0,
spacingBottom:0,
spacingTop:0,
}

},
</pre>

shamo

Clement, Thank you for the solution. It worked but my requirement is such that the pie values aren't going to be same as the table and that is why I needed the table and scripts to work also output isn't always going to be HTML. When run in pdf, only pie shows no values. Could you tweak my sample for me? Your script sample works but still not serving my purpose. How do I add a break between the options.title and the options.subtible? I believe if I'm able to do that then the subtitle will be below the title. Thank you for you help.

Clement Wong

If you must save variables, you can either: 
1. Create Report Variables to save the values. In the Chart, you can use this.getReportVariable("variableNameHere") to retrieve the value. 
 a. For your report, I did this for "Shipped". In your original onCreate event, we comment the PGV and add:
<pre class="_prettyXprint">
//reportContext.setPersistentGlobalVariable("Shipped", (row["Aggregation"]).toString());

vars["Shipped"] = row["Aggregation"].toString();
 </pre>

 b. The code in the beforeRendering event is not needed:
<pre class="_prettyXprint">
//var chart1 = rr.designHandle.getDesignHandle().findElement("Chart1");
//chart1.getReportItem().getProperty("chart.instance").getTitle().getLabel().getCaption().setValue(reportContext.getPersistentGlobalVariable("Shipped"));

</pre>

2. Use a Text Report Item as HTML. Save the values you want in a JavaScript variable. 
 a. For your report, I did this for "Cancelled". In your original onCreate event, we comment the PGV: 

<pre class="_prettyXprint">
//reportContext.setPersistentGlobalVariable("Cancelled", (row["Aggregation_1"]).toString());
</pre>

 b. We add a Report Item anywhere that you have column binding available for your value. I added a Text Report Item in the top Cancelled box/section. 

<pre class="_prettyXprint">
 <script>
 theCancelledValue = '<VALUE-OF>row["Aggregation_1"]</VALUE-OF>';
 </script>
</pre>

 c. The code in the beforeRendering event is not needed: 

<pre class="_prettyXprint">
//var chart2 = rr.designHandle.getDesignHandle().findElement("Chart2");
//chart2.getReportItem().getProperty("chart.instance").getTitle().getLabel().getCaption().setValue(reportContext.getPersistentGlobalVariable("Cancelled"));

</pre>

Then in the Chart when setting the title, you can reference the value with option 1:
<pre class="_prettyXprint">
 options.title =
 {
 useHTML: true,
 verticalAlign: 'middle',
 text: '<div>' + this.getReportVariable("Shipped") + '</div><div style="color:#ffffff;font-size:12pt;font-family:Arial;font-weight:400;font-style:normal">' + options.title.text + '</div>'
 };
</pre>
 
Or with option 2:
<pre class="_prettyXprint">
 options.title =
 {
 useHTML: true,
 verticalAlign: 'middle',
 text: '<div>' + theCancelledValue + '</div><div style="color:#ffffff;font-size:12pt;font-family:Arial;font-weight:400;font-style:normal">' + options.title.text + '</div>'
 };
</pre>
As to what the difference is with 11 SP4, I'm not sure at this time, but you can open a Support case and have them log a ticket to investigate further and log a ticket with Engineering to address. Also, in my investigation, I was not able to use title.y (<a data-ipb='nomediaparse' href='http://api.highcharts.com/highcharts#title.y'>http://api.highcharts.com/highcharts#title.y</a>) or subtitle.y <a>(http://api.highcharts.com/highcharts#subtitle.y)</a> to move the title or subtitle. 
 
Attached is a revised sample based on your requirement that demonstrates the two options of the report variable and JavaScript variable so you can use in the title.

shamo

Clement, thanks for all the help you are offering me. unfortunately, the attached report doesn't work these are attached pictures of results in both web/html and pdf

shamo

Hello Clement,
thank you very much for the help. I got it working by adding these to the options.title =
{
verticalAlign: 'middle',
floating: true,
y: 30,},
options.subtitle=
{
text: 'Shipped',
verticlaAlign: 'middle',
floating: true,
y: 35,
style:{ .....}
},
 
 
Now my problem is how to break the subtitles if it is too long. Any help?

shamo

Found the solution. inserted the between the text for the break

Clement Wong

Cool. So simple! Thanks for the update.