Google 可视化 - AnnotatedTimeLine 上的多行答案

【问题标题】：Google Visualization - Multiple lines on a AnnotatedTimeLineGoogle 可视化 - AnnotatedTimeLine 上的多行
【发布时间】：2009-11-22 15:20:47
【问题描述】：

谁能给我一个 AnnotatedTimeLine 可视化的简单示例？尽管文档谈论多行，但我能找到的所有示例都只有一行。

如果您感觉特别好，可以给我一个示例，说明该示例的 (python) 数据源架构是什么样的。

提前致谢。

【问题讨论】：

标签： javascript google-visualization

【解决方案1】：

我现在可以自己回答了：

<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

【讨论】：