Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OOTB crosshair does not show tooltips in all linked charts #100

Open
divq opened this issue May 14, 2024 · 4 comments
Open

OOTB crosshair does not show tooltips in all linked charts #100

divq opened this issue May 14, 2024 · 4 comments

Comments

@divq
Copy link

divq commented May 14, 2024

(related to #88)

The javascript one shows tooltips in all linked charts
截屏2024-05-14 16 07 22

But the OOTB one (created following the guide)only shows the tooltip in the chart under the mouse.
截屏2024-05-14 16 21 05

This is the code for creating the OOTB one (it is an empty GWT 2.11 project using charba-gwt 6.5)

public void onModuleLoad() {
	RootPanel.get().add(createLineChartWidget());
	RootPanel.get().add(createLineChartWidget());
}

private LineChartWidget createLineChartWidget() {
	LineChartWidget chart = new LineChartWidget();
	chart.getData().setLabels("1","2","3");
	LineDataset set1 = chart.newDataset();
	set1.setData(1.1,1.2,2.1);
	chart.getData().setDatasets(set1);
	chart.setHeight("200px");
	chart.getPlugins().add(Crosshair.get());
	CrosshairOptions options = chart.getOptions().getPlugins().getOptions(Crosshair.ID, Crosshair.FACTORY);
	options.setGroup("LinkedGroup");
	options.store();
	Tooltips tooltips = chart.getOptions().getTooltips();
	tooltips.setIntersect(false);
	tooltips.setMode(DefaultInteractionMode.X);
	return chart;
}
@stockiNail
Copy link
Contributor

@divq thank you very much for feedback. The current implementation was the desired one. I think this could be an enhancement for next releases.

@stockiNail
Copy link
Contributor

@divq I'm still thinking about this ehnancement. As you had seen in #88 issue, you can group different chart. As workaround you could use the "activate" elements to show the tooltip: https://pepstock-org.github.io/Charba-Wiki/docs/charts/Api#active-elements

If you need to customize better the "interaction" with tooltip, you could use interaction package to create your own interaction: the https://github.com/pepstock-org/Charba/tree/master/src/org/pepstock/charba/client/interaction

@divq
Copy link
Author

divq commented Jun 7, 2024

@divq I'm still thinking about this ehnancement. As you had seen in #88 issue, you can group different chart. As workaround you could use the "activate" elements to show the tooltip: https://pepstock-org.github.io/Charba-Wiki/docs/charts/Api#active-elements

If you need to customize better the "interaction" with tooltip, you could use interaction package to create your own interaction: the https://github.com/pepstock-org/Charba/tree/master/src/org/pepstock/charba/client/interaction

My understanding of your suggestion is that I should register an event handler that listens to one chart's tooltip popping up and accordingly activate other charts' tooltips.

Let's say there is chart A and B. They are in a List<Chart> chartList

If I register a ExternalCallback by chart.getTooltips().setExternalCallback for each chart, and that callback is:

List<ActiveDatasetElement> activeElements =  chart.getActiveElements();
for(ch in chartList)
{
   if(ch==chart) continue;
   ch.setTooltipActiveElements(activeElements);
}

The problem is that this would lead to an infinite recurrence problem, because when the tooltip wants to pop up on B, it triggers B's ExternalCallback, which sets A's active elements, which again triggers B's ExternalCallback event.

And since this is in front end (compiled into JS code), I don't think there is a proper synchronization mechanism to solve this.

The result of my experiment:

  1. When I use crosshair plugin, and set tooltip setIntersect(false), setMode(DefaultInteractionMode.INDEX), when my mouse is not hovering exactly above a dot in a line chart, the tooltip shows up, but not triggering the ExternalCallback or SortCallback events. Only when the dot is hovering in precise dot site can the tooltip event be triggered.

  2. When my mouse hovers above the exact point, the console says maximum call stack size exceeded, which is the result of the infinite recurrence problem I've mentioned.

@stockiNail
Copy link
Contributor

@divq that's not exactly what I meant but really thank you for your experiments. Let me take time to implement it in a use case of the showcase and I'll come back to you with code (if what I think is possible... otherwise I'll try to enhance the plugin in a next version).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants