Skip to main content

SVG Animation

SVG Dynamic Charts

SVG Dynamic Charts

Number of data

SVG dynamic chart Example 01018243445
<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>





Comment

Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment