Hi all Appbuilders,
I am trying to create a scatterplot using Highchart in App, where I plot two continuous values as X and Y and the dots in the scatter plot are color coded by the category that they are assigned to, using a column of a data table.
I am reading in the main data table using “source” option into the Highchart element.
As I see, every lable (element of the legend) is a new entry in the series .
Now I am wondering Where I can give the sql Query, where limits the rows of the continuous columns to each category and how to set the two continuous columns as X & Y?
The outcome should be something like this:
Thanks a lot in advance
Shahrzad
Hi @shahrzad.masouleh,
unfortunately, this is not possible with the default scatter plot implementation in Apps (at least the last time I tried to do that about 1-2 years ago). The reason for this is that only two columns are handed over, so there is no possibility to transfer the category information. However, there is a custom component (split-packed-bubble-chart), where more columns are handed over and which, despite its name, can be configured such that it behaves like a scatterplot.
Hi @matthias.lechner , thanks a lot for your response. Based on the online examples of the split-packed-bubble-chart, I am not sure how exactly I can reconfigure the split-packed-bubble-chart to generate the labeled scatter plot of many points. Can one give an SQL query within each series element ?Do you know if an example App exists on this?
Bests
Shahrzad
Hi @shahrzad.masouleh ,
I used the following configuration for the custom component:
{
"id": "CHART_cluster_vendors",
"type": "custom",
"renderer": "SplitPackedBubbleChart",
"source": "A000_cluster_vendors",
"sourceOptions": {
"sql": "SELECT dmbtr_avg as x, dmbtr_count as y, fillcolor as color FROM inputTable i"
},
"config": {
"chart": {
"type": "scatter",
"plotBorderWidth": 1,
"zoomType": "xy",
"backgroundColor": "transparent"
}
}
}
(For clarity, I cut out unnecessary extra configurations like labels, titles, etc.)
In the the “A000_cluster_vendors” table were columns named “dmbtr_avg” and “dmbtr_count”, which are selected as x and y coordinate; the color was defined in the column “fillcolor”. If you ude this code with your table, you just have to replace these three column names with the corresponding columns names of your table. I hope this helps!
Hi @matthias.lechner, thanks a lot. It definitely makes a lot sense now. However I am still unable to see the plot. I added the following ““customElementPacks”: [”/static/split-packed-bubble-chart/v0.1.1/split-packed-bubble-chart.umd.min.js"]. and as the documentation of the custom component says, did not set the series. Yet nothing gets plotted. Is this custom component available on Internal instance? Sorry for these beginner questions…
Hi @shahrzad.masouleh,
I would guess it is not installed on our internal instance, so you might want to ask the devops if they think it makes sense to have it installed there.
Thanks a lot for your response.
Shahrzad
@matthias.lechner Thanks a lot again for your response. I have now managed to create the color-coded scatter plot, however the labels (e.g. Female, male in the above example) are not generated as expected. Instead all the dots are labeled as “series 1” at the lower part of the plot. Do you have any suggestions on how to pass the labels to be set as legend?
Bests
Shahrzad
@shahrzad.masouleh
Unfortunately not 
My solution was to remove the legend and have a tool-tip, which appears when you hover the mouse over the dots. Not the best solution, but these tool-tips can also show informations from any other columns from the datatable.
