ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。
一つのプロットでOHLC(Open, High, Low, Close)
それぞれ、Openは始値、Highは高値、Lowは安値、Closeは終値になります。
サンプル

スクリプト

<!-- グラフ表示に必要なスクリプト -->
<script src="jquery.min.js" type="text/javascript"></script>
<link href= "jquery.jqplot.min.css" type="text/css" rel="stylesheet">
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="excanvas.min.js" type="text/javascript"></script>
<!-- ローソク足チャートの表示に必要なプラグイン -->
<script src="plugins/jqplot.ohlcRenderer.min.js" type="text/javascript"></script>
<!-- 軸に日付を使用するのに必要なプラグイン -->
<script src="plugins/jqplot.dateAxisRenderer.min.js" type="text/javascript"></script>

実装

<div id="div1193"></div>
<script type="text/javascript">
$(document).ready(function(){

    // オプション
    options = {
        title:{ 
            text: '日経平均株価 推移'                // グラフのタイトル
        },
        axes:{                                       // 軸
            // 横軸(x軸)
            xaxis:{
                renderer: $.jqplot.DateAxisRenderer, // プラグイン
                min: '2008-09',                      // 軸開始の値
                max: '2013-12',                      // 軸終了の値
                tickOptions: {
                    formatString:'%Y/%m'             // 表示フォーマット
                },
                label:'month',                       // ラベル
            },
            // 縦軸(y軸)
            yaxis:{
                label: '日経平均株価(円)',            // ラベル
            }
        },
        series: [{
            renderer: $.jqplot.OHLCRenderer,
            rendererOptions:{
                candleStick:true
            }
        }]
    }

    // 表示データ
    data = [
        ['2008-10',11396.61,11456.64,6994.90,8576.98],
    ];

    // グラフ表示する#div, 表示データ, オプション
    $.jqplot( 'div1193', [data], options);
});
</script>

: 「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

: 実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちらスクリプト

: クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を