Jqplot chart plug-in learning yin and yang candle chart

I. Preparations

First, we need to download the required files from the official website:

Download from the official website (The pen selects the jquery.jqplot.1.0.8r1250.zip version.)

 

 

Then, you need to create a project based on your own situation and load the corresponding JS and CSS (This is because I created a file in vs2012 and the required JS and CSS files are stored in the JS and CSS folders. Please correct the loading path based on your own situation.).

 1 <link href="css/jquery.jqplot.min.css" rel="stylesheet" /> 2 <script src="js/jquery.min.js"></script> 3 <script src="js/jquery.jqplot.min.js"></script> 4      5 <!--[if lt IE 9]> 6 <script src="js/excanvas.min.js"></script> 7 <![endif]--> 8 <script src="js/jqplot.dateAxisRenderer.min.js"></script> 9 <script src="js/jqplot.ohlcRenderer.min.js"></script>10 <script src="js/jqplot.highlighter.min.js"></script>

The last three JS files are under plugins, which will be frequently used in the future, because they are the files required for many extension functions. In addition to referencing basic files, we also need to place a placeholder as a chart container. We need to place a div with the width of 500 and the height of 300:

1 <div id="chart" style="width:500px;height:300px;" ></div>

 

 

 

Ii. Text

Today, we will introduce a brand new chart, which is also favored by the industry. Its name is the yin and yang candle chart. Of course, we must first have a set of data, in this way, we can use jqplot for rendering. below is the data we need in the following example:

var ohlc = [  [‘06/15/2009 16:00:00‘, 136.01, 139.5, 134.53, 139.48],  [‘06/08/2009 16:00:00‘, 143.82, 144.56, 136.04, 136.97],  [‘06/01/2009 16:00:00‘, 136.47, 146.4, 136, 144.67],  [‘05/26/2009 16:00:00‘, 124.76, 135.9, 124.55, 135.81],  [‘05/18/2009 16:00:00‘, 123.73, 129.31, 121.57, 122.5],  [‘05/11/2009 16:00:00‘, 127.37, 130.96, 119.38, 122.42],  [‘05/04/2009 16:00:00‘, 128.24, 133.5, 126.26, 129.19],  [‘04/27/2009 16:00:00‘, 122.9, 127.95, 122.66, 127.24],  [‘04/20/2009 16:00:00‘, 121.73, 127.2, 118.6, 123.9],  [‘04/13/2009 16:00:00‘, 120.01, 124.25, 115.76, 123.42],  [‘04/06/2009 16:00:00‘, 114.94, 120, 113.28, 119.57],  [‘03/30/2009 16:00:00‘, 104.51, 116.13, 102.61, 115.99],  [‘03/23/2009 16:00:00‘, 102.71, 109.98, 101.75, 106.85],  [‘03/16/2009 16:00:00‘, 96.53, 103.48, 94.18, 101.59],  [‘03/09/2009 16:00:00‘, 84.18, 97.2, 82.57, 95.93],  [‘03/02/2009 16:00:00‘, 88.12, 92.77, 82.33, 85.3],  [‘02/23/2009 16:00:00‘, 91.65, 92.92, 86.51, 89.31],  [‘02/17/2009 16:00:00‘, 96.87, 97.04, 89, 91.2],  [‘02/09/2009 16:00:00‘, 100, 103, 95.77, 99.16],  [‘02/02/2009 16:00:00‘, 89.1, 100, 88.9, 99.72],  [‘01/26/2009 16:00:00‘, 88.86, 95, 88.3, 90.13],  [‘01/20/2009 16:00:00‘, 81.93, 90, 78.2, 88.36],  [‘01/12/2009 16:00:00‘, 90.46, 90.99, 80.05, 82.33],  [‘01/05/2009 16:00:00‘, 93.17, 97.17, 90.04, 90.58],  [‘12/29/2008 16:00:00‘, 86.52, 91.04, 84.72, 90.75],  [‘12/22/2008 16:00:00‘, 90.02, 90.03, 84.55, 85.81],  [‘12/15/2008 16:00:00‘, 95.99, 96.48, 88.02, 90],  [‘12/08/2008 16:00:00‘, 97.28, 103.6, 92.53, 98.27],  [‘12/01/2008 16:00:00‘, 91.3, 96.23, 86.5, 94],  [‘11/24/2008 16:00:00‘, 85.21, 95.25, 84.84, 92.67],  [‘11/17/2008 16:00:00‘, 88.48, 91.58, 79.14, 82.58],  [‘11/10/2008 16:00:00‘, 100.17, 100.4, 86.02, 90.24],  [‘11/03/2008 16:00:00‘, 105.93, 111.79, 95.72, 98.24],  [‘10/27/2008 16:00:00‘, 95.07, 112.19, 91.86, 107.59],  [‘10/20/2008 16:00:00‘, 99.78, 101.25, 90.11, 96.38],  [‘10/13/2008 16:00:00‘, 104.55, 116.4, 85.89, 97.4],  [‘10/06/2008 16:00:00‘, 91.96, 101.5, 85, 96.8],  [‘09/29/2008 16:00:00‘, 119.62, 119.68, 94.65, 97.07],  [‘09/22/2008 16:00:00‘, 139.94, 140.25, 123, 128.24],  [‘09/15/2008 16:00:00‘, 142.03, 147.69, 120.68, 140.91]            ];

 

 

With this set of data, we can start to complete the chart. Since it is a new chart, we need to use a new engine, I believe that readers who have learned a few articles will be able to find out what we need to use today.OhlcrendererEngine, while the X axis is still usedDteaxisrendererThe engine is time. The following code creates the chart shown in Figure 1.1:

1 $. jqplot ('chart', [ohlc], {2 title: "图", 3 seriesdefaults: {yaxis: "y2axis"}, 4 axes: {5 xaxis: {6 Renderer: $. jqplot. dateaxisrenderer, 7 tickoptions: {formatstring: "% B % E"}, 8 min: "09-01-2008", 9 MAX: "06-22-2009", 10 tickinterval: "5 weeks" 11}, 12 y2axis: {13 tickoptions: {formatstring: "$ % d"} 14} 15}, 16 series: [{Renderer: $. jqplot. ohlcrenderer}], 17 highlighter: {18 show: True, 19 showmarker: false, 20 tooltipaxes: "XY", 21 yvalues: 4,22 formatstring: '<Table class = "jqplot-highlighter"> 23 <tr> <TD> date: </TD> <TD> % S </TD> </tr> 24 <tr> <TD> open: </TD> <TD> % S </TD> </tr> 25 <tr> <TD> Hi: </TD> <TD> % S </TD> </tr> 26 <tr> <TD> low: </TD> <TD> % S </TD> </tr> 27 <tr> <TD> close: </TD> <TD> % S </TD> </tr> </table> '28} 29 });

 

 

WhereSeriesdefaultsThe data displayed on the Y axis is placed on the Y axis on the right. In the xaxis of the axes, Min and Max are used to specify the maximum and minimum dates displayed on the X axis.TickintervalThe interval is set to 6 weeks. Another new feature is that the prompt box format can be customized.HighlighterOfFormatstringIt is specified, but it is useless to specify the light. We also need to tell it how to present this custom prompt.TooltipaxesSpecifies that data is obtained and rendered from the X axis to the Y axis, and obtains a data fill from the X axis.FormatstringAnd use the Y axis to obtain four values in order.YvaluesSo that we can customize the prompt.

 

Fig 1.1

 

 

In this figure, each vertical line has two small horizontal bars, indicating the starting and closing prices respectively, while the two ends of the vertical line represent the lowest and highest prices, however, we can't intuitively see the starting and closing prices through this figure, so we can also specify another parameter to convert them from a small horizontal line to a rectangle, in this way, we can intuitively see the effect of Figure 1.2:

1 $. jqplot ('chart', [ohlc], {2 title: "图", 3 seriesdefaults: {yaxis: "y2axis"}, 4 axes: {5 xaxis: {6 Renderer: $. jqplot. dateaxisrenderer, 7 tickoptions: {formatstring: "% B % E"}, 8 min: "09-01-2008", 9 MAX: "06-22-2009", 10 tickinterval: "5 weeks" 11}, 12 y2axis: {13 tickoptions: {formatstring: "$ % d"} 14} 15}, 16 series: [{17 Renderer: $. jqplot. ohlcrenderer, 18 rendereroptions: {19 candlestick: true20} 21}], 22 highlighter: {23 show: True, 24 showmarker: false, 25 tooltipaxes: "XY", 26 yvalues: 4,27 formatstring: '<Table class = "jqplot-highlighter"> 28 <tr> <TD> date: </TD> <TD> % S </TD> </tr> 29 <tr> <TD> open: </TD> <TD> % S </TD> </tr> 30 <tr> <TD> Hi: </TD> <TD> % S </TD> </tr> 31 <tr> <TD> low: </TD> <TD> % S </TD> </tr> 32 <tr> <TD> close: </TD> <TD> % S </TD> </tr> </table> '33} 34 });

Here we just giveRendereroptionsOfCandlestickSet the attribute to true.

 

Fig 1.2

 

Jqplot chart plug-in learning yin and yang candle chart