グラフとイベントを併記できる沿革作成javascriptAPI「Timeplot」

数値の変化を時系列で追いつつ、その時々で何が起こったかを沿革のように示したいことがあります。
SimileTimeplotではグラフとイベントを併記できる沿革を作成できます。
timeplot

使用方法
head内に以下のスクリプトを明記します。
<script src="http://static.simile.mit.edu/timeplot/api/1.0/timeplot-api.js" type="text/javascript"></script>
続いて表示したい場所に
<div id="my-timeplot" style="height: 150px;"></div>
また、サンプルのようなものを作成したい場合、以下のような記述をします。
<script type="text/javascript">
var timeplot;
function onLoad() {
var eventSource = new Timeplot.DefaultEventSource();
var eventSource2 = new Timeplot.DefaultEventSource();
var timeGeometry = 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({ //1軸目の設定
id: "plot1",
dataSource: new Timeplot.ColumnSource(eventSource,1), //データの読み込み(eventSourceの1項目目)
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: "#ff0000", //線の色
fillColor: "#cc8080", //線より下の部分の色
showValues: true //数値を表示
}),
Timeplot.createPlotInfo({ //2軸目の設定
id: "plot2",
dataSource: new Timeplot.ColumnSource(eventSource,3), //データの読み込み(eventSourceの3項目目)
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: "#D0A825", //線の色
showValues: true
}),
Timeplot.createPlotInfo({ //3軸目の設定(イベント表記用)
id: "plot3",
timeGeometry: timeGeometry,
eventSource: eventSource2, //データの読み込み(eventSource2)
lineColor: "#03212E" //縦に表示される線の色
})
];
timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
timeplot.loadText("http://yourdomain/@@@@.txt", ",", eventSource);
timeplot.loadXML("http://yourdomain/@@@@.xml", eventSource2);
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
timeplot.repaint();
}, 100);
}
}
</script>

読み込むファイルの形式は、時間軸用にtxtファイルをイベント用にxmlファイルを用意します。
*これらのファイルはhtmlと同じディレクトリにおいてください。
時間軸用.txtサンプル
2007-06-11,29,66,5(年月日,数値1,数値2,数値3の順)
ここで言う数値とは、dataSource: new Timeplot.ColumnSource(eventSource,1), で設定している数値を意味します。
上の数値では1を指定しているので29が読み込まれます。
イベント用.xmlサンプル
<?xml version="1.0" encoding="UTF-8"?>
<data>
<event start="Jan 01 2001 08:00:00 GMT-0600" title="タイトル" link="リンク先URI">コンテンツ</event>
// 以下表示したい分
</data>

イベントの時間指定は、月 日付 年 時間 GMTでの表示の順となります。
グラフとイベントを併記できる沿革作成javascriptAPI「Timeplot」サンプル

sponsors

「グラフとイベントを併記できる沿革作成javascriptAPI「Timeplot」」をシェアする

記事作成:
記事URL:

TOP > > > グラフとイベントを併記できる沿革作成javascriptAPI「Timeplot」