SVG charts

Demo 1 : Basic progress chart.

fill % (0-100)

100806040200

Dynamic Vertical progress SVG chart

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
  <p for="fillData">fill % (0-100)</p>
  <input type="number" value="20" id="fillData" name="fillData"/> 
  <p id="message"></p>
  <svg height="230" width="300">
    <defs>
    <linearGradient id="gradFill" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(25, 99, 255);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(138, 156, 236);stop-opacity:1" ></stop>
    </linearGradient>
  </defs>
    <g id="chartContainer"></g>
    <g id="textShow"></g>
   
    <!-- JQuery-->
    <script type="text/JavaScript">
      <![CDATA[

      /* draw vertical chart using this config*/  
      var config={
        startRange:0,
        endRange:100,
        fillcolor:"forestgreen",
        initialX:80,
        initialY:10,
        
        strokeWidth:2,
        height:200,
        width:50
      };

      /*Make svg nodes*/
      function makeSVG(tag, attrs) {

        /* make dynamic svg elements*/
        var elements = document.createElementNS('http://www.w3.org/2000/svg', tag);
        for (var k in attrs) {
          elements.setAttribute(k, attrs[k]);
        }
        return elements;
      }
      function drawFirstRect(){   
        var rect=makeSVG("rect",{
          x:config.initialX,
          y:config.initialY,
          width:config.width,
          height:config.height, 
          'stroke-width':config.strokeWidth,
          fill:"none",
          stroke:"gray",
          id:"firstRect",
        });
        $("#chartContainer").append(rect);

      }

      function drawSecondRect(){  
        var fillPercent=$("#fillData").val();/*important result % (0-100)*/
        var newHeight=(fillPercent*(config.height))/100;
      
        var newY=config.initialY+(config.height-newHeight);
          
        var rect=makeSVG("rect",{
          x:config.initialX,
          y:newY,
          width:config.width,
          height:newHeight, 
          fill:'url("#gradFill")', 
          stroke:"none",
          id:"secondRect",
        });
        $("#chartContainer").append(rect);

      }

    function highlightedText(){
        var index=1;
        var range=(20*(config.endRange-config.startRange))/100;
      var newHeight=(config.height)/5;
        var myText,auxiliary=0,temp=0;
        for(index;index<=6;index++){
          
          myText=makeSVG("text",{
          x:20,
         y:config.initialY+temp+5,
          id:"level"+index,
        });
         
       
        $("#textLevel").append(myText);
        
        $("#textShow").append(myText);
            $("#level"+index).text(config.endRange-auxiliary);
        temp= newHeight*index;
           auxiliary=range*index;
       }
      
    }
      
      $("#fillData").on("click change keyup",function(){
        $("#chartContainer").text("");
        $("#message").text("");
        drawFirstRect();
        if($("#fillData").val()>0 && $("#fillData").val() <=100){
           drawSecondRect();
        }else{
        $("#message").text("Invalid % "+$("#fillData").val());
        }
      });
      $(function(){drawFirstRect();
                   drawSecondRect();
                   highlightedText();});

      ]]>

    </script>
  </svg>
  <p>Dynamic Vertical progress SVG chart</p>
</body>
</html>

Svg horizontal bar chart.

Click inside SVG and Change data

2018320197202072021620221020236
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
  <p>Click inside SVG and Change data</p>
  <svg id="chartData" height="230" width="300">
    <defs>
    <linearGradient id="gradFill1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(2251, 20, 55);stop-opacity:1" ></stop>
      <stop offset="100%"
      style="stop-color:rgb(228, 163, 224);stop-opacity:1" ></stop>
    </linearGradient>
  </defs>
    <g id="chartContainer1"></g>
    <g id="textShow1"></g>
   
    <!-- JQuery-->
    <script type="text/JavaScript">
      <![CDATA[
      /*Make svg nodes*/
      function makeSVG1(tag, attrs) {
        /* make dynamic svg elements*/
        var elements = document.createElementNS('http://www.w3.org/2000/svg', tag);
        for (var k in attrs) {
          elements.setAttribute(k, attrs[k]);
        }
        return elements;
      }
        
      /* draw vertical chart using this config*/  
      var configData={
       level:[2018,2019,2020,2021,2022,2023] 
      };
      function drowh(){
         var rectData,textData,height=30,widthNew,dataInfo;
        for(var i=0;i<configData.level.length;i++){
          dataInfo=Math.floor(Math.random() * 10) + 1;
          widthNew=(dataInfo) *20;
          rectData=makeSVG1("rect",{
          x:70,
          y:height,
          width:widthNew,
          height:20, 
          fill:'url("#gradFill1")', 
          stroke:"none",
          id:"rect"+i,
        });
          textData=makeSVG1("text",{
          x:30,
          y:height+15,
          stroke:"none",
          id:"textH"+i,
        });
          
          
        $("#chartContainer1").append(rectData);
        $("#textShow1").append(textData);
         $("#textH"+i).text(configData.level[i]);
          
         textData=makeSVG1("text",{
          x:75+widthNew,
          y:height+15,
          fill:"green", 
          stroke:"none",
          id:"textD"+i,
        });
         
            $("#textShow1").append(textData);
            $("#textD"+i).text(dataInfo);
          height+=30;
        }
      }
    $("#chartData").click(function(){
           $("#chartContainer1").text("");
        $("#textShow1").text("");
          drowh();
        });
      $(function(){  drowh();});
      
      ]]>

    </script>
  </svg>
  <p>Basic Horizontal SVG Chart</p>
</body>
</html>

© 2019, regularcodes.com, All rights reserved