How to show absolute value in tooltip in a pe:gChart

Question

I am using google chart to display pie chart in primefaces.PrimeFaces version is 6.1. Currently the tooltip has absolute value and percentage. i just want to display absolute value. My code is

<div id="savChart">
  <pe:gChart value="#{dashboardMB.dynamicChartObj}" width="400" height="400"
  title="Quanity Wise">
  </pe:gChart>
</div>

GChartModelBuilder chartBuilder = new GChartModelBuilder();
chartBuilder.setChartType(GChartType.PIE);
chartBuilder.addColumns("Topping", "Slices");
chartBuilder.addRow("Sleep", 7);  
chartBuilder.addRow("Work", 6);
chartBuilder.addOption("pieSliceText", "value");
chartBuilder.addOption("tooltip.text", "value");
chartBuilder.addOption("legend","{ position: 'top', 'alignment': 'start' }");

chartSavingModel = chartBuilder.build();

I need the tooltip like as shown below.

For pieSliceText, chartBuilder.addOption("pieSliceText", "value"); code works properly. As you can see, I added the chartBuilder.addOption("tooltip.text", "value"); that according to the Google Charts should work but it does not work for tooltip.

please read https://stackoverflow.com/help/tagging and see my edit — Kukeltje, Apr 29 '20 at 07:32
I improved your edit... Adding explanation etc.. is good... And it now stil contains a 'does not work' but checked the comment by WoAiNii on the answer? Inspecting the code on the client? That is investigating and things you as a developer should normally do. Cheers — Kukeltje, Apr 30 '20 at 08:17
Can you try `chartBuilder.addOption("tooltip", "{text: 'value'}");` or something like this — Kukeltje, Apr 30 '20 at 08:19
'no result' is again an end-user formulation. Inspect like @WoAiNii did, client side in the html — Kukeltje, Apr 30 '20 at 08:33
I inspected and foud out the options for chart was like - chart:"{\"type\":\"PieChart\",\"options\":{\"pieSliceText\":\"value\",\"tooltip\":\"{text: \\u0027value\\u0027}\",\"legend\":\"{ position: \\u0027top\\u0027, \\u0027alignment\\u0027: \\u0027start\\u0027 }\"} same as explained as @WoAiNii. But chartBuilder.addOption("pieSliceText", "value"); line of code is working. — Mani Ratna, Apr 30 '20 at 08:59
No, the json is not the same as @WoAiNii posted.. the `u0027` is there. So it seems the issue that was referred to in the answer (which I did not check after my change, sorry, for that and the option Melloware initially used does work) is related. The JSON is created incorrectly. Since the source of PrimeFacesExtensions is open, you can easily inspect that.... and maybe even create a fix and pull request for it. — Kukeltje, Apr 30 '20 at 09:22
\\u0027 -> ' i try with and without with the same result, @Kukeltje could be related to GSon version? jquery version? I try to debug pfe (I hate minified js, and js too) but can't find where google api are called (GChartRenderer? or only by js) — WoAiNii, Apr 30 '20 at 09:49
@WoAiNii: Browsers (at least FireFox can) de-minify JS (yes, variables are still short ;-)) And the js for the config is created iirc in the GChartRenderer. Could be GSon related, but I suspect the adding of 'complex' fields in PrimeFaces extensions has an issue. — Kukeltje, Apr 30 '20 at 10:19

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

You simply need to read the Google Charts documentation. https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options

There is a property called tooltip.text that defaults to "both".

tooltip.text

What information to display when the user hovers over a pie slice. The following values are supported:

'both' - [Default] Display both the absolute value of the slice and the percentage of the whole.

'value' - Display only the absolute value of the slice.

'percentage' - Display only the percentage of the whole represented by the slice.

Type: string

Default: 'both'

How to add this in the java code can be seen in the other answer.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 29 '20 at 11:51

Melloware

10,435
2
32
62

I need to change the tool tip value to absolute value don't need percentage value in tool tip. Your answer changed my pie slice value to quantitative value. i have added code for changing tooltip values as above but its not working – Mani Ratna Apr 29 '20 at 13:18
1

@ManiRatna: I think Melloware copy-pasted the wrong configuration. I edited the answer. Still it is all in the link, just Read The Fine Manual... – Kukeltje Apr 29 '20 at 14:12
i have used chartBuilder.addOption("tooltipt.text", "value") before and its not working – Mani Ratna Apr 29 '20 at 16:52
2

Not working with pf 6.2 pf-ext 6.2.9 GoogleChart work with `var options={tooltip: {text: 'value'}};` pf not with `chartBuilder.addOption("backgroundColor","{fill: red}");`, it produces this `PrimeFaces.cw("ExtGChart","widget_j_idt4_j_idt6",{id:"j_idt4:j_idt6",chart:"{\"type\":\"PieChart\",\"options\":{\"tooltip\":\"{text: value}\"},\"data\":[[\"Topping\",\"Slices\"],[\"Sleep\",7],[\"Work\",6]]}",title:"Quanity Wise",language:"en",width:400,height:400});`, it seems like this for composite options ([related?](https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/475)) – WoAiNii Apr 29 '20 at 20:58
Why the did you not mention you already tried the tooltip.text before? See [ask]... Would have saved me and Melloware 15 minutes each... Thanks! And btw, it IS added to the json, so PF is doing its work. Check if you use it in the correct way and if the gchart PFE is using supports it... (PFE, not PF). And investigate if the way the option is added in the json is in the right format! @Melloware: looks weird, quoting wise like WoAiNii posted – Kukeltje Apr 30 '20 at 07:33

score 3 · Accepted Answer · answered May 01 '20 at 07:23

3

I add only one thing to the previous answer, to manage complex options, you need to pass them as a Map, not as a String, so, in your case, it becomes like this:

HashMap<String, String> opt = new HashMap<String, String>();
opt.put("text", "value");
chartBuilder.addOption("tooltip", opt);

and everything works.

answered May 01 '20 at 07:23

WoAiNii

1,003
1
11
19

Thank you @WoAiNii your answer worked for tooltip but for composite options like legend i got problem. i tried to pass as a map but it didnot work – Mani Ratna May 01 '20 at 08:47
I think that, before, even that option was ignored, and you were seeing the default config; with `opt.put("position", "bottom"); opt.put("alignment", "start"); chartBuilder.addOption("legend", opt);` it's moved to bottom – WoAiNii May 01 '20 at 09:01

How to show absolute value in tooltip in a pe:gChart

2 Answers2