Scatter Plot 11-22-2021 15:40 PM - last edited 11-22-2021 16:30 PM

[Gabrz]

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

[gvgorp]

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.

[Anonymous]

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!

[Anonymous]

@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.

[Anonymous]

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

[Anonymous]

Nevermind!!! I think I got it!

[MichaelYe]

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

[Anonymous]

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