SVG Animation
SVG Dynamic Charts
SVG Dynamic ChartsNumber 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>
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