how to create animation with x y co-ordinates from XML data feed

Hello

I have a XML data feed with many events that happen one of which is im trying to use the data from the xml file to display it graphically on screen with some sort of graphics (2d , 3d etc)

example of xml-
<t sequence="1121" t-type-id="2" t type="Inter" x-coord="100" y-coord="43" x-coord-end="" y-coord-end=""/>
<t sequence="1122" t-type-id="24" t-type="KPU" x-coord="97" y-coord="44" x-coord-end="" y-coord-end=""/>
<t sequence="1123" t-type-id="12" t-type="GKLB" x-coord="96" y-coord="41" x-coord-end="47" y-coord-end="53"/>

whats this best way to do this ?( note novice )

any software that can do this , and maybe add in the extra events and display accordingly?

Thanks
D
deanmachine333Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gertone (Geert Bormans)Information ArchitectCommented:
I believe the obvious answer to your question is SVG
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
You can embed that in HTML5 or use it stand alone
it allows for javascript animation.

I would transform the XML you have using XSLT
After that you can manipulate the SVG in graphic authoring environments

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The first step is reading the xml file.  Then isolating the data for each row (x=100, y=43).  Then finally displaying those coordinates on screen.

If you break it down like that it is much easier.  Because you have the topic, "Misc Web Dev" in your question, I assume you want to get this in the browser on a web site.  You can do all of this just using html, css and javascript/jquery including charting libraries that will typically be in javascript.  

A charting library could be http://www.chartjs.org/ or http://www.highcharts.com/ or http://d3js.org/ and http://www.flotcharts.org/.  There are more, but these are a good start.

Using http://www.flotcharts.org/flot/examples/basic-usage/index.html  if you view the source
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Flot Examples: Basic Usage</title>
	<link href="../examples.css" rel="stylesheet" type="text/css">
	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
	<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
	<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
	<script type="text/javascript">

	$(function() {

		var d1 = [];
		for (var i = 0; i < 14; i += 0.5) {
			d1.push([i, Math.sin(i)]);
		}

		var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

		// A null signifies separate line segments

		var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

		$.plot("#placeholder", [ d1, d2, d3 ]);

		// Add the Flot version string to the footer

		$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
	});

	</script>
</head>
<body>

	<div id="header">
		<h2>Basic Usage</h2>
	</div>

	<div id="content">

		<div class="demo-container">
			<div id="placeholder" class="demo-placeholder"></div>
		</div>

		<p>You don't have to do much to get an attractive plot.  Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.</p>

		<p>The axes are automatically scaled.</p>

	</div>

	<div id="footer">
		Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
	</div>

</body>
</html>

Open in new window

You simply need to include jquery (first) then the flot js files.  
In the html, this is where the flot chart will show up when the browser renders
<div id="placeholder" class="demo-placeholder"></div>

Open in new window


Below defines the x/y coordinates for 3 different lines.  If you just look at the d2 line, that is the simplest.
	$(function() {

		var d1 = [];
		for (var i = 0; i < 14; i += 0.5) {
			d1.push([i, Math.sin(i)]);
		}

		var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

		// A null signifies separate line segments

		var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

		$.plot("#placeholder", [ d1, d2, d3 ]);

		// Add the Flot version string to the footer

		$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
	});

Open in new window

Now your issue is how do you get this line, var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; from your xml.  That part can be done in javascript/jquery as well.  If you need help in that, I would suggest a separate question for each of these steps to keep the thread easy.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
XML

From novice to tech pro — start learning today.