vendredi 28 mars 2014

Showing elements in JSON Array to the webpage


Vote count:

0




I am new to web development, and currently I am working on a simple dashboard that makes a query to a database and plotting graphs based on pairs of a timestamp and a value(num_requests).


As a preliminary step, I wanted to display the pairs to the webpage.


When I put all timestamps together and all num_requests together, they showed as concatenated strings, although it took minutes to show up.


However, as I make them pairs and pass them to Javascript function in the form of JSON array, it does not show up even after an hour.


Is there anything I am doing wrong? If so, how can I fix it?


FYI, The database is quite huge. It has more than a million rows.


The following snippet is the Python code where I make queries to a MySQL server and formatting the result into JSON.



c = cherrypy.thread_data.db.cursor()
query = """select refresh_time,
num_requests
from modeling_stats_hourly group by refresh_time limit 100"""
c.execute(query)
res = c.fetchall()
c.close()

jsres = [[str(x[0]), x[1]] for x in res]
return json.dumps(jsres)


The Javascript code below is where the data is passed in JSON form and is put to the web page.



xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
var myData = JSON.parse(xmlhttp.responseText);
var str = "";
for(var i = 0; i < myData.length; i++) {
str = str + 'timestamp: ' + myData[i][0] + ' and num_requests: ' + myData[i][1] + '\n';
}
document.getElementById("Data").innerHTML = str;
}
}


The whole blocks of codes that includes the forementioned parts are below.



class AjaxApp(object):
@cherrypy.expose
def index(self):
# Sample page that displays the number of records in "table"
# Open a cursor, using the DB connection for the current thread
return """
<html>
<head>
<script lang="javascript">
function GetData()
{
// code for IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
var myData = JSON.parse(xmlhttp.responseText);
var str = "";
for(var i = 0; i < myData.length; i++) {
str = str + 'timestamp: ' + myData[i][0] + ' and num_requests: ' + myData[i][1] + '\n';
}
document.getElementById("Data").innerHTML = str;
}
}

xmlhttp.open("GET","/submit222", true);
xmlhttp.send();
}
</script>
</head>
<body onload="GetData();">
<div id="Data">hi</div>
</body>
</html>
"""

@cherrypy.expose
def submit222(self):
# Sample page that displays the number of records in "table"
# Open a cursor, using the DB connection for the current thread
c = cherrypy.thread_data.db.cursor()
query = """select refresh_time,
num_requests
from modeling_stats_hourly group by refresh_time limit 100"""
c.execute(query)
res = c.fetchall()
c.close()

jsres = [[str(x[0]), x[1]] for x in res]
return json.dumps(jsres)


asked 1 min ago






Aucun commentaire:

Enregistrer un commentaire