JUMFlot plugin Candlestick

by cesutherland

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.time.js"></script>
<script src="http://jumjum123.github.io/JUMFlot/javascripts/JUMFlot.min.js"></script>
<div id="placeholder" style="width:500px; height:300px;"></div>

JavaScript

var prices1 = [
        [1167692400000, 61.05],
        [1167778800000, 58.32],
        [1167865200000, 57.35],
        [1167951600000, 56.31],
        [1168210800000, 55.55],
        [1168297200000, 55.64],
        [1168383600000, 54.02]
    ];

    var data1 =[ { data: prices1 } ];
    var options1 =  { xaxis: { mode: 'time' } };

	var p1 = $.plot($("#placeholder"), data1, options1);

	var dt = [ 
	    [1167692400000,50,52,49,52],
	    [1167778800000,51.5,53,51,53],
	    [1167865200000,52,52,51,54],
	    [1167951600000,51,49,47,53],
	    [1168210800000,48,44,42,48],
	    [1168297200000,45,55,45,55],
	    [1168383600000,53,57,45,58]
	];

	var lw = Date.UTC(0,0,0,12) - Date.UTC(0,0,0,0);
	var data2 = $.plot.candlestick.createCandlestick(
	    {data:dt,candlestick:{show:true,lineWidth:lw}});

	var options2 = {
	    series: {candlestick:{active:true}},
	    xaxis:  {mode:"time"}
	};
	var p2 = $.plot($("#placeholder"), data2, options2);