Visualisations multiples dans une page

J'utilise la bibliothèque python-visualization pour calculer la source de données. J'ai essayé de mettre plus d'une visualisation dans une seule page. Les deux sont des graphiques linéaires et les données proviennent d'une URL séparée pour chaque visualisation.Visualisations multiples dans une page

<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>

Datasources:

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",)))

Quand je rends la page que la première visualisation apparaît, la deuxième visualisation n'apparaît jamais. Est-ce que quelqu'un peut m'aider?

Source

2009-09-19 vignesh

Vous pouvez essayer quelque chose comme

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;   
    }; 
}

puis

//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();

Désolé, havn't moi-même testé, juste pensé que cela peut vous aider.

Et je vous conseille de charger à partir de Google jQuery.

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

Espérons que ça va vous aider :)

Source

2009-09-19 18:38:58

arriv moi aussi. La solution était que le serveur renvoie le paramètre reqId. Si vous avez deux visualisations sur la même page, l'une doit avoir l'ID reqId 0 et l'autre reqId 1. assurez-vous que le serveur renvoie correctement ces requêtes dans la réponse.

Si les deux réponses renvoient '0', alors une seule visualisation s'affichera (la première).

Source

2010-10-03 16:27:12

Visualisations multiples dans une page

Répondre

Questions connexes