SVG not accepting quotes along with expressions

[SSC]

Hello,

I am trying to create an SVG in which it shows a progress bar ascertaining percentage of order completed. The progress bar is supposed to fill in the blue color depending on my expressions which uses column values. But, i need to pass those values inside "" (Double Quote).

I tried  lot of combinations for doube quotes so far (as mentioned on mutiple community forum pages), but havent been able to generate the progress bar.

This is my SVG

Even though my order is completed 100 percent, still my progress bar is stuck at zero.

Here is the svg code for that

<rect x="40" y="125" width="104" height="30" fill="url(%23progressGradient)" rx="15" ry="15" filter="url(%23progressShadow)"/>

I just need to pass the value in replace of 104 within double quotes. So here is what i did:

 <rect x="40" y="125" width= '&""""&round((([_thisrow].[Quantity Manufactured]/[_thisrow].[Quantity in Cubic Metres])*3.20))&""""&' height="30" fill="url(%23progressGradient)" rx="15" ry="15" filter="url(%23progressShadow)"/>

Any suggestions?

[Suvrutt_Gurjar]

---

@SSC wrote:

 <rect x="40" y="125" width= '&""""&round((([_thisrow].[Quantity Manufactured]/[_thisrow].[Quantity in Cubic Metres])*3.20))&""""&' height="30" fill="url(%23progressGradient)" rx="15" ry="15" filter="url(%23progressShadow)"/>

---

Please try 

 <rect x="40" y="125" width= '&""""&round((([Quantity Manufactured]/[Quantity in Cubic Metres]*1.00)*3.20))&""""&' height="30" fill="url(%23progressGradient)" rx="15" ry="15" filter="url(%23progressShadow)"/>

[SSC]

Thanks @Suvrutt_Gurjar 

I tried removing [_thisrow] and still its showing me same way. i am continuously scratching my brain for it to get it to work, but the progress bar seems to not move 🙂

Any other suggestion that i may try? i even tried using trim, concatenate to place a double quote, still the same result. The script works fine when tested on other svg online tools (like w3schools), but its just not working when i need a value within double quotes

I apprecciate your help.. Thanks.. Please let me know if any other suggestion...

[Suvrutt_Gurjar]

Hope you did not miss the 1.00 in the expression I suggested. I have made it bold below.

<rect x="40" y="125" width= '&""""&round((([Quantity Manufactured]/[Quantity in Cubic Metres]*1.00)*3.20))&""""&' height="30" fill="url(%23progressGradient)" rx="15" ry="15" filter="url(%23progressShadow)"/>

---

[SSC]

@Suvrutt_Gurjar 

no i did not miss 1.00, it didnt work. so to again verify,  i copy pasted your expression over the expression i had in my script. Its the same result

Thanks

[SSC]

@Suvrutt_Gurjar Anything else i can try?i even checked column type, all colum types are decimal.. and if i remove quotes """", it just returns me an error of image. So may be its the quotes that are the problem because expression returns a value. 

[Suvrutt_Gurjar · Accepted solution]

Please try an expression something line below.

My suggestion would be to try it in an separate image type column first , so that you get an idea of how it works. You could then adapt it within your other SVG setup in the other column.

CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 80 50"">
<rect x=""10%"" y=""25%"" width= ""100"" height=""10"" fill=""rgb(229, 228, 226)"" rx=""2"" ry=""2""/>
<rect x=""10%"" y=""25%"" width= """,ROUND(((([Quantity Manufactured]/DECIMAL([Quantity in Cubic Metres]))*3.20))*100),""" height=""10"" fill=""rgb(67, 135, 191)"" rx=""2"" ry=""2""/>
</svg>")

The generated SVG looks like below and the blue bar should increase in proportion of the percentage obtained by [Quantity Manufactured]/DECIMAL([Quantity in Cubic Metres]

At this moment I have no idea why you are multiplying by 3.20 in the expression but I have left it as it is.

[SSC]

@Suvrutt_Gurjar Thanks man!!!!

i was multiplying by 3.2 since my total width is 320 for the progress bar. So 3.2 represents 1 percent of the total bar. 

i got my progress bar working now.. All thanks to you and other members for contributing to the appsheet community.  i read some awesome svg posts by you in UI Tips and tricks. 

Progress bar works exactly the way its supposed to now.. !!!! 😃

[Suvrutt_Gurjar]

You are welcome.

Nice to know your SVG setup works as intended.

Your SVG image is impressive. I am sure you will create great apps and also be a great community member. 

Best luck.