Display X,Y coordinations on SVG map

[Zetko]

Hi all, I am strugling a bit with one case.

I have a floor plan in SVG. There are some walls, like a labyrinth and some shortcuts through some rooms. I walked through this labyrinth, recorded X, Y coordinations (with some other meta data) and my task now is to show this coordinations up, how the 'figure' walked through the labyrinth.

I tryed to use Synoptic Panel to load the SVG picture, but I cant show up the coordinations / directions from my data set.

Do you have any idea, or is it even possible?

Thanks for any help!

BR, Zetko

[lbendlin]

Please refer to the documentation.  Scatter plot might be an option, but there might be other hybrids that allow you to draw incomplete paths or polylines.

https://www.rgraph.net/svg/scatter.html

Does it have to be the Synoptic panel?  As you know SVG is also supported by image URLs

[Zetko]

Hi, there are no like a 'conditions', what method or option should be used (so Synoptic panel is not needed). Anyway, I was thinking about Azure Map or MapBox,  

but they are usually used for larger objects and it has problems with in-door spaces. 

As you can se on example below, I got a SVG plan of some place. Plan is clear, there are all the information about - where is enterance, exit, where are walls and shortcuts. Then I got a 4 figures, where each one went through different way and i got their X,Y coordinations. My goal is to to draw the lines into the plan, based on their coordinations.

Cave

Do you think there is a method working like this?

[lbendlin]

I think that should be possible. Your floor plan SVG code would need to be combined with the codes for each of the walkthrough polylines. Can you share sample data?

[Zetko]

I tryed to made a realy simple example of my plan, because mine one is not completed and a bit complicated and as first I need to realize, if it is even possible, what I want to do in future.

So, lets try this one. https://svgur.com/s/NxG 

I really appreciate your attitude lbendlin, thanks a lot!

[lbendlin]

Ok let's do it step by step. The SVG you provided is

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Example</title>
  <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <line stroke="#000" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="438.45313" x2="131.47619" y1="142.45313" x1="131" stroke-width="3" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="144.36251" x2="438" y1="141.96251" x1="131" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="442.45775" x2="439.42857" y1="440.05775" x1="131" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/>
  <line stroke="#000" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_5" y2="332.26266" x2="437.66668" y1="145.31027" x1="438" stroke-width="3" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_6" y2="384.28571" x2="332.14286" y1="384" x1="436.42857" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_8" y2="220.47619" x2="333.09524" y1="383.80952" x1="333.09524" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_9" y2="218.57143" x2="334.04762" y1="218.57143" x1="191.19048" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_11" y2="277.61905" x2="283.09524" y1="278" x1="130.71429" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_12" y2="360.95238" x2="195.95238" y1="361.42857" x1="333.09524" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/>
  <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_13" y="422.38095" x="408.33333" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">Start</text>
  <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_14" y="368.57143" x="409.28571" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">End</text>
 </g>
</svg>

That doesn't work because of the double quotes. Let's replace them with single quotes.

<svg width='800' height='600' xmlns='http://www.w3.org/2000/svg'>
 <g>
  <title>Example</title>
  <rect fill='#fff' id='canvas_background' height='602' width='802' y='-1' x='-1'/>
  <g display='none' overflow='visible' y='0' x='0' height='100%' width='100%' id='canvasGrid'>
   <rect fill='url(#gridpattern)' stroke-width='0' y='0' x='0' height='100%' width='100%'/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='438.45313' x2='131.47619' y1='142.45313' x1='131' stroke-width='3' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_2' y2='144.36251' x2='438' y1='141.96251' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_4' y2='442.45775' x2='439.42857' y1='440.05775' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_5' y2='332.26266' x2='437.66668' y1='145.31027' x1='438' stroke-width='3' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_6' y2='384.28571' x2='332.14286' y1='384' x1='436.42857' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_8' y2='220.47619' x2='333.09524' y1='383.80952' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_9' y2='218.57143' x2='334.04762' y1='218.57143' x1='191.19048' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_11' y2='277.61905' x2='283.09524' y1='278' x1='130.71429' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_12' y2='360.95238' x2='195.95238' y1='361.42857' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_13' y='422.38095' x='408.33333' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>Start</text>
  <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_14' y='368.57143' x='409.28571' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>End</text>
 </g>
</svg>

Now, this can be assigned to a measure or calculated column, marked as Image URL, and placed into a table or matrix.

However it results in a broken image.

That likely means that some of the more elaborate SVG code is not supported in the Power BI implementation?  Let's see if we can modify/simplify the code. 

Here's an example of a successful renderer of a sparkline.

Turns out all it needed was the data prefix .

As you can see the viewbox isn't right yet.  I am still learning SVG, let's see which other changes are needed.

[lbendlin]

Oh boy.  Looks like there is a hard limit on the image size in table and matrix visuals - 150px height.

You would need to redo your SVG to take that into account and reduce the whitespace around the drawing.  Or someone can com up with a way to break out of the 150 px limit.

here's my current svg version. Note: replace ":"  with ":"

SVG = "data&colon;image/svg+xml;utf8,<svg height='600' width='800' xmlns='http://www.w3.org/2000/svg'>
   <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='438.45313' x2='131.47619' y1='142.45313' x1='131' stroke-width='3' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_2' y2='144.36251' x2='438' y1='141.96251' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_4' y2='442.45775' x2='439.42857' y1='440.05775' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_5' y2='332.26266' x2='437.66668' y1='145.31027' x1='438' stroke-width='3' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_6' y2='384.28571' x2='332.14286' y1='384' x1='436.42857' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_8' y2='220.47619' x2='333.09524' y1='383.80952' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_9' y2='218.57143' x2='334.04762' y1='218.57143' x1='191.19048' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_11' y2='277.61905' x2='283.09524' y1='278' x1='130.71429' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_12' y2='360.95238' x2='195.95238' y1='361.42857' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/>
  <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_13' y='422.38095' x='408.33333' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>Start</text>
  <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_14' y='368.57143' x='409.28571' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>End</text>
 </svg>"

which still results in lots of wasted space

You want your SVG to be square (for example 600x600) and with little space around the drawing.

[lbendlin · Accepted solution]

The visuals library has an (unrated - so proceed at your own risk) HTML5 visual that can also handle SVG.  That looks much nicer.

Now all that's left to do is to overlay your walkpaths as needed.

[Zetko]

Best so far is working that visual lib HTML5, it looks really good and keep all the sizes of plan. So I generated the data as walk through with polylines, also in SVG and i tryed to combine it in Power BI. It looks quite good, but there is still a lot of work to make a good concept. 

Thanks a lot for your help! 

[lbendlin]

Thank you for teaching me about SVG.