Skip days on x-Axis labels

4 posts, 0 answers
  1. Leon
    Leon avatar
    11 posts
    Member since:
    Jan 2014

    Posted 18 Feb 2014 Link to this post

    Hi.

    I am trying to get my x-Axis such that it skips a few days on the labels, such as on RadHTMLChart demo page.  Please advise on how I can achieve this.  Below is a snippet of my code currently.

    I get the data from a list containing values and dates.

    chrtPerformance.PlotArea.Series.Clear();
    chrtPerformance.PlotArea.XAxis.Type = AxisType.Date;
    chrtPerformance.PlotArea.XAxis.BaseUnit = DateTimeBaseUnit.Months;
    chrtPerformance.PlotArea.XAxis.LabelsAppearance.DataFormatString = "m";
    chrtPerformance.PlotArea.XAxis.LabelsAppearance.RotationAngle = 270;
    chrtPerformance.PlotArea.XAxis.DataLabelsField = "BatchDate";
     
    string type = Settings[NTConstants.CONST_CHART_TYPE].ToString();
    if (type == "Area")
    {
        var seriesA = new AreaSeries();
        var seriesB = new AreaSeries();
        seriesA.DataFieldY = "CashValue";
        seriesB.DataFieldY = "InstrumentValue";
        seriesA.TooltipsAppearance.ClientTemplate = "#=dataItem.CashValue#, Cash Value";
        seriesB.TooltipsAppearance.ClientTemplate = "#=dataItem.InstrumentValue#, Instrument Value, #=dataItem.BatchDate#";
        seriesA.LabelsAppearance.Visible = false;
        seriesB.LabelsAppearance.Visible = false;
        seriesA.MissingValues = MissingValuesBehavior.Interpolate;
        seriesB.MissingValues = MissingValuesBehavior.Interpolate;
        chrtPerformance.PlotArea.Series.Add(seriesA);
        chrtPerformance.PlotArea.Series.Add(seriesB);
    }

    Any and all help will be greatly appreciated.

    Kind regards.
    Leon
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 18 Feb 2014 Link to this post

    Hello Leon,

    You can skip the first k labels on the x-axis from rendering through the XAxis.LabelsAppearance.Skip property. You can also control the step through which labels will be rendered on the x-axis through the XAxis.LabelsAppearance.Step property. For example:
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="20" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="50" />
                        <telerik:CategorySeriesItem Y="50" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
            <XAxis>
                <LabelsAppearance Skip="1" Step="2"></LabelsAppearance>
                <Items>
                    <telerik:AxisItem LabelText="item 1" />
                    <telerik:AxisItem LabelText="item 2" />
                    <telerik:AxisItem LabelText="item 3" />
                    <telerik:AxisItem LabelText="item 4" />
                    <telerik:AxisItem LabelText="item 5" />
                    <telerik:AxisItem LabelText="item 6" />
                </Items>
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>





    Regards,
    Danail Vasilev
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Leon
    Leon avatar
    11 posts
    Member since:
    Jan 2014

    Posted 19 Feb 2014 in reply to Danail Vasilev Link to this post

    Hi Danail.

    Problem is that I am dynamically creating the axis for the chart, as I have multiple sets of data (chosen by a dropdown that I need to display).  Thus I cannot staticly set the step and skip, as I need to be able to choose days, and months on the axis.

    Furthermore, I tried using 
    chrtPerformance.PlotArea.XAxis.skip = 1;
    but it doesn't seem to work.

    Regards.
    Leon Havenga

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 21 Feb 2014 Link to this post

    Hi Leon,

    Step and Skip properties are exposed by the LabelsAppearance element of the x-axis. For example:
    RadHtmlChart1.PlotArea.XAxis.LabelsAppearance.Skip = 1;

    I can suggest that you set these properties only when particular condition is met either on the server, as illustrated above, or on the client through the chartObject. For example:
    JavaScript:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.categoryAxis.labels.skip = 2;
                chart._chartObject.options.categoryAxis.labels.step = 2;
                chart.repaint();
            }
        </script>
    </telerik:RadCodeBlock
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="20" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="50" />
                        <telerik:CategorySeriesItem Y="50" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
            <XAxis>
                <LabelsAppearance></LabelsAppearance>
                <Items>
                    <telerik:AxisItem LabelText="item 1" />
                    <telerik:AxisItem LabelText="item 2" />
                    <telerik:AxisItem LabelText="item 3" />
                    <telerik:AxisItem LabelText="item 4" />
                    <telerik:AxisItem LabelText="item 5" />
                    <telerik:AxisItem LabelText="item 6" />
                </Items>
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>

    You can also find the full runnable VS example in the attached archive.

    Regards,
    Danail Vasilev
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top