Rank 2
Iron
Iron
Iron
I am trying to implement a RangeBarSeries chart where time in y axis and date in x axis . The time here will be total minutes ranged against.
Example 1876 to 18:30 but only for label purpose and not for actual calculation.
Image 2
4 Answers, 1 is accepted
Yes, RangeBarSeries also would be appropriate.
RangeBarSeries rangeBarSeries = new RangeBarSeries();
rangeBarSeries.DataPoints.Add(new RangeDataPoint(10, 7, DateTime.Now.Date));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(6, 3, DateTime.Now.Date));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(8, 5, DateTime.Now.Date.AddDays(1)));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(12, 9, DateTime.Now.Date.AddDays(2)));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(8, 7, DateTime.Now.Date.AddDays(3)));
this.radChartView1.Series.Add(rangeBarSeries);As to the question about the bars with identical category, you can use ChartSeriesCombineMode.None:
rangeBarSeries.CombineMode = ChartSeriesCombineMode.None;
Importing a chart as a grid cell can be simulated by using different approaches:
- Use the export to image functionality and apply the exported chart image to the respective grid cells: https://docs.telerik.com/devtools/winforms/controls/chartview/features/export
- Build custom cells and host any element you need to have in the cell: https://docs.telerik.com/devtools/winforms/controls/gridview/cells/creating-custom-cells
- GridViewSparklineColumn allows a Sparkline chart to be displayed in the RadGridView: https://docs.telerik.com/devtools/winforms/controls/gridview/columns/column-types/gridviewsparklinecolumn
I believe that the third approach would be most appropriate. Feel free to use this approach which suits your requirements best.
Regards,
Dess | Tech Support Engineer, Sr.
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/.
Rank 2
Iron
Iron
Iron
this.radChartView1.AreaType = ChartAreaType.Cartesian;
this.radChartView1.ChartElement.AngleTransform = 90;
RangeBarSeries rangeBarSeries = new RangeBarSeries();
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/17/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/17/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "5/17/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 30, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/18/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/18/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "5/19/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes - 89, DateTime.Now.TimeOfDay.TotalMinutes - 100, "5/20/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/20/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes - 79, DateTime.Now.TimeOfDay.TotalMinutes - 90, "5/21/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/21/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/22/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/22/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/23/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/23/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/25/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/24/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/26/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/26/2021"));
CategoricalAxis horizontalAxis = new CategoricalAxis();
horizontalAxis.Title = "Summarization Days";
horizontalAxis.ClipLabels = false;
horizontalAxis.LabelRotationAngle = -90;
horizontalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
horizontalAxis.PlotMode = AxisPlotMode.BetweenTicks;
rangeBarSeries.HorizontalAxis = horizontalAxis;
this.radChartView1.Series.Add(rangeBarSeries);
rangeBarSeries.CombineMode = ChartSeriesCombineMode.None;
rangeBarSeries.VerticalAxis.ClipLabels = false;
rangeBarSeries.VerticalAxis.LabelRotationAngle = -90;
rangeBarSeries.VerticalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
LinearAxis verticalAxis = radChartView1.Axes.Get<LinearAxis>(1);
verticalAxis.Minimum = 0;
verticalAxis.Maximum = 1380;
verticalAxis.MajorStep = 60;
Rank 2
Iron
Iron
Iron
Hello,
Following the provided code snippet I have obtained the following result:
The bar thickness depends on the values on the axis, e.g. in this case the ticks steps seems to be 60. Thus, the range bar will be rendered according to the range values it occupies. It is possible to change the vertical axis' Minimum/Maximum and MajorStep and this make the range bars look bigger. The following screenshot illustrates the result if you change the Minimum-Maximum to 400-700 and keep the MajorStep 60:
An alternative approach to enlarge the range bars is to use scale breaks : https://docs.telerik.com/devtools/winforms/controls/chartview/axes/scale-breaks
If you are experiencing any undesired result when using the GridViewSparklineColumn in RadGridView, it would be greatly appreciated if you can submit a support ticket from your Telerik account and provide more details about the exact setup that you have and what is the exact goal that you are trying to achieve. Thus, we would be able to get better understanding of the precise case and provide further assistance.
Rank 2
Iron
Iron
Iron
LinearAxis verticalAxis = radChartView1.Axes.Get<LinearAxis>(1);
verticalAxis.Minimum = 720;
verticalAxis.Maximum = 1000;
verticalAxis.MajorStep = 60;
rangeBarSeries.CombineMode = ChartSeriesCombineMode.None;
Screenshot attached (CombineMode Not Working.png)
It seems that the screenshot was not properly attached in the comment but I have noticed that the most original post was edited with the following image:
Indeed, the picture illustrates that the range bars on the same date are combined:
That is why I will post a new answer with my sample project attached so you can have a look at it and see how your setup differs from it.
Hello,
Thank you for updating the original post and including a screenshot. Indeed, using a custom IFormatProvider is the appropriate way to control what text to be displayed for the labels on the vertical/horizontal axis. Additional information is available here: https://docs.telerik.com/devtools/winforms/controls/chartview/customization/custom-labels-textI believe that the CandlestickSeries would be applicable for achieving your goal as you can define a range (start-end) of values for the data point: https://docs.telerik.com/devtools/winforms/controls/chartview/series-types/ohlc-and-candlestick
You can use the grid lines for the vertical lines across the chart view to separate the different dates: https://docs.telerik.com/devtools/winforms/controls/chartview/features/chart-grid
If the vertical axis stores numeric values which are formatted by using a custom label format provider, RadChartView will use a LinearAxis. It allows you to specify the Minimum/Maximum as well as the MajorStep: https://docs.telerik.com/devtools/winforms/controls/chartview/axes/linear Thus, you can control the visible range in the labels
However, I am not sure what do you mean with "rotate the axis by 90 degrees(not the labels)". I have prepared a sample code snippet for your reference. Please have a look at the below screenshot with the achieved result and specify how exactly you need to rotate the axis:
public RadForm1()
{
InitializeComponent();
CandlestickSeries candlestickSeries = new CandlestickSeries();
candlestickSeries.DataPoints.Add(new OhlcDataPoint(10, 10, 7, 7, DateTime.Now));
candlestickSeries.DataPoints.Add(new OhlcDataPoint(8, 8, 5, 5, DateTime.Now.AddDays(1)));
candlestickSeries.DataPoints.Add(new OhlcDataPoint(12, 12, 9, 9, DateTime.Now.AddDays(2)));
candlestickSeries.DataPoints.Add(new OhlcDataPoint(8, 8, 7, 7, DateTime.Now.AddDays(3)));
this.radChartView1.Series.Add(candlestickSeries);
//you can implement your own label format provider for the vertical axis as well
candlestickSeries.HorizontalAxis.LabelFormatProvider = new MyFormatProvider();
((CategoricalAxis)candlestickSeries.HorizontalAxis).PlotMode = AxisPlotMode.BetweenTicks;
this.radChartView1.ShowGrid = true;
CartesianArea area = this.radChartView1.GetArea<CartesianArea>();
area.ShowGrid = true;
CartesianGrid grid = area.GetGrid<CartesianGrid>();
grid.DrawVerticalStripes = true;
grid.DrawHorizontalStripes = false;
}
public class MyFormatProvider : IFormatProvider, ICustomFormatter
{
public object GetFormat(Type formatType)
{
return this;
}
public string Format(string format, object arg, IFormatProvider formatProvider)
{
string s = arg.ToString();
DateTime date = DateTime.Now;
if (DateTime.TryParse(s, out date))
{
return date.ToString("MM/dd/yyyy");
}
return s;
}
}Note that RadChartView offers multiple axes which may be applicable for your case: https://docs.telerik.com/devtools/winforms/controls/chartview/axes/multiple-axes
I hope this information helps. If you need any further assistance please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Iron
Iron
Hello,
I believe that the inverse axis may fit the requirement you have. Please refer to the following help article:
https://docs.telerik.com/devtools/winforms/controls/chartview/axes/inverse-axis
An alternative solution is to use the axis alignment: https://docs.telerik.com/devtools/winforms/controls/chartview/axes/axis-alignment Thus, you can adjust more precisely the start position of the axis.
Feel free to use this approach which suits your scenario best.
Rank 2
Iron
Iron
Iron
It seems that the CandlestickSeries doesn't support inversed axis. However, in order to switch the vertical and horizontal axis, you can rotate the chart as follows and achieve the dates on the left and the numerical values on the top:
public RadForm1()
{
InitializeComponent();
CandlestickSeries candlestickSeries = new CandlestickSeries();
candlestickSeries.DataPoints.Add(new OhlcDataPoint(10, 10, 7, 7, DateTime.Now));
candlestickSeries.DataPoints.Add(new OhlcDataPoint(8, 8, 5, 5, DateTime.Now.AddDays(1)));
candlestickSeries.DataPoints.Add(new OhlcDataPoint(12, 12, 9, 9, DateTime.Now.AddDays(2)));
candlestickSeries.DataPoints.Add(new OhlcDataPoint(8, 8, 7, 7, DateTime.Now.AddDays(3)));
this.radChartView1.Series.Add(candlestickSeries);
//you can implement your own label format provider for the vertical axis as well
candlestickSeries.HorizontalAxis.LabelFormatProvider = new MyFormatProvider();
((CategoricalAxis)candlestickSeries.HorizontalAxis).PlotMode = AxisPlotMode.BetweenTicks;
this.radChartView1.ShowGrid = true;
CartesianArea area = this.radChartView1.GetArea<CartesianArea>();
area.ShowGrid = true;
CartesianGrid grid = area.GetGrid<CartesianGrid>();
grid.DrawVerticalStripes = true;
grid.DrawHorizontalStripes = false;
this.radChartView1.ChartElement.View.Margin = new Padding(40, 40, 40, 100);
this.radChartView1.ChartElement.AngleTransform = 90;
candlestickSeries.HorizontalAxis.ClipLabels = false;
candlestickSeries.HorizontalAxis.LabelRotationAngle = -90;
candlestickSeries.HorizontalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
candlestickSeries.VerticalAxis.ClipLabels = false;
candlestickSeries.VerticalAxis.LabelRotationAngle = -90;
candlestickSeries.VerticalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
}
public class MyFormatProvider : IFormatProvider, ICustomFormatter
{
public object GetFormat(Type formatType)
{
return this;
}
public string Format(string format, object arg, IFormatProvider formatProvider)
{
string s = arg.ToString();
DateTime date = DateTime.Now;
if (DateTime.TryParse(s, out date))
{
return date.ToString("MM/dd/yyyy");
}
return s;
}
}I believe that it would fit your scenario.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
Hi,
As I promised in my earlier comment, I am attaching the sample project which achieves the following result:
Before:
After:
Please give it a try and see what is the observed result on your end. Should you have further questions please let me know.
Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Iron
Iron
I have tested with version 2015.2.623 and obtained the following result:
The CombineMode was improved in 2016.2.503:
Here is the release notes for your reference:
I would highly encourage you to upgrade to as latest version as possible in order to benefit from all the introduced improvements and new features during the versions gap.
Rank 2
Iron
Iron
Iron
Update : I am able to go to that url now : https://www.telerik.com/support/whats-new/winforms/release-history/ui-for-winforms-r2-2016-(version-2016-2-503)
There is a missing bracket at the end of the link. Here is the updated one:
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
Hello,
Would it be possible to provide a screenshot of the expected result and what data exactly you have for populating the chart? Thus, we would get better understanding of the exact goal that you are trying to achieve and we would be able to provide further assistance. Thank you in advance.
I am looking forward to your reply.