X Axis DateTime labels 8 even gridlines

Thread is closed for posting
5 posts, 1 answers
  1. James Daresta
    James Daresta avatar
    65 posts
    Member since:
    Sep 2009

    Posted 01 Mar 2011 Link to this post

    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);



  2.
  3. Answer
    Ves
    Admin
    Ves avatar
    2926 posts

    Posted 04 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. James Daresta
    James Daresta avatar
    65 posts
    Member since:
    Sep 2009

    Posted 04 Mar 2011 Link to this post

    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.
  7. Brant
    Brant avatar
    18 posts
    Member since:
    Oct 2008

    Posted 16 Jun 2011 Link to this post

    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
  8.
  9. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 21 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top