radHTMLchart - x axis item labels overlap

Hi Geert,

In the current version of RadHtmlChart it is not possible to directly control the step of the categorical XAxes. However, such a feature request has already been logged as a PITS item here, so that you can monitor, comment or raise its priority by voting on it.

For the time being you can manually show text in the XAxis labels only for every n-th label and for the rest set empty string. You can find an example on how to do that in the attached archive

Note also that if you decide to use ScatterSeries and ScatterLineSeries, they use numerical XAxes, so they can handle the labeling of the XAxes when many Items are presented.

All the best,
Danail Vasilev
the Telerik team

Hello,

As of the Q2 2013 ASP.NET Ajax controls and thus, the (nice) DateTime axis support, the above solution to simulate a 'step' property does not work anymore. I tried the solution above yesterday with an older Telerik version (pre Q2) to only show a date on the x-axis every 7th day. I did this by using categories and setting the labels-in-between to an empty string, just as in your example zip file. That worked nicely.

As of the Q2 update, the DateTime axis (x-axis) sees my date fields (which I add as string, not as DateTime object) as DateTime objects and ignores the empty strings. Instead it prints dates while the y-value is not displayed. If I add, for example, a '-' before the date time value it behaves like before (but, as you may understand, I don't want to add '-' to my dates ;) ). Note: I am using ClientTemplate and a DataTable.

Code behind:

.aspx:
I tried setting the step property on the x-axis, but that also does not work (I know there is a PITS item on this).
Is there any other solution to hide some of the labels?
Or maybe a setting to force the date string not to be seen as a DateTime value, and thus get 'old' behaviour?

Thanks in advance!

Hello,

The desired behavior could be achieved by specifying the XAxis'  property Type="Category". This forces the XAxis to behave like a normal categorical axis and not as DateAxis, so the dates are actually interpreted as strings.

You can also find useful Date Axis help article as well as have a look at the modified version of your code in the attached page.

Regards,
Stamo Gochev
Telerik

Hello,

Thanks, that works great. Also very nice that the HTML charts are customizable now (markersize, linewidth, etc.).

One other question; how do I format (or prevent DateTime formatting) the string of '#=dataItem.tooltipx#' in the ClientTemplate? Although I add it as a string field, it is still interpreted as a DateTime (see screenshot). I could not find any quick solution in manuals/forums/etc.

Extra info (also see my previous post):

'tooltipx' is added to the DataTable as the third field (String date): 
tbl.Rows.Add(new object[] { y, y + " orders", date, datetext });

It is then used in the tooltip ClientTemplate:
ClientTemplate="#=dataItem.tooltipy#<br />#=dataItem.tooltipx#"

Thanks in advance.

Hi,

You can easily achieve the specified behavior by applying the format function inside the ClientTemplate like this:


Of course, you can choose any other format you want. You can also have a look at our help article about Formatting Numbers for  further details (especially the section about Formatting Labels and Tooltips using their ClientTemplate)..

Regards,
Stamo Gochev
Telerik

"For the time being you can manually show text in the XAxis labels only for every n-th label and for the rest set empty string. You can find an example on how to do that in the attached archive"

I don't suppose there's a way to do this on the client side?  I'm calling a web service in my application to get the data after page load.  A user can alter a start date and an end date for a day-by-day report to run. I already have the labels rotated 90 degrees, but if the user picks a date range of over 2 months, the x axis gets crowded in a hurry.

I was able to throw together some client side code to manually "turn off" x axis labels.  Here's how I did for anyone who needs to control this client side after fetching data asynchronously.  In my case, I had dates running along the x-axis but this should be easy to change for another data type.


The IsDate() function I borrowed from here: http://jquerybyexample.blogspot.com/2011/12/validate-date-using-jquery.html