SVG charts
In this post we are make few animated chart of using SVG elements. That are animation is control by Jquery. The main goal of this post , providing example to make on Custom SVG animated charts.
Example: Basic progress bar
fill % (0-100)
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
<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>
Other Example
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<input type="number" max="180" value="40" id="fillDataSpeed" name="fillDataSpeed">
<br>
<svg width="510" height="330px">
<defs>
<marker id="arrow" markerWidth="15" markerHeight="10" refX="5" refY="4" orient="auto" markerUnits="strokeWidth">
<path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M10.35,3.375 L0.71470510488552,7.780802115867317 L4.87335937673281,3.88136694558351 L0.07023808323379,0.810532231709075 L10.35,3.375" class="" stroke="#005583" fill="darksalmon"></path>
</marker>
</defs>
<path d="M40 250 a 160,160 0 0,1 320,0 l-35 0 A 160 160 0 0 1 75 250 l -35 0" fill-opacity="0.4" stroke-dasharray=2 stroke="gray" stroke-width="3" fill="gray"/>
<line stroke="sienna" x1="200" y1="250" x2="47" stroke-width="1" stroke="pink" y2="250" marker-end="url(#arrow)" >
<animateTransform id="rotateLine"
attributeName="transform"
type="rotate"
from="0 200 250"
to="40 200 250"
dur="3"
begin="0"
repeatCount="1"
fill="freeze" ></animateTransform>
</line>
<text y=180 x=200 text-anchor="middle" fill="white" font-size="20" id="seepdChekerView"></text>
<text y=80 x=200 text-anchor="middle" fill="gray" font-size="20" >90</text>
<text y=255 x=385 text-anchor="middle" fill="gray" font-size="20" >180</text>
<text y=255 x=20 text-anchor="middle" fill="gray" font-size="20" >0</text>
<!-- JQuery-->
<script type="text/JavaScript">
<![CDATA[
$(function(){
$("#fillDataSpeed").change();
});
var speed=0;
$("#fillDataSpeed").on("change",function(){
if($("#fillDataSpeed").val()<=180){
$("#rotateLine").attr("from",speed+" 200 250");
speed=$("#fillDataSpeed").val();
$("#rotateLine").attr("to",speed+" 200 250");
$("#seepdChekerView").text($("#fillDataSpeed").val());
$("#rotateLine")[0].beginElement();
}
});
]]>
</script>
</svg>
</body>
</html>Another example
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<input type="number" max="180" value="40" id="speedView" name="fillDataSpeed">
<br>
<svg width="550" height="280">
<!-- marker animation-->
<marker id="arrow" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle fill="#e4e7ec" stroke-width="1" stroke="white" cx="5" cy="5" r="0"><animate attributeName="r" values="1;2;3" begin="0s" dur="2s"repeatCount="indefinite"/></circle>
</marker>
<!-- Set shap body-->
<path stroke-dasharray=5 d="M40 250 a 160,160 0 0,1 320,0 "stroke="#2196f3" stroke-width="3" fill="#03a9f4"/>
<g>
<!-- set logically fill area-->
<clipPath id="items">
<path d="M40 250 a 160,160 0 0,1 320,0 " stroke="#2196F3" stroke-width="3" fill="#2196f3"/>
</clipPath>
<rect stroke-width="2px" stroke="#e91e63" clip-path="url(#items)" id="shapes"x=10 y= 0 width=500 height=250 fill="silver"></rect>
<line stroke="sienna" x1="200" y1="250" x2="45" stroke-width="2" stroke="pink" y2="250" marker-end="url(#arrow)" ></line>
<animateTransform id="rotateLineV1"
attributeName="transform"
type="rotate"
from="0 200 250"
to="40 200 250"
dur="3"
begin="0"
repeatCount="1"
fill="freeze"></animateTransform>
</g>
<text y=180 x=200 text-anchor="middle" fill="white" font-size="20" id="seepdCheker"></text>
<text y=80 x=200 text-anchor="middle" fill="gray" font-size="20" >90</text>
<text y=255 x=385 text-anchor="middle" fill="gray" font-size="20" >180</text>
<text y=255 x=20 text-anchor="middle" fill="gray" font-size="20" >0</text>
<path d="M40 250 a 160,160 0 0,0 320,0 " fill="white"/>
<!-- JQuery-->
<script type="text/JavaScript">
<![CDATA[
$(function(){
$("#speedView").change();
});
var speedchecker=0;
$("#speedView").on("change",function(){
if($("#speedView").val()<=180){
$("#rotateLineV1").attr("from",speedchecker+" 200 250");
speedchecker=$("#speedView").val();
$("#rotateLineV1").attr("to",speedchecker+" 200 250");
$("#seepdCheker").text(speedchecker);
$("#rotateLineV1")[0].beginElement();
}
});
]]>
</script>
</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