SyncSet on scatter highcharts element

Hello Appsperts,
I have a highcharts element of type scatter in my app and want to filter a table element by clicking a point in the scatter plot.
It works, if I assign a categorical STRING column (in my case material name) to the x axis of the scatter plot. It does not work anymore if I sync on a numeric DOUBLE/INTEGER column (price), plotted on the x axis of the chart.

In my use case I want to plot material prices of the current period (x) and the previous period (y) for around 3000 different materials. The user then zooms into the dot cloud and clicks on one of the dots (= materials) and the table element shows details on the selected material.

An alternative would be displaying the material name and number in the dot tooltip. However, I did not manage to incorporate the pont.name variable into the tooltip, because the series only comprises two dimensions x and y.

I also created a test app on our ONE LOGIC internal instance:
https://internal.onedata.de/apps/builder/apps/66a22729-b875-4d72-bd44-32a0f2abc355

No clue on the categorical vs. numerical issue, but concerning your alternative: The reason for the behaviour you describe is that in the Apps scatterplot highcharts implementation, only two values are handed over. However, there is a custom component (split-packed-bubble-chart), where more columns are handed over and which can be configured such that it behaves like a scatterplot. I used this in a past project exactly for the purpose to have more detailed tooltips in a scatterplot. In case you are interested, I can try to dig up my old code.

Hi @matthias.lechner and thank you for the hint!

I found some code with a SplitPackedBubbleChart. The documentation says, that the series{} property must not be defined. However, I need to draw a trendline in the chart. Do you know if that is still possible somehow?
In the example I was able to add series of different visualization types via the series{} property.

Kind regards
Magy

Hm, I did not know about this limitation, sorry. I think I only plotted the scatterplot when I used it :frowning:

Cheers
Matthias

Using "type": "category" on the xAxis should work in making the points properly selectable even without stringifying the values. See this example app. I’m not sure if that matches your use case as it will filter by the x-value, not the material.

Thank you Max for the hint!
For the sample data it looks very promising, already, and I started transferring the solution to our real data.
I now have to create my data in a sequential manner, so the trend line is still displayed properly (right now it suffers from ‘gaps’ in the data points and is not displayed linear anymore).
I will post a resume when I am done with the transformations!

1 Like

Resume

  • @max.toball 's solution to set the xAxis to “type”: “category” enabled the sync set drilldown
  • Unfortunately the data in my use case has ‘gaps’ (e.g. xAxis series of 0, 1, 2, 5, 6, 7)
  • This leads to a deteriorated trend line, because the distance between 1 and 2 will be the same as between 2 and 5 on the axis
  • filling the gaps would lead to a lot of data overhead and was not an option
  • The customer decided, it is OK to drill down manually in the table header filters, once an interesting data point was detected in the chart

Thank you for your input!! :slight_smile:

1 Like