radHTMLchart - x axis item labels overlap

8 posts, 0 answers
  1. Geert
    Geert avatar
    1 posts
    Member since:
    Feb 2012

    Posted 07 Mar 2013 Link to this post

    Hello,

    If we try to display a large amount of items in de radhtmlchart, the x axis item labels overlap and are unreadable. (see attachment)
    The size of the chart has to be this small because it is displayed within an iFrame.

    Is there a way to "alternate" the visibillity; e.g. the first label is visible, fitfth label is visible, 10th label is visible... and all others in between would be invisible so there would'nt be any overlapping.

    Or is there any other solution to such a problem? As mentioned before, width has to remain as is.

    Many thanks
  2.
  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 11 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. AcsenseLuuk
    AcsenseLuuk avatar
    3 posts
    Member since:
    May 2012

    Posted 12 Jun 2013 Link to this post

    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:

    // pseudo code
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("data"));
    tbl.Columns.Add(new DataColumn("tooltipy"));
    tbl.Columns.Add(new DataColumn("tooltipx"));
    tbl.Columns.Add(new DataColumn("xaxislabel"));
     
    int i = 0;
    foreach (string date in dates)
    {
        string datetext = " ";
        y = 20;
     
        if ((i % 7) == 0)
            datetext = date;
     
        tbl.Rows.Add(new object[] { y, y + " orders", date, datetext });
        i++;
    }

    .aspx:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000px" Height="235px">
        <PlotArea>
            <Series>
                <telerik:LineSeries Name="Test" MissingValues="Zero" DataFieldY="data">
                    <TooltipsAppearance BackgroundColor="#f0f0f0"
                        ClientTemplate="#=dataItem.tooltipy#<br />#=dataItem.tooltipx#" />
                    <Items>
                    </Items>
                </telerik:LineSeries>
            </Series>
            <XAxis MajorTickType="Outside" MinorTickType="None" DataLabelsField="xaxislabel">
                <LabelsAppearance RotationAngle="0" />
                <MinorGridLines Visible="false" />
                <MajorGridLines Visible="false" />
                <Items>
                </Items>
            </XAxis>
    ...

    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!

  7. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 17 Jun 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. AcsenseLuuk
    AcsenseLuuk avatar
    3 posts
    Member since:
    May 2012

    Posted 18 Jun 2013 Link to this post

    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.
  11. Stamo Gochev
    Admin
    Stamo Gochev avatar
    208 posts

    Posted 20 Jun 2013 Link to this post

    Hi,

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

    <TooltipsAppearance BackgroundColor="#f0f0f0"
        ClientTemplate="#=dataItem.tooltipy#<br /> #= kendo.format(\'{0:d}\', dataItem.tooltipx)#" />

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  13. Avs8686
    Avs8686 avatar
    12 posts
    Member since:
    Feb 2013

    Posted 10 Dec 2013 Link to this post

    "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.
  14.
  15. Avs8686
    Avs8686 avatar
    12 posts
    Member since:
    Feb 2013

    Posted 10 Dec 2013 Link to this post

    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.

    function OnSuccess(data) {
             
            var chart = $find('<%=RadHtmlChart1.ClientID %>');
            chart.set_dataSource(data.d);
            chart.set_transitions(true);
            chart.repaint();  
     
            // Hide labels?
            var parsedObj = JSON.parse(newGraphData); // Parse to an object for easy access to how many data items there are
            var itemCount = parsedObj.length;
            
            // In my case, I thought 60 was the upper limit before turning some labels off
            if (itemCount > 60) {
                 
                // The label fields are text elements.  Loop through all text elements in svg
                $("svg text").each(function (index) {
                    var value = $(this).text();
                    // Check to see if it's a date (an x-axis item in my case)
                    if (IsDate(value)) {
                        // Show labels every 7 days starting with the first data item
                        if (parseInt(index) % 7 != 1) {
                            $(this).css("display", "none");
                        }                   
                    }
                });
            }
        }

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