Google Visualization API
Chronoscope is an interactive time series chart that can be used as an embedded widget, a Google Gadget, or with the Google visualization API.
This page explains how to use Chronoscope with the Google Visualization API.
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script src="http://api.timepedia.org/gviz/"></script>
<script>
var c, table;
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'Markers');
data.addRows(6);
data.setValue(0, 0, new Date(2008, 1 ,1));
data.setValue(0, 1, 30000);
data.setValue(0, 2, 40645);
data.setValue(1, 0, new Date(2008, 1 ,2));
data.setValue(1, 1, 14045);
data.setValue(1, 2, 20374);
data.setValue(2, 0, new Date(2008, 1 ,3));
data.setValue(2, 1, 55022);
data.setValue(2, 2, 50766);
data.setValue(3, 0, new Date(2008, 1 ,4));
data.setValue(3, 1, 75284);
data.setValue(3, 2, 14334);
data.setValue(3, 3, 'Ran out of stock on pens at 4pm');
data.setValue(4, 0, new Date(2008, 1 ,5));
data.setValue(4, 1, 46476);
data.setValue(4, 2, 56467);
data.setValue(4, 3, 'Bought 200k pens at 11am');
data.setValue(5, 0, new Date(2008, 1 ,6));
data.setValue(5, 1, 33322);
data.setValue(5, 2, 39463);
c = new chronoscope.ChronoscopeVisualization(document.getElementById('foo'));
google.visualization.events.addListener(c, 'select', function(f) {
var sel = c.getSelection();
table.setSelection(sel);
})
c.draw(data, { legend: "false", overview: "false"});
table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
google.visualization.events.addListener(table, 'select', function() {
var sel = table.getSelection();
c.setSelection([{row: sel[0].row, col: 1}]);
})
}
function onChronoscopeLoaded() {
google.load("visualization", "1", {packages:["table"], callback: drawVisualization});
}
</script>
</head>
<body>
<div id="foo" style="width: 600px; height: 400px"></div>
<div id="table_div"></div>
<input type="submit" onClick="c.setSelection([{col: 2, row: 3}])" value="Click Me">
</body>
</html>
You can load the visualization using synchronous, or asynchronous techniques. Due to a shortcoming in Internet Explorer at the moment which breaks synchronous loads of our visualization, we recommend asynchronous loading. The following is an example of synchronous loading.
<head>
<script src="http://www.google.com/jsapi"></script>
<script src="http://api.timepedia.org/gviz"></script>
<script>
google.load("visualization", "1");
google.setOnLoadCallback(drawVisualization);
var chrono;
function drawVisualization() {
// legible axis labels
chronoscope.Chronoscope.setFontBookRendering(true);
// the div in the body that will be replaced with a chart
chronoscopeDivID = "chart";
// create visualization
var chrono = new chronoscope.ChronoscopeVisualization(document.getElementById(chronoscopeDivID));
var data = new google.visualization.DataTable();
// now load your data into the data table
// headers are the first row, data in the rest, see example above
// render chart
chrono.draw(data, { legend: "true", overview: "true"});
}
</script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px"></div>
But the example you see above uses asynchronous loading kicked off from an "onChronoscopeLoaded" function.
<head>
<script src="http://www.google.com/jsapi"></script>
<script src="http://api.timepedia.org/gviz"></script>
<script>
var chrono;
function drawVisualization() {
// legible axis labels
chronoscope.Chronoscope.setFontBookRendering(true);
// the div in the body that will be replaced with a chart
chronoscopeDivID = "chart";
// create visualization
var chrono = new chronoscope.ChronoscopeVisualization(document.getElementById(chronoscopeDivID));
var data = new google.visualization.DataTable();
// now load your data into the data table
// headers are the first row, data in the rest, see example above
// render chart
chrono.draw(data, { legend: "true", overview: "true"});
}
function onChronoscopeLoaded() {
google.load("visualization", "1", {packages:["table"], callback: drawVisualization});
}
</script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px"></div>
Chronoscope expects the time values to be in the first column of the DataTable with a type of 'date'. Columns following column 0 can either be number or string columns. A number column becomes a separate timeseries. A column of strings with a header matching the string "Markers" binds to the preceding data column to the left, placing the contents of the cells as popup annotations on the chart. The title of number columns are used as legend labels. If the title contains a string in parenthesis, it's used to assign the values units, like $ or meters. Columns with identical units share the same y-axis. For example, columns oil (gallons) and milk (gallons) would share the (gallons) axis.
From the example above:
chrono.draw(data, { legend: "true", overview: "true"});
- legend
true show a legend on the chart (this is the default)false do not show a legend on the chart - overview
true show an overview below the chart (this is the default)false do not show a chart overview - style
clean clean style, simple colors, white backgroundgfinance the style inspired by Google Financebluegradient blue gradient style
- draw(data, opts)
- setSelection(array)
- getSelection()
- chronoscope.ChronoscopeVisualization.microformatToDataTable(tableId)
The select event is the only event supported right now. As laid out in the Google Visualization API overview, the select event triggers when the user selects data within the chart as well as methods getSelection and setSelection.
getSelection- an array of the selected cells, i.e. an array in which each element is an object with properties
row and column and these are indexes of rows and columns in the DataTable. If only row is specified, the selected element is a row. If only column is specified, the selected element is a column.
- for example:
selectedCells = chart.getSelection();
setSelection- an array of cells to select
- for example:
chart.setSelection([{col: 2, row: 3}, {col: 4, row:2}]);
microformatToDataTable(tableId)- tableId is the ID attribute of an HTML table formatted according to the Chronoscope Microformat syntax
- This static method parses an HTML table found in the current document and returns a GViz DataTable. If the table does not correctly adhere to the Chronoscope Microformat syntax, an exception will be thrown with details as to where parsing fails. Example:
var dataTable = chronoscope.ChronoscopeVisualization.microformatToDataTable("mydata");
From the example:
google.visualization.events.addListener(chrono, 'select', function() {
var sel = chrono.getSelection();
alert("someone selected row="+sel[0].row+", col="+sel[0].col);
})
and
<input type="submit" onClick="chrono.setSelection([{col: 2, row: 3}])" value="Click Me">
We do not retain any data other than standard web traffic analytics data. In a future version we'll offer an option where people can publish data they wish to share, in which case data meant to be shared would be retained.
