This is a migrated thread and some comments may be shown as answers.

How to do make independent series in one ChartView without combined in WinForms?

6 Answers 19 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Johnny
Top achievements
Rank 1
Veteran
Johnny asked on 24 Dec 2020, 05:36 PM
I develop candlestick charts now. How to use Telerik UI for WinForms put candlestick series on the top and volume series on the bottom? (like 2020-12-24_16-38-06.png)

6 Answers, 1 is accepted

Sort by
0
Nadya
Telerik team
answered on 25 Dec 2020, 09:34 AM

Hello, Johnny,

Considering the provided picture it looks like that the different series are plotted in two different charts with different axes. The possible solution that I can suggest in order to achieve the look from the picture is to add two identical charts stacked one after the other. Thus, you can display the desired series and show the required data.

I prepared a sample project to demonstrate this approach. The result is illustrated below:

public RadForm1()
{
    InitializeComponent();
    CandlestickSeries candlestickSeries = new CandlestickSeries();
    candlestickSeries.DataPoints.Add(new OhlcDataPoint(10, 11, 7, 8, DateTime.Now));
    candlestickSeries.DataPoints.Add(new OhlcDataPoint(8, 9, 5, 9, DateTime.Now.AddDays(1)));
    candlestickSeries.DataPoints.Add(new OhlcDataPoint(12, 12, 9, 10, DateTime.Now.AddDays(2)));
    candlestickSeries.DataPoints.Add(new OhlcDataPoint(7, 10, 6, 9, DateTime.Now.AddDays(3)));
    this.radChartView1.Series.Add(candlestickSeries);
    this.radChartView1.View.Margin = new Padding(2);

    BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
    barSeries.Name = "Q1";
    barSeries.DataPoints.Add(new CategoricalDataPoint(177, "Harley"));
    barSeries.DataPoints.Add(new CategoricalDataPoint(128, "White"));
    barSeries.DataPoints.Add(new CategoricalDataPoint(143, "Smith"));
    barSeries.DataPoints.Add(new CategoricalDataPoint(111, "Jones"));
    barSeries.DataPoints.Add(new CategoricalDataPoint(118, "Marshall"));
    this.radChartView2.Series.Add(barSeries);
    this.radChartView2.View.Margin = new Padding(2);
}

I hope this information helps. Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Johnny
Top achievements
Rank 1
Veteran
answered on 25 Dec 2020, 09:46 AM
If using two charts, it difficult to align candlestick and volume point and difficult to share trackball and range selector. If using one chart, all issues on two charts are disappear.
0
Johnny
Top achievements
Rank 1
Veteran
answered on 25 Dec 2020, 09:54 AM
If it have more ways to arrange series in one chart, ChartView will be an awesome UI component in financial application.
0
Nadya
Telerik team
answered on 28 Dec 2020, 12:42 PM

Hello, Johnny,

Thank you for the provided feedback about RadChartView.

You can arrange different series in one chart. This can be done by adding the desired series to the Series collection of the chart. For example, it is possible to add CandlestickSeries and BarSeries in the same chart.

Note, Trackball and RadRangeSelector can be defined per one RadChartView control only. For example, you can not have one range selector for several charts. I modified my sample project by adding the  CandlestickSeries and BarSeries in the same chart. However, the visual result should not be the same as the one shown picture that you provided. Below you can find my sample project that demonstrates how you can use RadChartView with multiple series and Trackball and RadRangeSelector enabled.

 public RadForm1()
 {
     InitializeComponent();
     DateTime dt = DateTime.Now;
     CandlestickSeries candlestickSeries = new CandlestickSeries();
     candlestickSeries.DataPoints.Add(new OhlcDataPoint(10, 11, 7, 8, dt));
     candlestickSeries.DataPoints.Add(new OhlcDataPoint(18, 9, 5, 9, dt.AddDays(1)));
     candlestickSeries.DataPoints.Add(new OhlcDataPoint(12, 12, 9, 10, dt.AddDays(2)));
     candlestickSeries.DataPoints.Add(new OhlcDataPoint(13, 14, 6, 9, dt.AddDays(3)));
     this.radChartView1.Series.Add(candlestickSeries);

     CandlestickSeries candlestickSeries2 = new CandlestickSeries();
     candlestickSeries2.DataPoints.Add(new OhlcDataPoint(6, 7, 3, 4, dt));
     candlestickSeries2.DataPoints.Add(new OhlcDataPoint(6, 2, 3, 4, dt.AddDays(1)));
     candlestickSeries2.DataPoints.Add(new OhlcDataPoint(17, 18, 12, 13, dt.AddDays(2)));
     candlestickSeries2.DataPoints.Add(new OhlcDataPoint(7, 9, 5, 5, dt.AddDays(3)));
     this.radChartView1.Series.Add(candlestickSeries2);

     BarSeries barSeries = new BarSeries();
     barSeries.DataPoints.Add(new CategoricalDataPoint(1,dt));
     barSeries.DataPoints.Add(new CategoricalDataPoint(7,dt.AddDays(1)));
     barSeries.DataPoints.Add(new CategoricalDataPoint(5, dt.AddDays(2)));
     barSeries.DataPoints.Add(new CategoricalDataPoint(4, dt.AddDays(3)));
     this.radChartView1.Series.Add(barSeries);
     candlestickSeries.HorizontalAxis.LabelFitMode = AxisLabelFitMode.MultiLine;

     radChartView1.Controllers.Add(new ChartTrackballController());
     radChartView1.ShowTrackBall = true;
     this.radRangeSelector1.AssociatedControl = this.radChartView1;
 }

I hope this information is useful. If you have other questions please let me know.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Johnny
Top achievements
Rank 1
Veteran
answered on 28 Dec 2020, 02:24 PM
Thanks for your reply. But BarSeries values are unexpected. I think that is limitation on RadChartView for series arrangement.
 
0
Nadya
Telerik team
answered on 29 Dec 2020, 03:03 PM

Hello, Johnny,

Currently, this is the behavior that RadChartView offers. If it is not suitable for your case feel free to use two separate RadChartViews with associated range selector and a track bar for each chart.

If other customers have similar requests, we will consider this functionality change in the future improvement of the control. Thank you for your understanding.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ChartView
Asked by
Johnny
Top achievements
Rank 1
Veteran
Answers by
Nadya
Telerik team
Johnny
Top achievements
Rank 1
Veteran
Share this question
or