Scatter plots in PowerApps using a Gallery control
This article will show you how you can build custom data visualizations in PowerApps using only two controls: a Gallery, and a Circle.
While PowerApps already supports Column charts, Line charts and Pie charts out of the box, there is currently no built-in way to render scatter plots. Note that the idea presented here is only useful if you have small amounts of data. This is not a replacement for more advanced data visualization tools such as the ones that exist with Power BI.
How it works
The trick is to use a vertical Gallery with a very small TemplateSize. The gallery template will have a single Circle control, whose X, Y, Width, Height, and Fill will be bound to fields of a data source. The Gallery works by replicating its template for as many items as exists in the data source it is bound to, so if we have some data with a few entries, we will get one circle for each entry. In addition, PowerApps ensures gallery items that extend beyond the template size are not clipped and will render correctly even if TempalteSize is much smaller than the circles. So, are we all set?
Well, almost. If we could set the TemplateSize to 0, we would be done. However, the minimum value allowed in PowerApps is TemplateSize=1. This means that each replicated circle will be one pixel below the one before it, and the circles would not render at exactly the right place. We can easily fix that by having each item in the gallery have a field with the item index in the gallery, and offset the circle's Y position accordingly to compensate for the gallery TemplateSize.
Formula time
Here's how we add items to the data source (it is just a collection in this case). Note that we are using context variables minRadius and maxRadius just to make it easier to change those values in the sample. You could hard code them or get them from somewhere else instead just as easily.
UpdateContext({minRadius:10, maxRadius:30});
Collect(Bubbles,
{
index: CountRows(Bubbles),
x: Rand() * (Gallery1.Width - maxRadius*2) + maxRadius,
y: Rand() * (Gallery1.Height - maxRadius*2) + maxRadius,
radius: Rand() * (maxRadius-minRadius) + minRadius,
color: RGBA(Rand() * 255, Rand() * 255, 0, 1)
})
And here's how the circle in the gallery template is configured.
Circle1.X = ThisItem.x-ThisItem.radius
Circle1.Y = ThisItem.y-ThisItem.radius-ThisItem.index*Gallery1.TemplateHeight
Circle1.Width = ThisItem.radius*2
Circle1.Height = ThisItem.radius*2
Circle1.Fill = ThisItem.color
Wrapping up
And that's it for now. Now you know how to leverage a Gallery control to do more than just show rows of data. The possibilities are endless, but remember that this is not exactly the scenario that Galleries were designed and optimized for, so always try to use the built-in data visualization controls when possible and send us feedback of what you're trying to build and what would make things easier for you.
See you next time!
PS: This article was inspired by a question in the PowerApps forums. Thanks JohnP for the questions and keep them coming!
Comments
- Anonymous
May 26, 2017
Hello - very interesting use of the gallery - however, when I download the sample app it's just a bunch of json files. I'm unable to load that into PowerApps directly?- Anonymous
May 26, 2017
The download should have a .msapp file extension, which can be loaded directly into PowerApps. If your browser is saving the file with a different extension, please change it to "msapp" and try again. Let me know if you still have issues.- Anonymous
May 26, 2017
Hello again .... Ok, changed it from .zip to .msapp, but now PowerApps (both the windows client and the web version) says: "The document you tried to open was made with a newer version of PowerApps (1.221)."My version is 2.0.632- Anonymous
May 26, 2017
Oops, my mistake. I have re-uploaded the file with the right version, can you try again now?
- Anonymous
- Anonymous
- Anonymous