: jqPlot ローソク足 サンプル //出力
//JavaScript //////
jQuery の jqPlot プラグインで作るローソク足(ローソクチャート)

/////
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta  content="width=device-width, initial-scale=1.0" name="viewport">
<title>
:
jqPlot ローソク足 サンプル </title>
<!--[if lt IE 9]>
<link                rel="stylesheet" type="text/css" href="/lab/css/ie.css"/><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<link  href="/lab/css/bootstrap.css" type="text/css" rel="stylesheet"><link  href="/lab/css/bootstrap-responsive.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link  href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.ohlcRenderer.min.js"></script>


//出力
<div id="jqPlot-sample" style="height: 300px; width: 500px;"></div>

//JavaScript
<script>
jQuery( function() {
    ohlc= [
        [ '2012-01-01 0:00AM', 62, 70, 57, 68 ],
        [ '2012-02-01 0:00AM', 70, 83, 68, 76 ],
        [ '2012-03-01 0:00AM', 75, 96, 72, 94 ],
        [ '2012-04-01 0:00AM', 93, 95, 72, 84 ],
        [ '2012-05-01 0:00AM', 85, 86, 67, 71 ],
        [ '2012-06-01 0:00AM', 75, 88, 75, 82 ]
    ]
    jQuery . jqplot(
        'jqPlot-sample',
        [
            ohlc
        ],
        {
            seriesDefaults: {
                renderer: jQuery . jqplot . OHLCRenderer,
                rendererOptions: {
                    candleStick: true
                }
            },
            axes:{
                xaxis:{
                    renderer: jQuery . jqplot . DateAxisRenderer,
                    min: '2011-12-01 0:00AM',
                    max: '2012-08-01 0:00AM',
                    tickInterval: '1 months',
                    tickOptions:{
                        formatString: '%B'
                    },
                }
            },
        }
    );
} );
</script>