Graphing In Real Time

Questions and information about creating Internet aware NeoBook applications. Including PHP, HTML, FTP, HTTP, Email, etc.

Moderator: Neosoft Support

Locked
User avatar
virger
Posts: 540
Joined: Mon Sep 18, 2006 12:21 pm
Location: Costa Rica, America Central

Graphing In Real Time

Post by virger »

Graficando En Tiempo Real
Usando "flot.js" y "jquery.js", por medio de NeoBook hacemos que se grafique la informacion en una linea en tiempo real y "animada". Dejo tanto el 'html' como el 'pub' para quienes deseen usarlo. Los 'js' pueden bajarse de los links que proporciono.

Graphing In Real Time
Using "flot.js" and "jquery.js" through NeoBook make that information in a real time line and "animated" plot is. I leave both the 'html' as the 'pub' for those wishing to use it. The 'js' can be downloaded from the links I provide.

http://www.jqueryflottutorial.com/js/li ... 8.3.min.js
http://www.jqueryflottutorial.com/js/fl ... vas.min.js
http://www.jqueryflottutorial.com/js/fl ... lot.min.js
http://www.jqueryflottutorial.com/js/fl ... .symbol.js

Codigo/Code NeoBook

Code: Select all

NBW Publication Source File
(C)2014 NeoSoft Corp.
Title=Grafica Data En Html Desde NeoBook
Author=GdoSan/Ene-2016
Language=US
NeoBookVer=5.80
ScreenColors=16777216
ScreenWidth=800
ScreenHeight=600
BkndColor=0
ScreenAutoSize=Yes
LinkColor=16711680
WindowStyle=0
WindowOrder=0
WindowPos=0
WindowProps=31
BiDiMode=0
UseUpdateTimer=Yes
ReturnTime=60
ShapeTransColor=536870912
SplashProps=3
CompileType=0
MediaType=0
FilesIncluded=1
FontsIncluded=2
CopyExternalFiles=No
SetupMedia=3
SetupInstDir=C:\MyProgram
SetupTitle=Setup
SetupColors=16711680|0|65535
VersionMajor=1
VersionMinor=0
VersionRelease=0
VersionBuild=0
ReqExLevel=1
CustomFontName=Arial
CustomFontSize=9
CustomFontStyle=0
CustomCharset=1
CacheSize=30
ExtractOp=132
IE7CompMode=No
L_OK=OK
L_CANCEL=Cancel
L_YES=Yes
L_NO=No
L_CLOSE=Close
L_ERRORTITLE=Error
L_FINDTITLE=Find
L_FINDPROMPT=Find &What
L_FINDFIRST=&Find First
L_FINDNEXT=Find &Next
L_FINDERROR=Search text not found.
L_PWORDTITLE=Password required
L_PWORDMSG=Before continuing, you must first|enter the correct password.
L_PWORDPROMPT=&Password:
L_PWORDERROR=That's not the right password!
L_MEDIAERROR=In order to play this type of file you must install|the appropriate multimedia hardware and/or|software.
L_INTERNETERROR=Unable to locate Internet Browser software.
L_ABORTFUNCTION=Do you want to cancel this function?
L_EXTRACTERROR=This file could not be extracted and cannot be played.
L_INSTDIRPROMPT=Please enter the drive and directory where you would like this program to be installed. To accept the default drive and directory, simply press Enter.
L_INSTFOLDERPROMPT=Do you wish to create a program folder?
L_INSTRUNPROMPT=Do you want to run
L_INSTDISKPROMPT=Please insert disk #
L_INSTDISKERROR=That's not the correct disk, try again.
L_INSTGENERROR=The installation has terminated.
L_INSTEXITPROMPT=Do you really want to cancel the installation?
L_INSTWINTITLE=Setup
L_INSTPROGTITLE=Extracting Files...
L_SENDEMAIL=Sending Mail...
L_MAILSERVER=Please enter the name of your outgoing email server:
L_COPY=Copy to Clipboard
L_SELECTALL=Select All
L_DONWLOADFILE=Downloading: %s
L_PLEASEWAIT=Please wait...
TrayMenuBegin
MenuName=TrayOpen
MenuText=Open
MenuState=3
MenuKey=0
MenuAction=SetVar "[WindowState]" "Normal"
MenuName=TrayExit
MenuText=Exit
MenuState=3
MenuKey=0
MenuAction=Exit "" ""
MenuEnd
MasterPage
NewPage=New Page
PageStyle=0
PageColor=16777215
PageGradient1=16711680
PageGradient2=255
PageGradientDir=1
WallpaperStyle=0
EffectSpeed=0
ObjectType=14
Name=Web
X=9
Y=41
W=782
H=557
Anchor=0
FileName=[ElHtml]
VarName=[WebStatus]
TitleVarName=[WebTitle]
URLVarName=[WebAddr]
LineColor=0
LineWidth=0
LineStyle=0
FillColor=12632256
FillPattern=0
Font=Arial
FontSize=8
FontStyle=0
FontCharset=1
TextColor=0
TabOrder=2
ObjectType=3
Name=BtCambiar
X=204
Y=3
W=79
H=36
Anchor=0
Text=Cambiar
Align=2
ImageStyle=0
ObjAction=ifex "[vIntervalo]>=100 AND [vIntervalo]<=5000"¶    BrowserSetElement "Web" "inter" "[vIntervalo]"¶endif
LineColor=0
LineWidth=1
LineStyle=0
FillColor=12632256
FillPattern=0
Font=Arial
FontSize=12
FontStyle=1
FontCharset=1
TextColor=0
TabOrder=1
ObjectType=9
Name=EnIntervalo
X=134
Y=7
W=66
H=28
Anchor=0
VarName=[vIntervalo]
Align=1
EditNumber=Yes
EditLen=4
LineColor=0
LineWidth=1
LineStyle=0
FillColor=12632256
FillPattern=0
Font=Arial
FontSize=12
FontStyle=1
FontCharset=1
TextColor=0
TabOrder=4
ObjectType=8
Name=InIntervalo
X=37
Y=9
W=90
H=26
Anchor=0
Font=Arial
FontSize=12
FontStyle=1
FontCharset=1
TextColor=0
Text={\rtf1\ansi\deff0\deftab254{\fonttbl{\f0\fnil\fcharset1 Arial;}}{\colortbl\red0\green0\blue0;\red255\green0\blue0;\red0\green128\blue0;\red0\green0\blue255;\red255\green255\blue0;\red255\green0\blue255;\red128\green0\blue128;\red128\green0\blue0;\red0\green255\blue0;\red0\green255\blue255;\red0\green128\blue128;\red0\green0\blue128;\red255\green255\blue255;\red192\green192\blue192;\red128\green128\blue128;\red0\green0\blue0;\red0\green0\blue0;}\paperw12240\paperh15840\margl1440\margr1440\margt1440\margb1440\margh720\margf720{\*\pnseclvl1\pnucrm\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl2\pnucltr\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl3\pndec\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl4\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{)}}}¶{\*\pnseclvl5\pndec\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl6\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl7\pnlcrm\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl8\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl9\pndec\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶\endnhere\sectdefaultcl{\pard{\qr\li0\fi0\ri0\sb0\sl\sa0 \plain\f0\fs24\cf0\b Intervalo:}}¶}
HMargin=0
VMargin=0
LineColor=0
LineWidth=0
LineStyle=0
FillColor=12632256
FillPattern=1
TabOrder=3
ObjectType=8
Name=Sombra
X=559
Y=7
W=219
H=20
Anchor=0
Font=Arial
FontSize=10
FontStyle=3
FontCharset=1
TextColor=10724259
Text={\rtf1\ansi\deff0\deftab254{\fonttbl{\f0\fnil\fcharset1 Arial;}}{\colortbl\red0\green0\blue0;\red255\green0\blue0;\red0\green128\blue0;\red0\green0\blue255;\red255\green255\blue0;\red255\green0\blue255;\red128\green0\blue128;\red128\green0\blue0;\red0\green255\blue0;\red0\green255\blue255;\red0\green128\blue128;\red0\green0\blue128;\red255\green255\blue255;\red192\green192\blue192;\red128\green128\blue128;\red0\green0\blue0;\red0\green0\blue0;}\paperw12240\paperh15840\margl1440\margr1440\margt1440\margb1440\margh720\margf720{\*\pnseclvl1\pnucrm\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl2\pnucltr\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl3\pndec\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl4\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{)}}}¶{\*\pnseclvl5\pndec\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl6\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl7\pnlcrm\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl8\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl9\pndec\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶\endnhere\sectdefaultcl{\pard{\qc\li0\fi0\ri0\sb0\sl\sa0 \plain\f0\fs20\cf0\b\i Pasando El Tiempo Ene/2016}}¶}
HMargin=0
VMargin=0
LineColor=0
LineWidth=0
LineStyle=0
FillColor=12632256
FillPattern=1
TabOrder=7
ObjectType=8
Name=Inf
X=557
Y=5
W=219
H=20
Anchor=0
Font=Arial
FontSize=10
FontStyle=3
FontCharset=1
TextColor=0
Text={\rtf1\ansi\deff0\deftab254{\fonttbl{\f0\fnil\fcharset1 Arial;}}{\colortbl\red0\green0\blue0;\red255\green0\blue0;\red0\green128\blue0;\red0\green0\blue255;\red255\green255\blue0;\red255\green0\blue255;\red128\green0\blue128;\red128\green0\blue0;\red0\green255\blue0;\red0\green255\blue255;\red0\green128\blue128;\red0\green0\blue128;\red255\green255\blue255;\red192\green192\blue192;\red128\green128\blue128;\red0\green0\blue0;\red0\green0\blue0;}\paperw12240\paperh15840\margl1440\margr1440\margt1440\margb1440\margh720\margf720{\*\pnseclvl1\pnucrm\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl2\pnucltr\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl3\pndec\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{.}}}¶{\*\pnseclvl4\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb}{\pntxta{)}}}¶{\*\pnseclvl5\pndec\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl6\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl7\pnlcrm\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl8\pnlcltr\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶{\*\pnseclvl9\pndec\pnstart1\pnhang\pnindent720{\pntxtb{(}}{\pntxta{)}}}¶\endnhere\sectdefaultcl{\pard{\qc\li0\fi0\ri0\sb0\sl\sa0 \plain\f0\fs20\cf0\b\i Pasando El Tiempo Ene/2016}}¶}
HMargin=0
VMargin=0
LineColor=0
LineWidth=0
LineStyle=0
FillColor=12632256
FillPattern=1
TabOrder=6
Codigo/Code Html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flot One Line REAL TIME & NeoBook</title>
<script src="../js/jquery-1.8.3.min.js"></script>
<!--[if lte IE 8]>
    <script language="javascript" type="text/javascript" src="../js/excanvas.min.js"></script>
<![endif]-->
<script src="../js/jquery.flot.min.js"></script>
<script src="../js/jquery.flot.symbol.js"></script>

<style>
#tdr {text-align:right;}
#tdc {text-align:center;}
</style>

<script>
var data = [];
var dataset;
var puntos = 30;
var ahora = new Date().getTime();
var ptos = [12,55,21,33,11,44,66,11,23,43,65,77,88,98,76,54,32,13,24,35,67,88,96,65,36,78,33,55,72,51];
var c = 0;

var opt = {
	 			inter:100,
   			pasos:30};


function LeaData() {
    data.shift();
    while (data.length < puntos) {     
        var temp = [ahora += opt.inter, ptos[c] ];				
				c++;
        data.push(temp);
				if ( c > puntos){ c = 0 };
    }
}
    var options = {
        series: 
				{ lines: {
				lineWidth: 1.2,					
             show: true },
        points: {
             radius: 3,
               fill: true,
               show: true }
        },
        xaxis: 
				{	mode: "time",
				tickSize:0.0001,
			tickFormatter:"",
				},
        yaxes: [
				{      			 min:0,
							 			 max:100,
				  			tickSize:10,
      axisLabelUseCanvas: false
        }, 
				],
        grid: {
  	          hoverable: false,
            borderWidth: 2,
            borderColor: "#633200",
        backgroundColor: {colors: ["#ffffff", "#EDF5FF"] }
				}};

function grafique(){
		document.getElementById('inter').value = opt.inter;
		LeaData();
   	dataset = [ {  data: data, color: "#0000FF" }    ];
   	$.plot($("#AreaGrafico"), dataset, options);
		delay();
}


function delay(){
	fnrnd();	
	$.plot($("#AreaGrafico"), dataset, options);		
	if((!opt.veces && !opt.id) || opt.veces==-1)
	{	opt['veces']	=0;
		opt['id']			=0;
		opt['stop']		=1;
	};
 	var tmp = parseInt(opt.pasos,10) +1 ;
	if(opt.stop == 0 || opt.veces == tmp )
	{	clearTimeout(opt.id);
		opt.veces	=-1;
		opt.id		= 0; 
		opt.stop	= 1;
	}
	document.getElementById('inf').value = opt.veces;	
	opt.veces++;

	if (opt.veces > 0 && opt.veces != tmp ){
		opt.id = setTimeout(delay,opt.inter);
		var vInt = parseInt(document.getElementById('inter').value,10);
		if(opt.inter != vInt){
				clearTimeout(opt.id);			
				opt.inter = vInt;
				delay();
				};
	} else {
		clearTimeout(opt.id);
		opt.veces	=-1;
		opt.id		= 0; 
		opt.stop	= 1;
	}
}

function fnrnd(){
	var dato = Math.round((Math.random()*100));
	document.getElementById('dt').value = dato;
	data.shift();
  var temp = [ahora += opt.inter, dato ];				
	data.push(temp);	
}


function cambie(){
	clearTimeout(opt.id);	
	opt.inter = 	parseInt(document.getElementById('inter').value,10);
	delay();
}

</script>
</head>
<body>
<div style="float:left">
<table width="170" border="0" cellpadding="0">
  <tr>
    <td width="80" id="tdr">Intervalo</td>
    <td width="90" id="tdc"><input name="inter"  id="inter"  type="text" size="8" value="1000" /></td>
  </tr>
  <tr>
    <td id="tdr">Data</td>
    <td id="tdc"><input name="dt"  id="dt"  type="text" size="8" value="12" /></td>
  </tr>
  <tr>
    <td id="tdr">Veces</td>
    <td id="tdc"><input name="inf" id="inf" type="text" size="8" value="0" /></td>
  </tr>
  <tr>
    <td id="tdc"><input name="btc" type="button" onClick="cambie()" value="Cambie" /></td>
    <td id="tdc"><input name="btg" type="button" onClick="grafique()" value="Grafique" /></td>
  </tr>
</table>
</div>
<div id='fondo' style="background-color:#F0FFE7;width:550px;height:400px; margin-left:200px; border:inset #666;"><br />
<h5 align="center"> GRAFICA DATA ENVIADA DESDE 'NEOBOOK'</h5>
<div id="AreaGrafico" style="background-color:#F0DBE7;width:450px;height:300px; margin-left:50px;"></div>
</div>
</body>
</html>
Recuerden que esto se puede usar con 'Arduino'
Espero ayude a alguien.
Ya casi se van los Cubanos

Remember that this can be used with 'Arduino'
I hope it will help someone.
Almost Cubans go
COSTA RICA
PURA VIDA
Neosoft Support
NeoSoft Team
Posts: 5628
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA
Contact:

Re: Graphing In Real Time

Post by Neosoft Support »

Very interesting. Thank you for sharing this with us.
NeoSoft Support
Locked