SVG path animation using jquery/javascript

Question

 I have created the HTML 5 SVG line chart through jquery. Please refer the below screenshot.

  Please refer the below SVG 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<svg xmlns="http://www.w3.org/2000/svg" id="container_svg" style="width: 750px; height: 450px;"><rect id="ChartArea" fill="white" stroke="gray" stroke-width="1" x="70" y="42" width="660" height="286" /><text id="ChartTitle" font-size="17" text-anchor="start" x="338.5" y="20">Employee Savings</text><path id="XAxisMajorTicks" fill="none" stroke="gray" stroke-width="0.5" d="M 202 333 L 202 328 M 334 333 L 334 328 M 466 333 L 466 328 M 598 333 L 598 328 M 730 333 L 730 328" /><path id="XAxisMajorGridLines" fill="none" stroke="gray" stroke-width="0.8" d="M 202 328 L 202 42 M 334 328 L 334 42 M 466 328 L 466 42 M 598 328 L 598 42 M 730 328 L 730 42" /><text id="XLabel0" font-size="10" fill="gray" text-anchor="middle" x="70" y="343">0</text><text id="XLabel2" font-size="10" fill="gray" text-anchor="middle" x="202" y="343">2</text><text id="XLabel4" font-size="10" fill="gray" text-anchor="middle" x="334" y="343">4</text><text id="XLabel6" font-size="10" fill="gray" text-anchor="middle" x="466" y="343">6</text><text id="XLabel8" font-size="10" fill="gray" text-anchor="middle" x="598" y="343">8</text><text id="XLabel10" font-size="10" fill="gray" text-anchor="middle" x="730" y="343">10</text><path id="YAxisMajorTicks" fill="none" stroke="gray" stroke-width="0.5" d="M 65 270.8 L 70 270.8 M 65 213.6 L 70 213.6 M 65 156.4 L 70 156.4 M 65 99.2 L 70 99.2 M 65 42 L 70 42" /><path id="YAxisMajorGridLines" fill="none" stroke="gray" stroke-width="0.8" d="M 70 270.8 L 730 270.8 M 70 213.6 L 730 213.6 M 70 156.4 L 730 156.4 M 70 99.2 L 730 99.2 M 70 42 L 730 42" /><text id="YLabel0" font-size="10" fill="gray" text-anchor="end" x="64" y="328">0</text><text id="YLabel20" font-size="10" fill="gray" text-anchor="end" x="64" y="270.8">20</text><text id="YLabel40" font-size="10" fill="gray" text-anchor="end" x="64" y="213.6">40</text><text id="YLabel60" font-size="10" fill="gray" text-anchor="end" x="64" y="156.4">60</text><text id="YLabel80" font-size="10" fill="gray" text-anchor="end" x="64" y="99.2">80</text><text id="YLabel100" font-size="10" fill="gray" text-anchor="end" x="64" y="42">100</text><clipPath id="ChartAreaClip"><rect id="ChartAreaClip" fill="white" stroke="gray" stroke-width="1" x="70" y="42" width="660" height="286" /></clipPath><path id="John" clip-path="url(&quot;#ChartAreaClip&quot;)" fill="none" stroke="red" stroke-width="3" d="M 136 213.6 L 202 259.36 M 202 259.36 L 268 222.18 M 268 222.18 L 334 159.26 M 334 159.26 L 400 150.68 M 400 150.68 L 466 79.18 M 466 79.18 L 532 170.7 M 532 170.7 L 598 167.84 M 598 167.84 L 664 99.2" /><text id="SeriesText0" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="136" y="196.1">40</text><text id="SeriesText1" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="202" y="241.86">24</text><text id="SeriesText2" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="268" y="204.68">37</text><text id="SeriesText3" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="334" y="141.76">59</text><text id="SeriesText4" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="400" y="133.18">62</text><text id="SeriesText5" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="466" y="61.68">87</text><text id="SeriesText6" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="532" y="153.2">55</text><text id="SeriesText7" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="598" y="150.34">56</text><text id="SeriesText8" font-size="12" dominant-baseline="top" fill="black" text-anchor="center" x="664" y="81.7">80</text><circle id="circlesymbol0" fill="red" cx="136" cy="213.6" r="7.07107" /><circle id="circlesymbol1" fill="red" cx="202" cy="259.36" r="7.07107" /><circle id="circlesymbol2" fill="red" cx="268" cy="222.18" r="7.07107" /><circle id="circlesymbol3" fill="red" cx="334" cy="159.26" r="7.07107" /><circle id="circlesymbol4" fill="red" cx="400" cy="150.68" r="7.07107" /><circle id="circlesymbol5" fill="red" cx="466" cy="79.18" r="7.07107" /><circle id="circlesymbol6" fill="red" cx="532" cy="170.7" r="7.07107" /><circle id="circlesymbol7" fill="red" cx="598" cy="167.84" r="7.07107" /><circle id="circlesymbol8" fill="red" cx="664" cy="99.2" r="7.07107" /><rect id="LegendArea" fill="none" stroke="gray" stroke-width="1" x="341" y="380" width="68" height="45" /><path id="LegendItemSymbol" fill="none" stroke="red" d="M 351 407.5 L 354.333 397.5 L 357.667 407.5 L 361 397.5" /><text id="LegendItemText" font-size="12" dominant-baseline="middle" fill="gray" text-anchor="start" x="371" y="402.5">John</text></svg>

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

i want to perform the path animation  (i.e.) line to be draw like motion effect. like below link

http://www.highcharts.com/demo/

i have referred the below links but cant get idea.

https://developer.mozilla.org/en-US/docs/SVG/Element/animateMotion

https://developer.mozilla.org/en-US/docs/SVG/Element/animateColor

https://developer.mozilla.org/en-US/docs/SVG/Element/animate

can you please provide any solution to make animated path for line chart ?

Thanks,

---

siva

Answer 1

Hi Siva,

Seems this is a pure SVG specific programming issue. I think you can try searching for some SVG tutorial or reference about how you can deal with SVG with javascript API. Here are some online reference I've found:


#Working with SVG in HTML5 - 20
http://channel9.msdn.com/Series/HTML5-CSS3-Fundamentals-Development-for-Absolute-Beginners/Working-with-SVG-in-HTML5-20

#Basic SVG animation (Windows)
http://msdn.microsoft.com/en-us/library/ie/gg193979(v=vs.85).aspx#example2

#SVG animation with JavaScript and SMIL
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

The "Basic SVG animation" reference has included some examples on how to produce SVG animation with javascript code. I think you can start with that since you want to use JQuery for producing the SVG animation effect.

Also, you can try posting the question to some other web development forums for more ideas.

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Hi Siva,

As steven said, you can use SVG animation. And you may also use a jquery line chart plugin as follow:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="/linechart/jquery-1.8.2-win8-1.0.min.js"></script>
		<script type="text/javascript">
		    $(function () {
		        var chart;
		        $(document).ready(function () {
		            chart = new Highcharts.Chart({
		                chart: {
		                    renderTo: 'container',
		                    type: 'line',
		                    marginRight: 130,
		                    marginBottom: 25
		                },
		                title: {
		                    text: 'Monthly Average Temperature',
		                    x: -20 //center
		                },
		                subtitle: {
		                    text: 'Source: WorldClimate.com',
		                    x: -20
		                },
		                xAxis: {
		                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
		                },
		                yAxis: {
		                    title: {
		                        text: 'Temperature (°C)'
		                    },
		                    plotLines: [{
		                        value: 0,
		                        width: 1,
		                        color: '#808080'
		                    }]
		                },
		                tooltip: {
		                    formatter: function () {
		                        return '<b>' + this.series.name + '</b><br/>' +
                                this.x + ': ' + this.y + '°C';
		                    }
		                },
		                legend: {
		                    layout: 'vertical',
		                    align: 'right',
		                    verticalAlign: 'top',
		                    x: -10,
		                    y: 100,
		                    borderWidth: 0
		                },
		                series: [{
		                    name: 'Tokyo',
		                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
		                }, {
		                    name: 'New York',
		                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
		                }, {
		                    name: 'Berlin',
		                    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
		                }, {
		                    name: 'London',
		                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
		                }]
		            });
		        });

		    });
		</script>
	</head>
	<body>
<script src="/linechart/highcharts.js"></script>
<script src="/linechart/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

And I have uploaded the js to skydrive at: https://skydrive.live.com/?cid=6B6C9082658DF18D&id=6B6C9082658DF18D%21121 .

---

Roy
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 3

Okay, so here's the SVG element to draw a line :

<line id="demoLine" x1="start-x" y1="start-y" x2="end-x" y2="end-y" style="stroke:black"/>

Here's how you can animate a line :

Draw a line using the above element, and then with the help of JS, draw a part of the line and then extend it part by part until you reach the end by calling setTimeout or requestAnimationFrame method.

Here's a demo that'll help you:

var demoLine=document.getElementById("demoLine");
var startPoint={x:0,y:0};
var endPoint={x:200, y:200};
//dividing the line into n parts
var NUMBER_OF_STEPS=10;
//step size
var stepX=(endPoint.x-startPoint.x)/NUMBER_OF_STEPS;
var stepY=(endPoint.y-startPoint.y)/NUMBER_OF_STEPS;

var currentPoint={x:startPoint.x+stepX,y:startPoint.y+stepY};

(function animateLine(){
if(currentPoint.x>=endPoint.x)
return;
demoLine.setAttribute("x2",currentPoint.x);
demoLine.setAttribute("y2",currentPoint.y);
currentPoint.x+=stepX;
currentPoint.y+=stepY;
//animate the line
setTimeout(animateLine,16.66*3);
})()

so for your graph, draw as many curves as you want, one by one and you will get exactly what you want.

Hope this helps,

Eklavya