Can someone give me a simple example of a AnnotatedTimeLine visualization? All the examples I can find have only one line, despite the docs talking about multiple lines.
Adn if you're feeling particularly kind, you might give me an example of what a (python) datasource schema looks like for the example.
Thanks in advance.
I can answer this myself now:
<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>
Then in the data source :
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