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

Multipane ?

3 Answers 66 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Ampz
Top achievements
Rank 1
Ampz asked on 07 Jan 2021, 06:31 PM
Hello again !, it's posible to set multiple panes on the chart ?? Thx !

3 Answers, 1 is accepted

Sort by
0
Nadya | Tech Support Engineer
Telerik team
answered on 08 Jan 2021, 02:35 PM

Hello, Ferbabdi,

According to the provided brief information, it is not clear what exactly you are trying to achieve. If you are asking for plotting different series on the same chart, I would like to note that this is possible to achieve this. RadChartView supports a number of series types – Bar, Line (Spline), Area (Spline Area), Scatter, Stock, Pie, Donut, Polar, Radar – and each of them can be used only with a certain area type - Categorical, Pie or Polar. You can combine the series if they use the same area. More information is available here: https://docs.telerik.com/devtools/winforms/controls/chartview/series-types/series-types 

However, if this is not what you are looking for it would be greatly appreciated if you can provide more information about what is your final goal. Thus, we would be able to assist you further.

I am looking forward to your reply.

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
Ampz
Top achievements
Rank 1
answered on 08 Jan 2021, 06:50 PM

Hello Nadya. 

Thanks for your time.

Wath i am asking, if is posible to set multiples panes, sharing a main common axis, but showing diferents values axies on each of them, where i can choose to plot series. like the pic i am attaching:

 

0
Nadya | Tech Support Engineer
Telerik team
answered on 12 Jan 2021, 02:37 PM

Hello, Fernando,

The provided picture is greatly appreciated.

The easiest way to achieve this look is to add three identical charts stacked one after the other. Each of them may have a different series type to plot the data and a similar horizontal axis that displays date-time objects. You can customize the color of labels, the ticks, the series color, and the vertical axis itself for each chart. The different series type you can find here: https://docs.telerik.com/devtools/winforms/controls/chartview/series-types/series-types 

As for displaying date-time values, RadChartView supports two DateTime axes out of the box – DateTimeCategorical and DateTimeContinuous. While the former is a categorical axis, the latter is a numerical one. They both sort their data chronologically. More information is available here: https://docs.telerik.com/devtools/winforms/controls/chartview/axes/datetime 

I prepared a sample example for your reference in order to demonstrate this approach. In my sample, I used LineSeries, AreaSeries, and BarSeries in order to achieve the look from the provided picture. Can you give it a try and see how it works. 

public RadForm1()
{
    InitializeComponent();

    LineSeries lineSeries = new LineSeries();
    lineSeries.PointSize = new SizeF(8, 8);
    lineSeries.Spline = true;
    lineSeries.ShowLabels = true;
    lineSeries.DataPoints.Add(new CategoricalDataPoint(6, DateTime.Now));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(10, DateTime.Now.AddDays(1)));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(7, DateTime.Now.AddDays(2)));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(8, DateTime.Now.AddDays(3)));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(15, DateTime.Now.AddDays(4)));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(9, DateTime.Now.AddDays(5)));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(12, DateTime.Now.AddDays(6)));
    DateTimeContinuousAxis continuousAxis = new DateTimeContinuousAxis();
    continuousAxis.ShowLabels = false;
    continuousAxis.TickLength = 0;
    continuousAxis.PlotMode = AxisPlotMode.BetweenTicks;
    continuousAxis.LabelFormat = "{0:d}";
    lineSeries.HorizontalAxis = continuousAxis;
    radChartView1.Series.Add(lineSeries);

    AreaSeries areaSeries = new AreaSeries();
    areaSeries.BackColor = Color.DarkRed;
    areaSeries.DataPoints.Add(new CategoricalDataPoint(6, DateTime.Now));
    areaSeries.DataPoints.Add(new CategoricalDataPoint(10, DateTime.Now.AddDays(1)));
    areaSeries.DataPoints.Add(new CategoricalDataPoint(7, DateTime.Now.AddDays(2)));
    areaSeries.DataPoints.Add(new CategoricalDataPoint(8, DateTime.Now.AddDays(3)));
    areaSeries.DataPoints.Add(new CategoricalDataPoint(15, DateTime.Now.AddDays(4)));
    areaSeries.DataPoints.Add(new CategoricalDataPoint(9, DateTime.Now.AddDays(5)));
    areaSeries.DataPoints.Add(new CategoricalDataPoint(12, DateTime.Now.AddDays(6)));
    this.radChartView2.Series.Add(areaSeries);
    CategoricalAxis horizontalAxis = radChartView2.Axes.Get<CategoricalAxis>(0);
    horizontalAxis.ShowLabels = false;
    horizontalAxis.TickLength = 0;

    BarSeries barSeries = new BarSeries();
    barSeries.BackColor = Color.Orange;
    barSeries.DataPoints.Add(new CategoricalDataPoint(6, DateTime.Now));
    barSeries.DataPoints.Add(new CategoricalDataPoint(10, DateTime.Now.AddDays(1)));
    barSeries.DataPoints.Add(new CategoricalDataPoint(7, DateTime.Now.AddDays(2)));
    barSeries.DataPoints.Add(new CategoricalDataPoint(8, DateTime.Now.AddDays(3)));
    barSeries.DataPoints.Add(new CategoricalDataPoint(15, DateTime.Now.AddDays(4)));
    barSeries.DataPoints.Add(new CategoricalDataPoint(9, DateTime.Now.AddDays(5)));
    barSeries.DataPoints.Add(new CategoricalDataPoint(12, DateTime.Now.AddDays(6)));
    this.radChartView3.Series.Add(barSeries);
    CategoricalAxis axis = radChartView3.Axes.Get<CategoricalAxis>(0);
    axis.PlotMode = AxisPlotMode.OnTicksPadded;

    this.radChartView1.ShowGrid = true;
    this.radChartView2.ShowGrid = true;
    this.radChartView3.ShowGrid = true;

    this.radChartView1.View.Margin = new Padding(2);
    this.radChartView2.View.Margin = new Padding(2);
    this.radChartView3.View.Margin = new Padding(2);
}

You can also check our Demo>>ChartView examples.

I hope this information helps. 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/.

Tags
ChartView
Asked by
Ampz
Top achievements
Rank 1
Answers by
Nadya | Tech Support Engineer
Telerik team
Ampz
Top achievements
Rank 1
Share this question
or