將Cherrypy中的數據傳遞給Javascript前端圖表

我是一名軟件工程師，但從未做過任何Web開發。將Cherrypy中的數據傳遞給Javascript前端圖表

這一次，我負責製作儀表板來分析一些性能統計信息。

我第一次嘗試從零開始學習Django來完成這項任務，但最終只是浪費了數週時間。

我開始使用cherrypy構建一些小應用程序，接下來是我迄今爲止編寫的代碼。這是一些Ajax代碼和MySQL查詢代碼的大雜燴。

特別是，功能submit222()與這個項目不太相關。

在以下代碼中，成功連接和查詢數據庫。

res包含帶有時間戳（x軸）和請求數（y軸）的多行。

我想在res中傳遞這些數據，以便我可以在網頁上顯示時間戳和請求數。

使用谷歌圖（https://google-developers.appspot.com/chart/interactive/docs/gallery/annotationchart）

我沒有在這個時候工作視圖文件，我找不到合適的例子，指的是解決這個問題的圖表。

任何人都可以爲此視圖編寫一個簡單的Javascript代碼，該代碼需要res並構建圖表（或者如果這太多了，誰能解釋如何將res傳遞給Javascript）？

我真的試圖自己解決這個問題，沒有任何人的幫助，我不認爲我可以解決這個問題。

謝謝。

MEDIA_DIR = os.path.join(os.path.abspath("."), u"media") 

def connect(thread_index): 
    # Create a connection and store it in the current thread 
    cherrypy.thread_data.db = MySQLdb.connect(some db, some id, some password, 'storm') 

# Tell CherryPy to call "connect" for each thread, when it starts up 
cherrypy.engine.subscribe('start_thread', connect) 

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 
     c = cherrypy.thread_data.db.cursor() 
     query = """select refresh_time, 
          num_requests 
        from model group by refresh_time""" 
     c.execute(query) 
     res = c.fetchall() 
     c.close() 
     return open(os.path.join(MEDIA_DIR, u'index.html')) 

    @cherrypy.expose 
    def submit222(self, name): 
     cherrypy.response.headers['Content-Type'] = 'application/json' 
     return simplejson.dumps(dict(title="Hello, %s" % name)) 

config = {'/media': 
       {'tools.staticdir.on': True, 
       'tools.staticdir.dir': MEDIA_DIR, 
       } 
     } 

def open_page(): 
    webbrowser.open("http://127.0.0.1:8080/") 
cherrypy.engine.subscribe('start', open_page) 
cherrypy.tree.mount(AjaxApp(), '/', config=config) 
cherrypy.engine.start()

來源

2014-03-28 user2418202

那麼，讓我直接得到這個......你想通過阿賈克斯傳遞給前端？ –

這是正確的。 'res'是一個包含2列（時間戳和num_request）的二維數據結構，我想在前端繪製這些數據的圖表。 – user2418202

讓我知道，如果這不是你要去的。開始Web編程可能很難概念化客戶端和服務器端會發生什麼。掛在那裏！

import cherrypy 
import os 
import json 

MEDIA_DIR = os.path.join(os.path.abspath("."), "media") 


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 someData_notJSON = JSON.parse(xmlhttp.responseText); 
        document.getElementById('Data').innerHTML = 'asdf: ' + someData_notJSON.asdf + ' and asdfw: ' + someData_notJSON.asdfw; 
       } 
      } 

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

    @cherrypy.expose 
    def submit222(self): 
     # get data from db 
     res = { 'asdf': 1, 
       'asdfw' : 3 } 
     return json.dumps(res) 


config = {'/media': 
       {'tools.staticdir.on': True, 
       'tools.staticdir.dir': MEDIA_DIR, 
       } 
     } 

cherrypy.tree.mount(AjaxApp(), '/', config=config) 
cherrypy.engine.start()

希望這會有所幫助。

來源

2014-03-28 16:08:15

將Cherrypy中的數據傳遞給Javascript前端圖表

回答

相關問題