Forums Home / Wijmo / General Discussion
Posted by: willemfrits.dragstra on 7 August 2018, 9:04 pm EST
willemfrits.dragstra
Posted 7 August 2018, 9:04 pm EST
Dear Forum
Is there a way to get the percentage of a selected (hovered) chart pie ( ) section?
I´d like to show this percentage of each section (there are 10) under a tooltip together with the value of that pie-piece.
thanks in advance
manish.gupta
Posted 8 August 2018, 8:49 pm EST
Hi,
If you would like to modify the contents of FlexPie then you may set its tooltip.content property to a function which accepts a hitTestInfo parameter and returns a string to use as the tooltip content.
hitTestInfo object has a value property for the value of the current item, you can calculate percentage using general percentage formula for the value.
Please refer to the following code snippet:-
pie.tooltip.content = (htInfo) => {
let value= htInfo.value;
return `Custom tooltip for ${value}`;
}
However, if would like to get the value of the current item on one of the mouse events such as ‘mouseover’ then you may use hitTest() method to get hitTestInfo.
Please refer to the following code snippet:-
pie.hostElement.addEventListener('mouseover', (e) => {
let htInfo = pie.hitTest(e);
//do something with hitTest info
});
You may also refer to the following sample which implements both of the above-mentioned scenarios:-
https://stackblitz.com/edit/angular-qxpzwm?file=src%2Fapp%2Fapp.component.ts
~Manish
willemfrits.dragstra
Posted 8 August 2018, 11:18 pm EST
Thanks for your quick answer.
I was allready exploring your last given option.
this.flexChart.hostElement.addEventListener('mousemove', (mouseEvent) => {
const hitTestInfo: HitTestInfo = this.flexChart.hitTest(mouseEvent);
const ligneBalance: LigneBalance = hitTestInfo.item as LigneBalance;
if (ligneBalance !== undefined) {
console.log(ligneBalance.libelle, ligneBalance.solde);
}
});
The idea is that a user hovers over a staff-graph or pie-graph and, when doing so, the tooltip should provide some info. The problem is that the tooltip fires for all of the column (painted or not) of a staff-graph!
Is there a way to tell this tooltip to appear only when going over a painted staff?
manish.gupta
Posted 9 August 2018, 11:15 pm EST
Hi,
We are quite not sure which chart type you mean by staff-chart, can you please tell us about the chart type you are referring to?
As for the pie-chart you may check if the target event path has ‘wj-slice’ class to test if the mouse is over a slice.
Please refer to the following sample:-
https://stackblitz.com/edit/angular-yoy8xb?file=src/app/app.component.ts
If you had a different requirement then please feel free to explain more about it.
~Manish
willemfrits.dragstra
Posted 12 August 2018, 6:35 pm EST
Thanks, your pie example is excellent and I am learning more wijmo stuff studying it (like using (initialized)=“initPie(pie)” to pass the ref of the pie and add the mouselistener to it: great!).
The <wj-flex-chart-series is a staff-graph which I am using in the project:
Here I noticed that the mouse fires when going over all of the staff-column, painted or not!
using my method:
ngAfterViewInit(): void {
this.flexChart.hostElement.addEventListener('mousemove', (mouseEvent) => {
const hitTestInfo: HitTestInfo = this.flexChart.hitTest(mouseEvent);
const ligneBalance: LigneBalance = hitTestInfo.item as LigneBalance;
if (ligneBalance !== undefined) {
const numb = (ligneBalance.solde / this.soldeAcumuleCircle) * 100;
console.log(ligneBalance.libelle, " Solde: " + Number(ligneBalance.solde.toFixed(2)) + " Pourcentage: " + Number(numb.toFixed(2)));
}
});
}
But anyway we are not using % on the staff-graph, we use it on the pie-chart instead, so I am good with your example!
Just posting the rest out of curiosity!
manish.gupta
Posted 12 August 2018, 9:15 pm EST
Hi,
Thanks for letting us know that your requirement is fulfilled and you are able to learn Wijmo.
Please let us know if you have any queries regarding FlexChart or FlexPie.
~Manish
