10 Replies - 876 Views - Last Post: 01 December 2012 - 08:56 AM

#1 monopolis  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 21-April 10

Dynamic table in javascript CPU intense

Posted 30 November 2012 - 10:08 AM

Hello everyone,

I will go staright to the point !!
I have a webpage that displays a map ,the user diffines some points and it returns a route between these points and also at the page i create a table dynamically with javascript to show the length and the name of the streets ,but i found that the creation of the table is CPU intense at google crome it consumes 102 CPU . The data to create my table are taken for a postgresSQL database . Is there any other way to still use the dynamic table but be less CPU consuming ?

I wasn't sure if i should post this here or under Web Development but since i will post and the code for the table i disided to post it under Javascript
function executeURL(){

Json_layers[How_many_layers]=json_layer = new OpenLayers.Layer.Vector('Route');
json_layer.styleMap = myStyles;

document.getElementById("mytable").innerHTML = "";
var root=null;
var tab=null;
var tbo=null;
var row=null;
var cell=null;


OpenLayers.Request.GET({
    url: json_url,
    success: function(e) {
			var reader = new OpenLayers.Format.GeoJSON();
			segments =e.responseText;

			root = document.getElementById('mytable');
			tab = document.createElement('table');
			tab.className="table";
			tbo = document.createElement('tbody');

			for(var i=0;i<segments.split('name').length-1;i++){
				var name = reader.read(segments)[i].attributes.name;
				var length = reader.read(segments)[i].attributes.length;
				row=document.createElement('tr');
				for(var j=0;j<2;j++){
					cell=document.createElement('td');
					if(j==0){
						if(!isBlank(name)){
							cell.appendChild(document.createTextNode(name));
						}else{
							cell.appendChild(document.createTextNode("Ανόνυμη οδός"));
						}
					}else{
						cell.appendChild(document.createTextNode(Number(length).toFixed(0)+ " μέτρα") );
						total_length_m += parseFloat(length);
					}		
					row.appendChild(cell);
				}
				tbo.appendChild(row);

			}
			tab.appendChild(tbo);
			root.appendChild(tab);
			document.getElementById('length').innerHTML="Το οληκό μήκος της διαδρομής είναι :"+Number(total_length_m).toFixed(0)+ " meters";
			document.getElementById('length').style.display='block';
			total_length_m=0;


			var features = new OpenLayers.Format.GeoJSON().read(e.responseText);
			for(var i= 0; i < features.length; i++){

			features[i].geometry.transform(
			     new OpenLayers.Projection("EPSG:4326"),
			     new OpenLayers.Projection("EPSG:900913")
			  );
			}
			json_layer.addFeatures(features);
   }
});
segments='';
How_many_layers++;

}


Any suggestions would be appriciated and please explain with as much detail as possible :-)
Thanks in advance !!!

Is This A Good Question/Topic? 0
  • +

Replies To: Dynamic table in javascript CPU intense

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Dynamic table in javascript CPU intense

Posted 30 November 2012 - 10:19 AM

Hello,

How many rows of data is the script producing and how many columns per row? Is all the data coming from your own server or a remote one?
Was This Post Helpful? 0
  • +
  • -

#3 monopolis  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 21-April 10

Re: Dynamic table in javascript CPU intense

Posted 30 November 2012 - 10:29 AM

Hello Kruithne ,
I would like to have about 1500 rows and two columns !!
Yes all the data come from my own server which is running at the same machine with the clinet
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Dynamic table in javascript CPU intense

Posted 30 November 2012 - 12:14 PM

How about you send the table over as XML (so you can use the .responseXML and have a ready parsed table to directly append)? though I expect that to be somewhat memory intense.
Was This Post Helpful? 0
  • +
  • -

#5 monopolis  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 21-April 10

Re: Dynamic table in javascript CPU intense

Posted 30 November 2012 - 02:24 PM

Hello Dormilich,

Could you please give a link to a tutorial because i not experienced enough with javascript and XML requests !!
The data i pass in order to create the table is in this format
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[23.7117977,37.9688206],[23.7125047,37.9685775]]]},"crs":{"type":"EPSG","properties":{"code":"4326"}},"properties":{"id":"136150","length":"85.8632754093374","name":"\u0391\u03b9\u03bf\u03bb\u03ad\u03c9\u03bd                                                                                                                                                                                                 "}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[23.7125047,37.9685775],[23.712196,37.968026]]]},"crs":{"type":"EPSG","properties":{"code":"4326"}},"properties":{"id":"136102","length":"85.1198696853038","name":"\u03a4\u03c1\u03ce\u03c9\u03bd                                                                                                                                                                                                   "}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[23.712196,37.968026],[23.711485,37.9682825]]]},"crs":{"type":"EPSG","properties":{"code":"4326"}},"properties":{"id":"136141","length":"87.0416906610304","name":"\u0391\u03c7\u03b1\u03b9\u03ce\u03bd                                                                                                                                                                                                  "}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[23.7117977,37.9688206],[23.711485,37.9682825]]]},"crs":{"type":"EPSG","properties":{"code":"4326"}},"properties":{"id":"363455","length":"83.576978161306","name":"\u0394\u03b7\u03bc\u03bf\u03c6\u03ce\u03bd\u03c4\u03bf\u03c2                                                                                                                                                                                              "}}]}



I use these data except for the table to create a layer with the route on top of the map from Feature attribute .My question is i i use your method i would still be able to create the table with only the name and legth of the street and also create the layer from feature attribute ?
I hope to understand what i mean ..
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Dynamic table in javascript CPU intense

Posted 30 November 2012 - 03:21 PM

View Postmonopolis, on 30 November 2012 - 10:24 PM, said:

I hope to understand what i mean ..

not really. I meant to say that you create the HTML table on the server and send it back over.
Was This Post Helpful? 0
  • +
  • -

#7 monopolis  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 21-April 10

Re: Dynamic table in javascript CPU intense

Posted 30 November 2012 - 05:18 PM

Do you have any link to a tutorial on how to do this?
Thanks again
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Dynamic table in javascript CPU intense

Posted 01 December 2012 - 12:48 AM

I donít, sorry.

// I would do something along
$tab = "<table>";
$row = '<tr><td>%s</td><td>%s</td></tr>';
foreach ($data as $set)
{
    $tab .= sprintf($row, $set["a"], $set["b"]);
}
$tab .= "</table>";

echo $tab;

Was This Post Helpful? 1
  • +
  • -

#9 monopolis  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 21-April 10

Re: Dynamic table in javascript CPU intense

Posted 01 December 2012 - 06:11 AM

Quick question how do i get reference of this table to the html ?
Was This Post Helpful? 0
  • +
  • -

#10 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Dynamic table in javascript CPU intense

Posted 01 December 2012 - 08:00 AM

What do you mean "get reference"? What Dormilich's code does is echo it using PHP, you don't need to reference it?
Was This Post Helpful? 0
  • +
  • -

#11 monopolis  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 21-April 10

Re: Dynamic table in javascript CPU intense

Posted 01 December 2012 - 08:56 AM

Yes i figure it out after playing with the code :-) . And I just managed to make it work and with my code so thank you all for your help I appreciate that
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1