Candle stick chart is a form of financial chart that us used to show price movement in stocks, equity, foreign exchange, crypto currencies and so on. Each data in a candle stick chart has Open, Close, High and Low values in a given period of time.
How to display candle stick chart using Bunifu Dataviz
Simply locate Bunifu Dataviz control in your toolbox and drag it to the location on your form where you would like to display it.
We will use button click event handler to display our chart called render_candles_stick
privatevoidrender(){var canvas =newBunifu.Dataviz.WinForms.BunifuDatavizAdvanced.Canvas(); var datapoint = new Bunifu.Dataviz.WinForms.BunifuDatavizAdvanced.DataPoint(Bunifu.Dataviz.WinForms.BunifuDatavizAdvanced._type.Bunifu_candleStick);
datapoint.addxy("new Date (2002,11,10)",newJArray(16.23,17.99).ToString());datapoint.addxy("new Date (2002, 11, 9)",newJArray(15.95,19.25).ToString());datapoint.addxy("new Date (2002, 11, 8)",newJArray(11.30,16.88).ToString());datapoint.addxy("new Date (2002, 11, 7)",newJArray(13.29,14.28).ToString());datapoint.addxy("new Date (2002, 11, 6)",newJArray(15.23,16.45).ToString());datapoint.addxy("new Date (2002, 11, 5)",newJArray(13.70,16.50).ToString());datapoint.addxy("new Date (2002, 11, 4)",newJArray(17.50,19.00).ToString());datapoint.addxy("new Date (2002, 11, 3)",newJArray(19.50,20.85).ToString());datapoint.addxy("new Date (2002, 11, 2)",newJArray(20.07,21.44).ToString());datapoint.addxy("new Date (2002, 11, 1)",newJArray(25.00,26.70).ToString());canvas.addData(datapoint);bunifuDataViz1.Render(canvas);}
Private Sub render()
Dim canvas = New Bunifu.DataViz.WinForms.Canvas()
Dim datapoint = New Bunifu.DataViz.WinForms.DataPoint(Bunifu.DataViz.WinForms.BunifuDataViz._type.Bunifu_candleStick)
datapoint.addxy("new Date (2002,11,10)", New JArray(16.23, 17.99).ToString())
datapoint.addxy("new Date (2002, 11, 9)", New JArray(15.95, 19.25).ToString())
datapoint.addxy("new Date (2002, 11, 8)", New JArray(11.30, 16.88).ToString())
datapoint.addxy("new Date (2002, 11, 7)", New JArray(13.29, 14.28).ToString())
datapoint.addxy("new Date (2002, 11, 6)", New JArray(15.23, 16.45).ToString())
datapoint.addxy("new Date (2002, 11, 5)", New JArray(13.70, 16.50).ToString())
datapoint.addxy("new Date (2002, 11, 4)", New JArray(17.50, 19.00).ToString())
datapoint.addxy("new Date (2002, 11, 3)", New JArray(19.50, 20.85).ToString())
datapoint.addxy("new Date (2002, 11, 2)", New JArray(20.07, 21.44).ToString())
datapoint.addxy("new Date (2002, 11, 1)", New JArray(25.00, 26.70).ToString())
canvas.addData(datapoint)
bunifuDataViz1.Render(canvas)
End Sub
In order to display candle stick chart we need the following controls:
Bunifu Data Viz - This is the container for our chart
Bunifu Canvas - This is the middle layer between the data viz (container) and the dataset
Bunifu Data Point - This will contain the data that we want to represent as pairs of X and Y coordinates
Candle stick code
datapoint.addxy("new Date (2002, 11, 10)", new JArray(10, 20, 0, 5).ToString());
The first parameter of the addxy method is the X coordinate. The second parameter, is an array that specifies 2 dimensions: the bounds of the small line and the bounds of the big line. For example, the above line will create the following construction:
So the coordinates in the middle (20 and 0) specify the bounds of the small line. The coordinates on the margins (10 and 5) specify the bounds of the big line. If we change those 2 coordinates between them (10 <-> 5), the line will be empty, like that:
On running the code you should see something like this:
That's it!
We hope Bunifu Dataviz will help you bring out the best data visualization for your data in your application.
Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen.