Visualisation Google - Lignes multiples sur un AnnotatedTimeLine

Quelqu'un peut-il me donner un exemple simple d'une visualisation AnnotatedTimeLine? Tous les exemples que je peux trouver n'ont qu'une seule ligne, malgré le fait que les docs parlent de plusieurs lignes. Si vous vous sentez particulièrement aimable, vous pourriez me donner un exemple de ce à quoi ressemble un schéma de source de données (python) pour l'exemple.Visualisation Google - Lignes multiples sur un AnnotatedTimeLine

Merci d'avance.

Source

2009-11-22 user132262

Je peux répondre à moi-même maintenant:

<html> 
<head> 
    <title>Home</title> 
    <script src="http://www.google.com/jsapi?YOUR_KEY"></script> 
    <script type="text/javascript"> 
     google.load("jquery", "1"); 
     google.load("jqueryui", "1") 
     google.load('visualization', '1', {'packages':['annotatedtimeline']}); 

     google.setOnLoadCallback(init);; 

     function draw_timeline() { 
      var url = "http://YOUR_GOOGLE_DATA_SOURCE_CALL"; 
      var query = new google.visualization.Query(url); 
      query.send(callback_draw_timeline); 

      function callback_draw_timeline(response) { 
       if (response.isError()) { 
        alert("Error in query: " + response.getMessage()); 
        return; 
       }; 
       var data = response.getDataTable(); 
       var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('timeline')); 
       chart.draw(data, {title: 'Title'}); 
      }; 
     }; 

     function init() { 
      draw_timeline(); 
     }; 

    </script> 

    <link rel="stylesheet" href="main.css" type="text/css"> 
</head> 
<body> 
<div id="timeline" style='height: 600px; width=100%'>Timeline</div> 
</body></html>

Ensuite, dans la source de données:

schema = { 'time': ("datetime", "Time"), 
      'col1': ("number", 'Column_1'), 
      'col2': ("number", 'Column_2'), 
      'col3': ("number", 'Column_3') } 
data = [ { 'time': datetime(2009, 11, 24, 12, 31, 0), 'col1': 23, 'col2': 25, 'col3': 20 }, 
     { 'time': datetime(2009, 11, 24, 12, 32, 0), 'col1': 31, 'col2': 22, 'col3': 22 }, 
     { 'time': datetime(2009, 11, 24, 12, 33, 0), 'col1': 21, 'col2': 32, 'col3': 22 }, 
     ] 
data_table = gviz_api.DataTable(schema) 
data_table.LoadData(data) 
response.data += data_table.ToJSonResponse(columns_order=(order)) 
return response

Source

2009-11-24 13:08:33 user132262

Visualisation Google - Lignes multiples sur un AnnotatedTimeLine

Répondre

Questions connexes