読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

CSVファイルをテーブル付きのグラフにするjQuery plugin

JavaScript jQuery
<スポンサーリンク>

準備

以下のプラグインをダウンロードする。
■ccchart.js
ccchart.jsは以下のURLからダウンロードできる。
http://ccchart.com/

■csv2table.js
csv2table.jsは以下のURLからダウンロードできる。
https://code.google.com/p/leocenter/downloads/detail?name=jquery.csv2table-0.02-b-2.9.js&can=2&q=

以下のように、終値を並べたCSVデータを用意する。

月,1,2,3,4,5,6,7
DeNA,1880,1948,2138,2779,2555,2000,2600,2892
Mixi,1349,1322,1500,1652,1629,1680,1790
GREE,819,880,1005,1249,1163,1128,1360

一番上の行が、グラフの下の部分の目盛りになる。
一番左が、それぞれのグラフ化の対象。
文章だとわかりづらいので、結果を図で示すと、こうなる。

なかなかキレイだ。

上記のようなグラフを表示させるサンプルは以下の通り。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">

<title>CSVファイルを使用した表・グラフ</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.csv2table-0.02-b-4.3.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ccchart.com/js/ccchart.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<h1>CSVファイルを表やグラフに変換する</h1>


<button type="button" onClick="$('#table').csv2table('data/stock_value.csv',{
use: 'ccchart:line#canvas',
roundedUpMaxY: 0,
minY : 0,
title : 'type line'
});">表示</button>

<canvas id="canvas"></canvas>
<div id="table"></div>

</body>
</html>

なお、株価の四本値を表示したくて探してみた結果、Google Chartsというプラグインが使えそうなことに気付いた。
次は四本値を描くことにチャレンジしたい。
https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart

感謝のプログラミング

今回で感謝のプログラミングは【496時間目】
10000時間まで、あと【9504時間