在一個頁面中實現多個可視化

我正在使用python-visualization庫來計算數據源。我試圖在一個頁面中放置多個可視化文件。兩者都是折線圖，數據來自每個可視化對象的單獨URL。在一個頁面中實現多個可視化

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="/site_media/js/jquery-1.2.6.min.js"></script> 

    <script type="text/javascript"> 
     google.load('visualization', '1', { packages: ['linechart'] }); 

    </script> 
    <script type="text/javascript"> 
     var visualization1, visualization2; 
     function drawVisualization1() { 
      var query1 = new google.visualization.Query('/datasource1/'); 
      query1.send(handleQueryResponse1); 
      var query2 = new google.visualization.Query('/datasource2/'); 
      query2.send(handleQueryResponse2); 

     } 
     function handleQueryResponse1(response) { 
      if (response.isError()) { 
       alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
       return; 
      } 
      var data1 = response.getDataTable(); 
      visualization1 = new google.visualization.LineChart(document.getElementById('visualization1')); 
      var options = {}; 

      options['width'] = 600; 
      options['height'] = 200; 


      visualization1.draw(data1, options); 
     } 
     function handleQueryResponse2(response) { 
      if (response.isError()) { 
       alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
       return; 
      } 
      var data2 = response.getDataTable(); 
      visualization2 = new google.visualization.LineChart(document.getElementById('visualization2')); 
      var options = {}; 


      options['width'] = 600; 
      options['height'] = 200; 


      visualization2.draw(data2, options); 
     } 
     google.setOnLoadCallback(drawVisualization1); 

    </script> 



<body> 
    <div id="visualization1" class="span-15"><br /><br /></div> 
    <div id="visualization2" class="span-15"><br /><br /></div> 

</body>

數據源：

def datasource1(request): 
    data = [] 
    description = {"col1": ("number", "col1"),"col2": ("number", "col2"),}    
    for i in range(datetime.today().hour + 1): 
     data.append({"col1":datetime.today().hour,"col2":datetime.today().hour }) 
    data_table = gviz_api.DataTable(description) 
    data_table.LoadData(data) 
    return HttpResponse(data_table.ToJSonResponse(columns_order=("col1","col2",))) 



def datasource2(request): 
    data = [] 
    description = {"col1": ("number", "col1"),"col2": ("number", "col2"),}    
    for i in range(datetime.today().hour + 1): 
     data.append({"col1":datetime.today().hour,"col2":datetime.today().hour }) 
    data_table = gviz_api.DataTable(description) 
    data_table.LoadData(data) 
    return HttpResponse(data_table.ToJSonResponse(columns_order=("col1","col2",)))

當我只呈現第一可視化出現的頁面中，從來沒有出現在第二個可視化。有人可以幫我嗎？

來源

2009-09-19 vignesh

你可以嘗試像

function Charts(){ 
    var self = this; 
    self.chart = []; 
    self.settings = { width: 650, height: 250 }; 
    self.add = function(type, element, dataTable, options){ 
     self.chart.push({ 
      o: new google.visualization[type]($(element)[0]), 
      data: dataTable, 
      draw: function(){ 
       var settings = $.extend({}, self.settings, options); 
       this.o.draw(this.data, settings); 
      } 
     }); 
     return self; 
    }; 
    self.draw = function(){ 
     $.each(self.chart, function(i, chart){ 
      chart.draw(); 
     }); 
     return self;   
    }; 
}

然後

//var data1 = 'someDataTable', 
// data2 = 'anotherDataTable'; 

charts = new Charts(); 

var settings = {width:600, height:200 }; 

charts.add('LineChart', '#visualization1', settings, data1); 
charts.add('LineChart', '#visualization2', settings, data2); 

charts.draw();

對不起，沒有帶測試自己，只是覺得它可以幫助你。

而且我的建議也是從Google jQuery加載。

google.load("jquery", "1.2.6");

希望它會幫助你:)

來源

2009-09-19 18:38:58

發生在我身上了。解決方案是讓服務器返回reqId參數。如果您在同一頁上有兩個可視化對象，則其中一個將具有0，另一個需要1。請確保服務器在響應中正確返回這些請求。

如果兩個響應都返回'0'，則只有一個可視化呈現（第一個）。

來源

2010-10-03 16:27:12

在一個頁面中實現多個可視化

回答

相關問題