Hi ,
I am trying to create a page with 3 columns. Date and Percent are the first 2 columns . The 3rd column will be a range bar chart where the time span across 24 hours will be in x-axis (orientation to the top) and the date again will be on the left (we can hide the label) . It might not necessarily be a gridview , but if it is that would be great . Let me attach the mock , I tried to do the 2 columns separately and the chart separately but wanted to integrate it as a single grid .
Much appreciated for the help in advance.
Sample Code that i did to achieve the chart (Grid view is pretty straight forward and ignored in the below code):
private void LoadBarChart()
{
this.radChartView1.AreaType = ChartAreaType.Cartesian;
this.radChartView1.ChartElement.AngleTransform = 90;
RangeBarSeries rangeBarSeries = new RangeBarSeries("End Time", "Start Time", "Summarization Date");
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "6/8/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "6/8/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "6/8/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 30, DateTime.Now.TimeOfDay.TotalMinutes + 10, "6/7/2021"));
rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "6/7/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.VerticalAxis.LabelFormatProvider = new MyFormatProvider();
//rangeBarSeries.VerticalAxis.Title = "Time of the day";
rangeBarSeries.VerticalAxis.ClipLabels = false;
rangeBarSeries.VerticalAxis.LabelRotationAngle = -90;
rangeBarSeries.VerticalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
LinearAxis verticalAxis = radChartView1.Axes.Get<LinearAxis>(1);
verticalAxis.Minimum = 0; //Minutes 0:00
verticalAxis.Maximum = 1380; //Minutes 23:00
verticalAxis.MajorStep = 60; //60 minutes in an hour
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)
{
int totalminutes = Convert.ToInt32(arg);
TimeSpan timeSpan = TimeSpan.FromMinutes(totalminutes);
return timeSpan.ToString(@"hh\:mm");
}
}