asked on

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

ASKER CERTIFIED SOLUTION

Gertone (Geert Bormans)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

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.