Forum Discussion
Display X,Y coordinations on SVG map
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.
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
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?
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?
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!
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.