Skip to content

Instantly share code, notes, and snippets.

@stevenbeeckman

stevenbeeckman/gauge_template.xslt

Created April 25, 2018 20:15
Show Gist options
  • Save stevenbeeckman/33fa4cf2ddf23bb5e54b695e6df1d15b to your computer and use it in GitHub Desktop.
Save stevenbeeckman/33fa4cf2ddf23bb5e54b695e6df1d15b to your computer and use it in GitHub Desktop.
Download ZIP
Build a gauge with SVG generated by XSLT
Raw
gauge_template.xslt
<xsl:template match="row">
<xsl:variable name="radius">130</xsl:variable>
<xsl:variable name="width">300</xsl:variable>
<xsl:variable name="value_min"><xsl:value-of select="row/@value_min" /></xsl:variable>
<xsl:variable name="value_max"><xsl:value-of select="row/@value_max" /></xsl:variable>
<xsl:variable name="value_target"><xsl:value-of select="row/@value_target" /></xsl:variable>
<xsl:variable name="red_min"><xsl:value-of select="row/@red_min" /></xsl:variable>
<xsl:variable name="red_max"><xsl:value-of select="row/@red_max" /></xsl:variable>
<xsl:variable name="orange_min"><xsl:value-of select="row/@orange_min" /></xsl:variable>
<xsl:variable name="orange_max"><xsl:value-of select="row/@orange_max" /></xsl:variable>
<xsl:variable name="green_min"><xsl:value-of select="row/@green_min" /></xsl:variable>
<xsl:variable name="green_max"><xsl:value-of select="row/@green_max" /></xsl:variable>
<xsl:variable name="red_color"><xsl:value-of select="row/@red_color" /></xsl:variable>
<xsl:variable name="orange_color"><xsl:value-of select="row/@orange_color" /></xsl:variable>
<xsl:variable name="green_color"><xsl:value-of select="row/@green_color" /></xsl:variable>
<div class="gauge">
<xsl:element name="svg">
<xsl:attribute name="viewbox">0 0 <xsl:value-of select="$width" /><xsl:text> </xsl:text><xsl:value-of select="$width" /></xsl:attribute>
<xsl:element name="line">
<xsl:attribute name="class">target</xsl:attribute>
<xsl:attribute name="x1">50%</xsl:attribute>
<xsl:attribute name="y1">50%</xsl:attribute>
<xsl:attribute name="x2"><xsl:value-of select="($width div 2) + (math:cos(($value_max - $value_target) * math:pi() div ($value_max - $value_min)) * ($radius + 15))"/></xsl:attribute>
<xsl:attribute name="y2"><xsl:value-of select="($width div 2) - (math:sin(($value_max - $value_target) * math:pi() div ($value_max - $value_min)) * ($radius + 15))"/></xsl:attribute>
<xsl:attribute name="stroke">black</xsl:attribute>
<xsl:attribute name="stroke-width">3</xsl:attribute>
</xsl:element>
<xsl:element name="circle">
<xsl:attribute name="class">circle red</xsl:attribute>
<xsl:attribute name="cx">50%</xsl:attribute>
<xsl:attribute name="cy">50%</xsl:attribute>
<xsl:attribute name="r"><xsl:value-of select="$radius" /></xsl:attribute>
<xsl:attribute name="stroke-width">20</xsl:attribute>
<xsl:attribute name="stroke-dasharray"><xsl:value-of select="($red_max - $red_min) * math:pi() * $radius div ($value_max - $value_min)" />,<xsl:value-of select="(2* $value_max - $red_max) * math:pi() * $radius div ($value_max - $value_min)" /></xsl:attribute>
<xsl:attribute name="stroke-dashoffset"><xsl:value-of select="math:pi() * $radius "/></xsl:attribute>
<xsl:attribute name="stroke"><xsl:value-of select="$red_color" /></xsl:attribute>
</xsl:element>
<xsl:element name="circle">
<xsl:attribute name="class">circle orange</xsl:attribute>
<xsl:attribute name="cx">50%</xsl:attribute>
<xsl:attribute name="cy">50%</xsl:attribute>
<xsl:attribute name="r"><xsl:value-of select="$radius" /></xsl:attribute>
<xsl:attribute name="stroke-width">20</xsl:attribute>
<xsl:attribute name="stroke-dasharray"><xsl:value-of select="($orange_max - $orange_min) * math:pi() * $radius div ($value_max - $value_min)" />,<xsl:value-of select="(2* $value_max - ($orange_max - $orange_min)) * math:pi() * $radius div ($value_max - $value_min)" /></xsl:attribute>
<xsl:attribute name="stroke-dashoffset"><xsl:value-of select="(($value_max - $orange_min) * math:pi() * $radius div ($value_max - $value_min))"/></xsl:attribute>
<xsl:attribute name="stroke"><xsl:value-of select="$orange_color" /></xsl:attribute>
</xsl:element>
<xsl:element name="circle">
<xsl:attribute name="class">circle green</xsl:attribute>
<xsl:attribute name="cx">50%</xsl:attribute>
<xsl:attribute name="cy">50%</xsl:attribute>
<xsl:attribute name="r"><xsl:value-of select="$radius" /></xsl:attribute>
<xsl:attribute name="stroke-width">20</xsl:attribute>
<xsl:attribute name="stroke-dasharray"><xsl:value-of select="($green_max - $green_min) * math:pi() * $radius div ($value_max - $value_min)" />,<xsl:value-of select="(2* $value_max - ($green_max - $green_min)) * math:pi() * $radius div ($value_max - $value_min)" /></xsl:attribute>
<xsl:attribute name="stroke-dashoffset"><xsl:value-of select="(($value_max - $green_min) * math:pi() * $radius div ($value_max - $value_min))"/></xsl:attribute>
<xsl:attribute name="stroke"><xsl:value-of select="$green_color" /></xsl:attribute>
</xsl:element>
<xsl:element name="line">
<xsl:attribute name="class">actual</xsl:attribute>
<xsl:attribute name="x1">50%</xsl:attribute>
<xsl:attribute name="y1">50%</xsl:attribute>
<xsl:attribute name="x2"><xsl:value-of select="($width div 2) + (math:cos(($value_max - @value) * math:pi() div ($value_max - $value_min)) * ($radius + 15))"/></xsl:attribute>
<xsl:attribute name="y2"><xsl:value-of select="($width div 2) - (math:sin(($value_max - @value) * math:pi() div ($value_max - $value_min)) * ($radius + 15))"/></xsl:attribute>
<xsl:attribute name="stroke">grey</xsl:attribute>
<xsl:attribute name="stroke-width">1</xsl:attribute>
</xsl:element>
</xsl:element>
</div>
</xsl:template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment