Skip to main content

Notifications

Scatter Plot

 Profile Picture Posted 17 Dec 2021 by Community member

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

ScatterPlot.jpg

Categories:

Comments

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted 13 May 2022 at 18:40:57
    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 10 May 2022 at 14:16:32
    Scatter Plot

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

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted 23 Nov 2021 at 00:30:27
    Scatter Plot

    Nevermind!!! I think I got it!

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted 22 Nov 2021 at 23:40:39
    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? 

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted 05 Mar 2021 at 21:15:30
    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

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted 21 Jan 2021 at 23:59:58
    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 20 Jan 2021 at 23:43:43
    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.