locked
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

    • Changed type Song Tian Wednesday, March 06, 2013 5:55 AM
    Tuesday, March 05, 2013 9:00 AM

Answers

All replies

  • 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.

    • Marked as answer by Song Tian Monday, March 11, 2013 10:00 AM
    Wednesday, March 06, 2013 2:40 AM
    Moderator
  • 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.

    • Marked as answer by Song Tian Monday, March 11, 2013 10:00 AM
    • Unmarked as answer by Siva Rajini Monday, March 11, 2013 10:03 AM
    Wednesday, March 06, 2013 3:05 AM
  • 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




    Monday, March 11, 2013 6:40 PM