Dynamic Graphing--Server Client side calls

Creating a Very smooth one second update to a graph using ajax and som

Page 1 of 1

6 Replies - 1993 Views - Last Post: 08 September 2008 - 06:07 AM

#1 tbandtg1   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 03-September 08

Dynamic Graphing--Server Client side calls

Post icon  Posted 03 September 2008 - 10:46 AM

Hi I am working on a hardware meter that creates a webpage and displays a continous graph on said web page. I currently am doing this using WS javascript graphics library and using page refreshes. The device used to use bitmaps but I am moving away from them to offload some of the processing power on the pc. Anyway my question involves javascript. Is there a way to continoulsy update variables over and over again and then redraw the graph with out the kluge of constant refreshes. Instead of refresh.html being called maybe a xml document that is queried every two seconds then rerun the graphing routine. As it sets running the refresh routine to constantly page refresh the hidden iframe feels wrong to me.

Since the webserver is maintained by me and there is only a mechinism for http requests there is no server side scripting. So no php calls or anything like that. Any ideas?
Here is a sample of what I am doing

File 2 __test.html
------------------------------------------------------------------------------------------------------
<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>Digital Level</title>
<script type="text/javascript" src = "******.js"></script>
<script type="text/javascript" src="wz_jsgraph~.js"></script>
<script type="text/javascript" src="******.js"></script>
</head>
<body onload="startclock(2)">
<div id="myCanvas" style="position:relative;height:100%;width:100%;"></div>
<script type="text/javascript">
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("myCanvas");
var jg3 = new jsGraphics("myCanvas");
var titl = "vLEV";
</script>
<iframe "id=refresh" name="refresh" src="__refresh.html"  width="0px" height="0px" style="position:relative;left:0px;padding:0px;" framborder="no" scrolling="no" transparency="true" >
</iframe>
</body>
</html>



file 3 refresh.html_____________________________________________________________________________________________________
<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>Digital Level_V</title>
</head>
<body>
<script type="text/javascript" language='Javascript'>
var inp = 0;
var ch_num = 106;
var cf = 687.000;
var dig_val = -5.9;
var bw = 6.0;
var sr = 5.4;
var units = "dBmV";
var vidBad = 0;
var browser = 0;
var title_string = "Level: *****.plan";
var time_string = "14:45:59";
var date_string = "Sep 03 2008";
var System_Message = "03-Sep-2008 14:08:13 Entering Graphing Mode";
if (window.parent.titl == "vLEV"){
window.parent.digitalLevel(inp,ch_num,cf,dig_val,bw,sr,units,vidBad,browser, title_string,time_string,date_string,System_Message);}
</script>
</body>
</html>


relevelnt js code
/**********************************
function surfto(form){
var myindex=form.dest.selectedIndex;
window.location = form.dest.options[myindex].value;}

//function that handles Javascript links
function go(loc) {
	window.location.href = loc;
	};

//Page timer functions handles autorefreshes of live pages
var timerID = null;
var timerRunning = false;
function stopclock()
	{
		if(timerRunning)
		clearInterval(timerID);
		timerRunning = false;
	};
	
function startclock(rate)
	{
		stopclock();
		timerID = setInterval(' upimg()',(rate*1000));
		timerRunning = true;
	};
	
	function upimg()
	{
		var myTime = new Date();
		var numb = myTime.getTime();
		document.getElementById('refresh').src='__refresh.html';
	};



Is This A Good Question/Topic? 0
  • +

Replies To: Dynamic Graphing--Server Client side calls

#2 tbandtg1   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 03-September 08

Re: Dynamic Graphing--Server Client side calls

Posted 03 September 2008 - 11:48 AM

Sorry for bumping my own post. But I have found numerous articles on how to load xml documents into javascript. I also have the oriely dhtml cookbook. Im trying to get it to constantly update the xml variables or even the xml file and then rerun the javascript graphing routine.

If there is website with a tutorial or example of this that you may know of then please tell me. I will gladly learn and implement it on my own. I just dont want to mess with adding php functions to the webserver. Because I started to read the php white paper and it is pretty daunting. Currently though if you send an http request for a file it will serve that file with out a problem. So I could frame varables into an xml document..


psuedo code below
while(timer==running)
{
js-fetch(data.xml);
js-parse(data.xml);
digitalLevel(inp,ch_num,cf,dig_val,bw,sr,units,vidBad,browser, title_string,time_string,date_string,System_Message);

}

I guess i am looking for help on the js-fetch and js-parse.

Could probably get the js-parse routines from the oriley book. But really need to know the js fetch routine because I want it to continously update.


The current method which i show u works but feels clumsy.
Was This Post Helpful? 0
  • +
  • -

#3 tbandtg1   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 03-September 08

Re: Dynamic Graphing--Server Client side calls

Posted 04 September 2008 - 06:29 AM

No Answer can mean only one of two things.

I am asking something that is not currently possible(Not likely since it is all just code). Two I am asking something that is really stupid and should know it. Too answer this I have never programed in javascript till this project. The embedded part of this program is really well done and I just want to finish it off with something equaqlly well done.


I usually would not ask for help with work but I really can not find exactly what i am looking for. I am not a web developer and I know you guys are which means that you will have the answer that I am looking for.

Even if there is just a tutorial on how to constantly update an xml document using http: I would gladly just read it and figure it out from there. But every tutorial i have seen doesnt allow for the docuement to be refreshed without refreshing an IFrame or using php. I would really like this to appear seamless. The browser clicking every two seconds I would think is kind of counter productive. And my graphing functions all perform a garbage collecction so renewing the graph wont be a problem I just want to be able to get new variable values on the fly.

If this requires php. Then can someone point me in the right dirrection to write a small embedded php server. Like what the command for the website would look like. Then I can sniff that command and have my webserver respond in the appropriate fasion. I just dont want to write a php server. I could probably do one or two commands. Just add them to the tcp-server. I assume that php uses port 80 and just sends one commmand. specially formated.
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1513
  • View blog
  • Posts: 8,290
  • Joined: 07-September 06

Re: Dynamic Graphing--Server Client side calls

Posted 04 September 2008 - 10:33 AM

Sorry, it is possible what you are trying to do, I haven't looked at your code yet but it is possible. Google has a graphing application in their excel web component.

All you really need to do is create a div or something and then add half the div's height/width (respectively) to the corrdinates that you want to graph and it will be able to do the stuff.

If you want you could also make an image with th euse of PHP or some other server-side language that has GD abilities.

Use ajax to communicate between the client and server applications.

Sorry I didn't get to this topic earlier.
Was This Post Helpful? 0
  • +
  • -

#5 tbandtg1   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 03-September 08

Re: Dynamic Graphing--Server Client side calls

Posted 05 September 2008 - 09:16 AM

View Posttbandtg1, on 4 Sep, 2008 - 06:29 AM, said:

No Answer can mean only one of two things.

I am asking something that is not currently possible(Not likely since it is all just code). Two I am asking something that is really stupid and should know it. Too answer this I have never programed in javascript till this project. The embedded part of this program is really well done and I just want to finish it off with something equaqlly well done.


I usually would not ask for help with work but I really can not find exactly what i am looking for. I am not a web developer and I know you guys are which means that you will have the answer that I am looking for.

Even if there is just a tutorial on how to constantly update an xml document using http: I would gladly just read it and figure it out from there. But every tutorial i have seen doesnt allow for the docuement to be refreshed without refreshing an IFrame or using php. I would really like this to appear seamless. The browser clicking every two seconds I would think is kind of counter productive. And my graphing functions all perform a garbage collecction so renewing the graph wont be a problem I just want to be able to get new variable values on the fly.

If this requires php. Then can someone point me in the right dirrection to write a small embedded php server. Like what the command for the website would look like. Then I can sniff that command and have my webserver respond in the appropriate fasion. I just dont want to write a php server. I could probably do one or two commands. Just add them to the tcp-server. I assume that php uses port 80 and just sends one commmand. specially formated.


The problem I am having is that I wrote the web server. So there is no php on the back end. I have the graphing done it works great. The problem I am having is that the data for the graph needs to be updated in a smooth maner. No screen blinks no refresh clicks. I currently can get it without the screen blinks but the annoying refresh clicks may turn my customers off. This is not mission critical but I was hopeing there was a way to use java script to communicate with the server.

Just have it continously ask for more data.

Like one second level could be 10 and the next it could be 11, and then 12. What I want is a way to get the level from the server without having to code php support. Partially cause I dont completely understand php protocol so there would be a lot of reading to write a php server just to exchange variables.

Is there a way to do the psuedo code i posted.
Was This Post Helpful? 0
  • +
  • -

#6 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1513
  • View blog
  • Posts: 8,290
  • Joined: 07-September 06

Re: Dynamic Graphing--Server Client side calls

Posted 05 September 2008 - 03:07 PM

I believe that if you were to name the image differently then preload the new image and then render it it will look seemless and be pretty easy.
Was This Post Helpful? 0
  • +
  • -

#7 tbandtg1   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 03-September 08

Re: Dynamic Graphing--Server Client side calls

Posted 08 September 2008 - 06:07 AM

View PostBetaWar, on 5 Sep, 2008 - 03:07 PM, said:

I believe that if you were to name the image differently then preload the new image and then render it it will look seemless and be pretty easy.



Not using images. But thankyou. Before images were used and they had to be very simple images because the unit only has a small moto proc. in it. With the javascript graphics I can offload the work to the client pc I just need it to get a new set of data ever second or so.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1