ch13-strokes-files/dataline-gradient.svg

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
     width="4.3in" height="3in">
    <title>Stroked Gradient as Status Indicator</title>
    <svg x="0.6in" y="0.5in" width="3.6in" height="2in"
         viewBox="0 0 180 100"
         style="overflow: visible; font: 10px sans-serif;">    <!--1-->
        <linearGradient id="status" y1="100%" y2="0%" x2="0%"
                        gradientUnits="userSpaceOnUse">        <!--2-->
            <stop stop-color="limegreen" offset="0.4"/>
            <stop stop-color="yellow"    offset="0.8"/>        <!--3-->
            <stop stop-color="red"       offset="0.95"/>
        </linearGradient>
        
        <rect stroke="black" fill="dimGray"
              width="100%" height="100%" />
        <g text-anchor="end" dominant-baseline="middle"
           transform="translate(-2,0)">                        <!--4-->
            <desc>Y-axis tick labels</desc>
            <text y="100">0%</text>
            <text y="80">20%</text>
            <text y="60">40%</text>
            <text y="40">60%</text>
            <text y="20">80%</text>
            <text y="0">100%</text>
        </g>
        <g text-anchor="middle">
            <text x="50%" dy="-1em" font-size="12px"
                  text-decoration="underline"
                  >Status monitor</text>
            <text x="50%" y="100%" dy="1em">Time</text>
        </g>
    
        <polyline id="dataline" stroke="url(#status)" 
                  stroke-linejoin="bevel"
                  stroke-width="2.5" fill="none" />            <!--5-->
    </svg>
    <script><![CDATA[
(function(){
    var n = 19,
        dx = 10,
        maxY = 100;                                        //<6>
        
    var data = new Array(n),
        points = new Array(n);
    for (var i=0; i<n; i++) {
        data[i] = [i, Math.random()];
        points[i] = [i*dx, maxY * (1 - data[i][1])];       //<7>
    }

    var dataline = document.getElementById("dataline");
    dataline.setAttribute("points", points.toString() );   //<8>
})()    
]]> </script>
</svg>