X Axis DateTime labels 8 even gridlines

[James Daresta]

I am taking a existing chart that was done previously in Dundas chart control and migrating it to the Telerik chart control. So far I can easily replicate the data area display, but I am having trouble with the labels and gridlines on the x-axis. Basically I need to take a start and end date and always display the grid with 8 total gridlines (9 if you include the Y axis) based on hours. So for example in the attached files I have one with a start date of 2/23/2011 and end date of 3/1/2011. I need that range basically as best as possible divided by 8. This needs to happen even if dealing with just a single day as seen in the attached file for just 2/23/2011. With my old Dundas code I did this by taking the total hour difference between the dates, loop adding an hour to the value until it was divisble by 8 evenly and then setting the X axis to that as the intervale and telling the grid its X axis was an intervaltype of hours. Here is the code.

//Take the start and end dates and set them for the start and end X axis
this.Chart1.ChartAreas[0].AxisX.Minimum = initialDate.ToOADate();
this.Chart1.ChartAreas[0].AxisX.Maximum = completeDate.ToOADate();
//Get the total hours between start and end
double totalSeriesHours = completeDate.Subtract(initialDate).TotalHours;
//We will be showing 8 grid lines on the X axis so keep adding an hour until we can divide evenly by 8
if (totalSeriesHours > 0)
{
    // How many hours per label?
    while ((totalSeriesHours % 8.0) != 0)
    {
        totalSeriesHours++;
    }
    totalSeriesHours /= 8;
}
//Set the X axis lines, labels and tick marks.
this.Chart1.ChartAreas[0].AxisX.MajorGrid.IntervalType = DateTimeIntervalType.Hours;
this.Chart1.ChartAreas[0].AxisX.MajorGrid.Interval = totalSeriesHours;
this.Chart1.ChartAreas[0].AxisX.LabelStyle.IntervalType = DateTimeIntervalType.Hours;
this.Chart1.ChartAreas[0].AxisX.LabelStyle.Interval = totalSeriesHours;
this.Chart1.ChartAreas[0].AxisX.MajorTickMark.Interval = totalSeriesHours;
this.Chart1.ChartAreas[0].AxisX.MajorTickMark.IntervalType = DateTimeIntervalType.Hours;

Now I realize that the Telerik chart works differently so I have tried many things to replicate the same process in its workings. I set the Label step to 8. I set ranges, etc. No matter what I do I cannot get it to display 8 grid lines. I just get labels for the start and end dates. I tried code like below to no avail. I am think I am missing something in my understanding on how the labels and grid lines work. Side note. I need the labels to be on the grid lines. Thanks in advance.

double minDateValue = initialDate.ToOADate();
double maxDateValue = completeDate.ToOADate();
double totalSeriesHours = maxDateValue - minDateValue;
//We will be showing 8 grid lines on the X axis so keep adding an hour until we can divide evenly by 8
if (totalSeriesHours > 0)
{
    // How many hours per label?
    while ((totalSeriesHours % 8.0) != 0)
    {
        totalSeriesHours++;
    }
    totalSeriesHours /= 8;
}
//Take the start and end dates and set them for the start and end X axis
this.Chart1.PlotArea.XAxis.IsZeroBased = false;
this.Chart1.PlotArea.XAxis.AutoScale = false;
this.Chart1.PlotArea.XAxis.AddRange(minDateValue, maxDateValue, totalSeriesHours);

[Ves]

Hello James,

I can see you are already familiar with the OLEAutomation date equivalent, used in RadChart. However, RadChart does not expose IntervalType property, so you need to configure the Step property manually (by setting it directly or by sending the correct value as third parameter of AddRange method). The ToOADate method returns a double value, representing the number of days passed since 30.12.1899. Thus, two values with a difference of 1 represent DateTime values with 1 day timespan.

Here is an example -- if you configure the X axis like this xAxis.AddRange(min, max, 5) this would mean, that you will get a tick for every 5-th day, that would be suitable for showing 20 or 30 days, but not for 2-3-4 days. So, if you need to configure the chart to display values for 24 hours (that is one day, represented by 1 as a double value) with 8 steps along the X axis you can do it like this: xAxis.AddRange(min, max, 1/8d) i.e. the step is 3  hours with 8 of them available for the entire period.

The labels matching the ticks: you can set the XAxis.LayoutMode property to ChartAxisLayoutMode.Normal. You can find more details about layout mode in this help topic.


Best regards,
Ves
the Telerik team

[James Daresta]

Thanks for explaing the Step increment. I think that was what my problem was. I did not realize it was days and kept trying to set the step as 8 thinking it would just evenly put the grid lines with 8. Thanks again.

[Brant]

I have a similar issue that you have put me on the right track on, but I am still missing something to get it right.  My data is a time increment from 0 seconds to 15 minutes.  I need to show the Xaxis in 30 second increments.  The data look like below:

0
0:10
0:15
0:20
0:25


How do I get the Xaxis to show 30 second increments from 0 to 15 minutes?

Thanks in advanced for your help.

Brant

[Ves]

Hello Brant,

In this case you would need to calculate the 30-seconds timespan in OLEAutomation equivalent:

double thirtySecondsTimeSpan = 1d/24/120;

that is 1 day -- 24 hours -- 60 minutes. Than take half of it.

So the axis configuration should look like this:

RadChart1.PlotArea.XAxis.AutoScale = false;
RadChart1.PlotArea.XAxis.AddRange(min, max, thiftySecondsTimeSpan);

Where min and max are the OLEAutomation equivalents of your minimum and maximum DateTime values. Note, that your ChartSeriesItems should have their XValue property set correctly -- again, that should be the double value retrieved by ToOADate method. You can find a similar example here.

Best regards,
Ves
the Telerik team