How do you format the label in y axis from total minutes to hh:mm?
4 Answers 28 Views
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Om Pushkara deep asked on 18 May 2021, 01:12 PM | edited on 10 Jun 2021, 08:58 AM

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

 

Dess | Tech Support Engineer, Principal
Telerik team
commented on 18 May 2021, 02:14 PM

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.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 19 May 2021, 05:24 AM | edited

I think i was able to get it by using LabelFormatProvider and write my own format. Let me attach it and also i wanted to rotate the axis by 90 degrees(not the labels) nice to have :and spread the time across 0:00 to 23:00 if possible

4 Answers, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 31 May 2021, 09:58 AM
Hello,  

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/.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 31 May 2021, 10:53 AM

I tried it but still comes the same way . Let me paste the code for reference:

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;
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 31 May 2021, 10:55 AM

Thanks for the quick turn around. I see that the third approach is best but can we use the same bar series as above as a column for a single day . And also reduce the thickness of the time span . It now looks like a square . Is there any custom property to reduce the thickness?
Dess | Tech Support Engineer, Principal
Telerik team
commented on 02 Jun 2021, 07:40 AM

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.

 

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 10 Jun 2021, 08:57 AM | edited

I tried it but rangeBarSeries.CombineMode = ChartSeriesCombineMode.None; does not work . It just comes in different lines.

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)
Dess | Tech Support Engineer, Principal
Telerik team
commented on 11 Jun 2021, 10:03 AM

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.

 

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 19 May 2021, 08:46 AM

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-text 

I 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.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 19 May 2021, 11:29 AM

rotate the axis by 90 degrees(not the labels) means move the y axis to the top and the x axis to the left side
Dess | Tech Support Engineer, Principal
Telerik team
commented on 19 May 2021, 02:02 PM

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.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 27 May 2021, 09:42 AM

Thanks for the candle chart demo . But can you move 0,2,4,...14(y axis) to the top and the dates (x-axis) to left side using properties in telerik?
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 28 May 2021, 08:00 AM
Hello,  

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.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 28 May 2021, 09:40 AM | edited

Yes it does . Thanks a ton .
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 28 May 2021, 09:45 AM | edited

One final question. I see that if i give multiple data points for the same day . It comes as separate lines (attached pic : Image 2) . Can we make it to come on a single line. But one difference is I used RangeBarSeries . Is it possible in that chart model or candlesticks is the one to go . Just wanna know if its possible . Nothing major.
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 28 May 2021, 10:36 AM

To add upon i am having a gridview with date and percent . Can we add the above chart as third column with date as key . Thinking something interactive . But wanna know whether its doable
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 11 Jun 2021, 10:15 AM

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.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 11 Jun 2021, 10:39 AM | edited

I did try the solution from RadForm1.cs(Just copy pasted as it is from your solution to mine and commenting the rest) . It shows the result similar to "before" even though we have combine mode as none. One notable difference is i am running 2015 telerik whereas yours is 2021 version. Does it make any difference?
Dess | Tech Support Engineer, Principal
Telerik team
commented on 14 Jun 2021, 10:07 AM

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:

https://www.telerik.com/support/whats-new/winforms/release-history/ui-for-winforms-r2-2016-(version-2016-2-503

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.

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 14 Jun 2021, 10:53 AM | edited

Oh ok . The above page comes as page not found for me . I am logged in already though.

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)
Dess | Tech Support Engineer, Principal
Telerik team
commented on 14 Jun 2021, 11:16 AM

There is a missing bracket at the end of the link. Here is the updated one:

https://www.telerik.com/support/whats-new/winforms/release-history/ui-for-winforms-r2-2016-(version-2016-2-503) 

Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 14 Jun 2021, 05:38 PM

Thanks for letting me know. It seems we need to upgrade it but after some time by decision. Unless, can we use other combine mode to stack it one above the other and use white colour to fill up the gaps ?
Dess | Tech Support Engineer, Principal
Telerik team
commented on 16 Jun 2021, 10:30 AM

The CombineMode for the RangeBarSeries doesn't take effect in the rendering in versions older than 2016.2.503 no matter what value is set. Since there is a 5-years gap in the Telerik versions (the latest version and the one you are using), I would highly encourage you to upgrade to the latest version in order to benefit all the introduced improvements and new features.
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
commented on 16 Jun 2021, 10:51 AM

Yes sure will.Thanks once again.
Asked by
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or