SVG Animation

SVG Bicycle Animation
SVG Dynamic Charts

Number of data
<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>
  <p>Number of data</p>
  <input type="number" id="chartDataLevel" value="5"/>
  <p id="userInfo"></p>
  <svg id="chartInfo"  height="230" width="300">
    <defs>
      <linearGradient id="gradColor" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%"
        style="stop-color:rgb(33, 150, 243);stop-opacity:1" ></stop>
        <stop offset="100%"
        style="stop-color:rgba(0, 188, 212, 0.83);stop-opacity:1" ></stop>
      </linearGradient>
    </defs>
    <g id="chartInfoContainer"></g>
    <g id="showTextStatus"></g>

    <!-- JQuery-->
    <script type="text/JavaScript">
      <![CDATA[
      /*Make svg nodes*/
      function svgElementCreate(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;
      }


      var chartConfig={
       level:8,
       height:120,
     };
     function fillChartInfo(){
       var rectData,textData,width=30,heightNew,dataInfo;
       for(var i=0;i<chartConfig.level;i++){
        dataInfo=Math.floor(Math.random() * 10) + 1;
        heightNew=(dataInfo) *10;
        rectData=svgElementCreate("rect",{
          x:width,
          y:50+(chartConfig.height-heightNew),
          width:20,
          height: heightNew, 
          fill:'url("#gradColor")', 
          stroke:"none",
        });
        textData=svgElementCreate("text",{
          x:width+5,
          y:190,
          stroke:"none",
          id:"textT"+i,
        });


        $("#chartInfoContainer").append(rectData);
        $("#showTextStatus").append(textData);
        $("#textT"+i).text(i);

        textData=svgElementCreate("text",{
          x:width,
          y:40+(chartConfig.height-heightNew),
          fill:"green", 
          stroke:"none",
          id:"textH"+i,
        });

        $("#showTextStatus").append(textData);
        $("#textH"+i).text(dataInfo);
        width+=30;
      }
    }
    $("#chartInfo").click(function(){
     $("#chartInfoContainer").text("");
     $("#showTextStatus").text("");
     fillChartInfo();
   });
    $(function(){ 

  chartConfig.level=$("#chartDataLevel").val();
     fillChartInfo();
   });


    $("#chartDataLevel").on("click change keyup keydown",function(){
      $("#userInfo").text("");
      if($("#chartDataLevel").val()>-1){
       $("#chartInfoContainer").text("");
       $("#showTextStatus").text("");
       chartConfig.level=$("#chartDataLevel").val();
        $("#chartInfo").attr("width", chartConfig.level*25+150);
       fillChartInfo();
     }else{
      $("#userInfo").text("Invalid Range :"+$("#chartDataLevel").val());
    }
  });
    ]]>
  </script>
    
   <style>
    <![CDATA[
     #chartInfo{
           background: #eae8e1;
     }
     
     ]]>
     
   </style>
</svg>


</body>
</html>
SVG Animation

SVG Dynamic Charts

Comment

New Comment
