Hello
Is it possible to dynamically generate an SVG graphic and display it (the parameter) in a Visio diagram or in a low-code app? For example, like in the following example:
// 1. Define the SVG Namespace
XNamespace ns = "http://www.w3.org/2000/svg";
// 2. Logic for dynamic values
//double cpuUsage = Convert.ToDouble(protocol.GetParameter(10));
double cpuUsage = 95.0;
string statusColor = cpuUsage > 90 ? "#FF0000" : "#00FF00";
double rectWidth = (cpuUsage / 100) * 180; // Scale to a 200px container
// 3. Construct the SVG structure
XElement svgRoot = new XElement(ns + "svg",
new XAttribute("viewBox", "0 0 200 50"),
new XAttribute("width", "100%"),
new XElement(ns + "rect", // Background bar
new XAttribute("width", "200"),
new XAttribute("height", "30"),
new XAttribute("fill", "#333333"),
new XAttribute("rx", "5")),
new XElement(ns + "rect", // Dynamic progress bar
new XAttribute("width", rectWidth),
new XAttribute("height", "30"),
new XAttribute("fill", statusColor),
new XAttribute("rx", "5")),
new XElement(ns + "text", // Label
new XAttribute("x", "100"),
new XAttribute("y", "20"),
new XAttribute("fill", "white"),
new XAttribute("text-anchor", "middle"),
new XAttribute("font-family", "Arial"),
new XAttribute("font-size", "12"),
$"Usage: {cpuUsage}%")
);
//// 2. Wrap it in HTML
//StringBuilder html = new StringBuilder();
//html.Append("<html><head><style>");
//html.Append("body { background-color: #111; color: white; font-family: sans-serif; margin: 10px; text-align: center; }");
//html.Append(".card { border: 1px solid #444; padding: 15px; border-radius: 8px; background: #1e1e1e; }");
//html.Append("</style></head><body>");
//html.Append("<div class='card'>");
//html.Append("<h3>System Health</h3>");
//// Inject the SVG string here
//html.Append(svgRoot.ToString(SaveOptions.DisableFormatting));
//html.Append("<p>Last updated: " + DateTime.Now.ToString("HH:mm:ss") + "</p>");
//html.Append("</div>");
//html.Append("</body></html>");
//// 4. Send to the string parameter (ID 100)
//// Disable formatting (SaveOptions.DisableFormatting) for a compact string
////protocol.SetParameter(100, svgRoot.ToString(SaveOptions.DisableFormatting));
/// protocol.SetParameter(100,html.ToString());
string svgBase64 = Convert.ToBase64String( Encoding.UTF8.GetBytes(svgRoot.ToString()));
string dataUrl = "data:image/svg+xml;base64," + svgBase64;
protocol.SetParameter(100, dataUrl);
// svgRoot.ToString(SaveOptions.DisableFormatting));
Thank you in advance
Michael
Hi Michael,
It is possible to render SVGs using Dashboards or LCAs. This can be done using HTML shapes in templates for a grid, timeline, ... or using the web component. All you have to do is get the parameter value on the dashboard/page, which can be done using GQI.