This is a migrated thread and some comments may be shown as answers.

radHTMLchart - x axis item labels overlap

7 Answers 689 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Geert
Top achievements
Rank 1
Geert asked on 07 Mar 2013, 08:05 AM
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

7 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 11 Mar 2013, 02:07 PM
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.
0
AcsenseLuuk
Top achievements
Rank 1
answered on 12 Jun 2013, 09:49 PM
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!

0
Stamo Gochev
Telerik team
answered on 17 Jun 2013, 02:26 PM
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.
0
AcsenseLuuk
Top achievements
Rank 1
answered on 18 Jun 2013, 10:15 AM
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.
0
Stamo Gochev
Telerik team
answered on 20 Jun 2013, 10:15 AM
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.
0
Avs8686
Top achievements
Rank 1
answered on 10 Dec 2013, 06:37 PM
"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.
0
Avs8686
Top achievements
Rank 1
answered on 10 Dec 2013, 07:42 PM
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

Tags
Chart (HTML5)
Asked by
Geert
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
AcsenseLuuk
Top achievements
Rank 1
Stamo Gochev
Telerik team
Avs8686
Top achievements
Rank 1
Share this question
or