Gajiu Gajiu - 17 days ago 5
HTML Question

How can I do a line charts with SVG

I want to do a line charts with SVG. I have a bug.xml and I want to diplay it with a bug.xsl and use SVG to do a line charts. I already manage to do it, but I can't use a variable to enter coordinate. I search for it on Google but I don't find how to do it.
Here is my .xml :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet href="bug.xsl" type="text/xsl"?>

<root text="Récapitulatif des bugs MD 360">
<graph>
<item text="3988 (K2) : [MozillaMD] Plantage vidéo de localisation prise OB" severite="K2" importance="" status="" date="15/11/2016"/>
<item text="3987 (K2) : [MozillaMD] Plantage vidéo de localisation pris" severite="K3" importance="" status="" date="15/11/2016"/>
<item text="3989 (K2) : [MozillaMD] Plantage vidéo de localisationD" severite="K2" importance="" status="" date="15/11/2016"/>
<item text="3985 (K2) : [MozillaMD] Plantage vidéo de localisati" severite="K1" importance="" status="" date="15/11/2016"/>
<item text="3978 (K2) : [MozillaMD] Plantage vidéo de D" severite="K1" importance="" status="" date="15/11/2016"/>
<item text="3982 (K2) : [MozillaMD] Plantage vidéD" severite="K4" importance="" status="" date="15/11/2016"/>
<item text="3955 (K2) : [MozillaMD] Plantage vidéo deD" severite="K4" importance="" status="" date="15/11/2016"/>
<item text="3976 (K2) : [MozillaMD] PlantagD" severite="K1" importance="" status="" date="15/11/2016"/>
<item text="3963 (K2) : [MozillaMD] Plantage vidéo de " severite="K3" importance="" status="" date="15/11/2016"/>
<item text="3896 (K2) : [MozillaMD] Plantage vi" severite="K2" importance="" status="" date="15/11/2016"/>
<item text="3923 (K2) : [MozillaMD] Plantage " severite="K2" importance="" status="" date="15/11/2016"/>
</graph>
</root>


And here is my actual .xsl, when I replace $var3 by 0 it works but not with $var3, what am I doing wrong?

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/2000/svg">
<xsl:output
method="xml"
indent="yes"
standalone="no"
doctype-public="-//W3C//DTD SVG 1.1//EN"
doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
media-type="image/svg" />

<xsl:template match="graph">
<svg viewBox="0 0 500 100" class="chart">
<xsl:variable name= "var3"><xsl:value-of select="count(graph/item[severite='K2'])"/></xsl:variable>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="3"
points="
$var3,120
20,60
40,80
60,20"/>
</svg>
</xsl:template>
</xsl:stylesheet>

Answer

Use an attribute value template in the form of

<polyline
 fill="none"
 stroke="#0074d9"
 stroke-width="3"
 points="
   {$var3},120
   20,60
   40,80
   60,20"/>
Comments