Skip to main content

Notifications

Scatter Plot

Gabrz Profile Picture Posted by Gabrz 12

I've been playing around with SVG in PowerApps and ended up with this Scatter Plot Component.

ScatterPlot.jpg

Categories:

Comments

*This post is locked for comments

  • Scatter Plot

    Aren't you the guy who made the component? To add additional data, I edited the svg code as below

    "data:image/svg+xml," & 
    EncodeUrl(
     "<svg xmlns='http://www.w3.org/2000/svg'>" &
     // Main Group
     "<g transform='translate(1,1)'>" &
     // Grid Group
     "<g " &
     "stroke='" & ScatterPlot.DataGridColor & "' " &
     ">" &
     // Grid Background
     "<rect " &
     "stroke='none' "&
     "fill='" & ScatterPlot.DataGridFill & "' " &
     "width='" & varSVGWidth & "' " &
     "height='" & varSVGHeight & "' " &
     "></rect>" &
     // Grid X and Y Lines
     varSVGGridX & varSVGGridY &
     "</g>" &
     // Data Items Group
     "<g " &
     "fill='" & ScatterPlot.DataItemColor & "' " &
     ">" &
     varSVGData &
     "</g>" &
    			"<g " &
     "fill='" & ScatterPlot.DataItemsColor2 & "' " &
     ">" &
     varSVGData2 &
     "</g>" &
     "</g>" &
     "</svg>"
    )

    from there, just set your data tables as needed, and set each datatable to draw using a different color, see images below

    total scatter plot image.png

    total scatter settings image 1.pngtotal scatter settings image 2.png

  • MichaelYe Profile Picture MichaelYe 14
    Posted at
    Scatter Plot

    How do you load data in? can you post a quick guide? 

  • Scatter Plot

    Nevermind!!! I think I got it!

  • Scatter Plot

    @Gabrz , This is exactly what I needed! Nice work and thank you! Basic question: Where do I input my data items to be plotted? 

  • Scatter Plot

    @gvgorpI made the scatter plot show different colors based on filters by adding custom Properties to the ScatterPlot Component in power apps, one for each different series you want to display and one for each color you want to use. Then in scpTmr_AnimSVG Data section, add a copy of the set varSVGData variable and rename it, i used varSVGData2. With the component changes made, you should just fill out your filtered data sets and colors into the screen component and it should load two different sets with different colors.

    ScatterPlotMulticolor.png

  • Scatter Plot

    I've been trying to get it to support multiple colors based on a collection column value, no luck so far. Best of luck to you!

  • gvgorp Profile Picture gvgorp
    Posted at
    Scatter Plot

    Wow! This is so awesome.

    I just have some feedback. The min/max values on the X axis is not evenly distributed when using this table.

    Table(
     {XAxis: 2.35, YAxis: 975},
     {XAxis: 2.36, YAxis: 980},
    	{XAxis: 2.4, YAxis: 1000}
    )

    I quicly fixed this by changing the ROUNDUP number of decimals on the varXAxisInterval and varYAxisInterval, though it does not work with the NiceAxisDistribution (experimental).

     

    Additional request: I would like to support multiple series each with a different colour. I also would like to add plotting lines between the points. Maybe I'll try to add it when I have some time available.