« fake or not fake | main | how the world visits her dream »
October 23, 2007
lessons in timeplot
■ SLG . . . . . Slugging Percentage
■ OBP . . . . . On Base Percentage
■ AVG . . . . . Batting Average
ichiro's career in Japan & MLB
statistics as of oct. 2007
# a sequence of work steps
1. link to timeplot's javascript api code & csv file
2. add 2 event handlers to the body element
3. configure your plot by setting parameters in a script block ...
# sample code & 2 linx within
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 onLoad(){
var eventSource = new Timeplot.DefaultEventSource();
var timeGeometry = new Timeplot.DefaultTimeGeometry({
gridColor: new Timeplot.Color("#000000"),
axisLabelsPlacement: "top"
});
var valueGeometry = new Timeplot.DefaultValueGeometry({
gridColor: "#000000",
min: 0.1,
max: 0.6
});
var plotInfo = [
Timeplot.createPlotInfo({
id: "plot1",
dataSource: new Timeplot.ColumnSource(eventSource,1),
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: "#aaffaa",
showValues: true
}),
Timeplot.createPlotInfo({
id: "plot2",
dataSource: new Timeplot.ColumnSource(eventSource,2),
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: "#aaaaff",
showValues: true
}),
Timeplot.createPlotInfo({
id: "plot3",
dataSource: new Timeplot.ColumnSource(eventSource,3),
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: "#ffaaaa",
showValues: true
})
];
timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
timeplot.loadText("test.txt", ",", eventSource);
}
var resizeTimerID = null;
function onResize(){
if (resizeTimerID == null){
resizeTimerID = window.setTimeout(function(){
resizeTimerID = null;
timeplot.repaint();
}, 100);
}
}
</script>
<title>april snow</title>
</head>
<body onload="onLoad();" onresize="onResize();">
<div id="my-timeplot" style="width:300px; height:150px;"></div>
</body>
</html>
posted by fuyubi @ 4:17 PM
Trackback
trackback url for this entry
http://aprilsnow.ciao.jp/mt/mt-tb.cgi/72
It took me some time to be able to go through the entire responses, but I truly loved your write-up. It showed to be beneficial if you ask me and I am sure to all the commenters in this article! It certainly is great when you can not only be educated, but additionally involved! Thanks.
posted by Limas Sweed Jersey : January 7, 2012 4:08 PM
Hmm. Is it true? :-)
posted by flashplayer : July 5, 2009 5:11 PM