2009-11-22 3 views
1

AnnotatedTimeLine 시각화의 간단한 예제를 제공 할 수 있습니까? 여러 줄을 말하는 문서에도 불구하고 찾을 수있는 모든 예제는 단 한 줄만 있습니다.Google 시각화 - AnnotatedTimeLine의 여러 행

Adn 당신이 특별히 친절하다고 느끼는 경우, 예를 들어 (파이썬) 데이터 소스 스키마의 예가 무엇인지 알 수 있습니다.

미리 감사드립니다.

답변

0

나는 지금 나 자신에 대답 할 수

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

을 그런 다음 데이터 소스 :

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 
관련 문제