Hace unos meses conocí SIMILE Timeline, un sistema que despues fue usado para crear BlogoEdad, en el que me aproveché de la funcionalidad de Timeline nos ofrece para mostrar la edad de los 1.715 bloggers registrados.
Ahora la gente de SIMILE, nos deleita con TimePlot, un sistema de gráficas para estadísticas muy elegante y vistosa que nos permite una gran personalización, una personalización tan interesante que nos permite además de los datos que conformarán la gráfica, insertar hitos que indicarán eventos concretos en una linea temporal formada por la gráfica. Osea que podremos tener una gráfica basada en tiempo a la que se le añadirán eventos que nos servirán de referencia para los datos obtenidos.
Todo ello, está desarrollado mediante una API en Javascript, realmente extensa que podemos usar de forma completamente gratis ya que se trata de un software open source.
Ejemplo
<html>
<head>
<script src="http://static.simile.mit.edu/timeplot/api/1.0/timeplot-api.js" type="text/javascript"></script>
<script type="text/javascript">
var timeplot;
function loadNow() {
var eventSource = new Timeplot.DefaultEventSource();
var eventSource2 = new Timeplot.DefaultEventSource();
var timeGeometry2 = new Timeplot.DefaultTimeGeometry({
gridColor: new Timeplot.Color("#000000"),
axisLabelsPlacement: "top"
});
var valueGeometry = new Timeplot.DefaultValueGeometry({
gridColor: "#000000",
min: 0,
max: 100
});
var plotInfo = [
Timeplot.createPlotInfo({
id: "plot1",
dataSource: new Timeplot.ColumnSource(eventSource,1),
timeGeometry: timeGeometry2,
valueGeometry: valueGeometry,
lineColor: "#ff0000",
fillColor: "#cc8080",
showValues: true
}),
Timeplot.createPlotInfo({
id: "plot2",
dataSource: new Timeplot.ColumnSource(eventSource,3),
timeGeometry: timeGeometry2,
valueGeometry: valueGeometry,
lineColor: "#D0A825",
showValues: true
}),
Timeplot.createPlotInfo({
id: "plot3",
timeGeometry: timeGeometry2,
eventSource: eventSource2,
lineColor: "#03212E"
})
];
timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
timeplot.loadText("data.txt", ",", eventSource);
timeplot.loadXML("events.xml", eventSource2);
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
timeplot.repaint();
}, 100);
}
}
</script>
</head>
<body>
<body onload="loadNow();" onresize="onResize();">
<div id="my-timeplot"></div>
</body>
</html>
5 comentarios, 1 referencias
+
#