OHLC Chart [Deprecated]

Easily monitor price movement over a period of time using OHLC chart. This is a financial chart common in stock trading.

How to display OHLC 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_ohlc

private void render()
{
    var canvas = new Bunifu.Dataviz.WinForms.BunifuDatavizAdvanced.Canvas();
    var datapoint = new Bunifu.Dataviz.WinForms.BunifuDatavizAdvanced.DataPoint(Bunifu.Dataviz.WinForms.BunifuDatavizAdvanced._type.Bunifu_ohlc);
    
    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);
    
}

In order to display OHLC 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

code that plots the vertical line:

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 base line and the bounds of the two limits. For example, the above line of code will create the following construction:

The coordinates in the middle (20 and 0) specify the bounds of the base line. The coordinates on the margins (10 and 5) specify the limits. If we change those 2 coordinates between them (10 <-> 5), the effect will be the following:

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.

Last updated