Date Axis - daily data, monthly ticks

4 posts, 0 answers
  1. dan
    dan avatar
    11 posts
    Member since:
    Jul 2017

    Posted 07 Sep 2017 Link to this post

    I would like to show a time series over 6 months with a line chart and daily data points (so roughly 180 points).  But I would only like to show tick lines (and labels) for the first of each month.  If I use BaseUnit="Months" I only get one data point per month displayed.  If I don't, I can't seem to suppress the tickmarks for each day which gets overly crowded.  

    A simple example of what I'm going for attached.

    I imagine I'm missing something simple but can't see it.  Would appreciate any advice.  Thanks.

     

     

  2. dan
    dan avatar
    11 posts
    Member since:
    Jul 2017

    Posted 07 Sep 2017 in reply to dan Link to this post

    Rereading this, I realize I probably meant gridlines rather than ticklines.  But the image shows what I'm trying to do.  Thanks again.
  3. dan
    dan avatar
    11 posts
    Member since:
    Jul 2017

    Posted 08 Sep 2017 Link to this post

    I partially solved the problem.  I can show only the labels for the first day of each month with the code below.  But I would also like to show the corresponding vertical gridlines for those days.  Anyone know if that is possible programmatically in the same loop?  Thanks.

    -Dan

    AvgPriceChart.PlotArea.XAxis.Items.Clear();
    for (int i = 0; i < 180; i++)
    {
        AxisItem newAxisItem = new AxisItem();
        //show x-axis labels only for 1st day of each month
        DateTime dtx = dt.AddDays(-180 + i).Date;
        DateTime dtx2 = new DateTime(dtx.Year, dtx.Month, 1);
        if (dtx == dtx2)
        {
            string formattedLabelText = string.Format("{0:M/d}", dt.AddDays(-180 + i));
            newAxisItem.LabelText = formattedLabelText;
        }
        else
        {
            newAxisItem.LabelText = "";
        }
        AvgPriceChart.PlotArea.XAxis.Items.Add(newAxisItem);
    }
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5363 posts

    Posted 12 Sep 2017 Link to this post

    Hi Dan,

    I've answered your support ticket on this question and I am pasting my answer here for anyone else having a similar situation.

    The underlying Kendo Chart widget exposes a step for the major grid lines. This property is not exposed in the RadHtmlChart server wrapper, though, so you can try something like the code below to set the property to the kendo chart configuration which will redraw the chart with the new settings:

    <telerik:RadHtmlChart ID="AvgPriceChart" runat="server" Width="520" Height="320" Transitions="true">
            <ClientEvents OnLoad="OnLoad" />
        <Appearance>
            <FillStyle BackgroundColor="White" />
        </Appearance>
        <ChartTitle Text="Avg. Daily Price (Last 6 months)">
            <Appearance Align="Center" BackgroundColor="White" Position="Top"></Appearance>
        </ChartTitle>
        <PlotArea>
            <Appearance>
                <FillStyle BackgroundColor="#FFFFFF" />
            </Appearance>
            <Series>
                <telerik:LineSeries DataFieldY="AveragePrice" Name="">
                    <Appearance FillStyle-BackgroundColor="DarkBlue" />
                    <LineAppearance Width="2" />
                    <TooltipsAppearance Visible="true" BackgroundColor="White">
                        <ClientTemplate>
                                    #= kendo.format(\'{0:C2}\', dataItem.AveragePrice) #<br />
                                    #= kendo.format(\'{0:d}\', dataItem.dates) #
                        </ClientTemplate>
                    </TooltipsAppearance>
                    <LabelsAppearance Visible="false" />
                    <MarkersAppearance Visible="false" />
                </telerik:LineSeries>
            </Series>
            <XAxis DataLabelsField="dates" MajorTickType="Outside" MinorTickType="None" Type="Date" BaseUnit="Days" BaseUnitStep="1">
                <LabelsAppearance Visible="true" RotationAngle="0" Step="30" />
                <TitleAppearance Position="Center" RotationAngle="0" Text="" />
                <MinorGridLines Visible="false" />
            </XAxis>
            <YAxis>
                <LabelsAppearance Visible="true" DataFormatString="{0:C}" />
                <TitleAppearance Position="Center" RotationAngle="0" Text="Avg. Price" />
                <MinorGridLines Visible="false" />
            </YAxis>
        </PlotArea>
    </telerik:RadHtmlChart>
    <script>
        function OnLoad(htmlChart) {
            var kendoWidget = htmlChart.get_kendoWidget();
            var options = kendoWidget.options;
            options.categoryAxis.majorGridLines.step = 30;
            kendoWidget.setOptions(options);
        }
    </script>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            AvgPriceChart.DataSource = GetChartData();
            AvgPriceChart.DataBind();
        }
    }
     
    protected DataTable GetChartData()
    {
        DataTable tbl = new DataTable();
        tbl.Columns.Add(new DataColumn("AveragePrice", typeof(decimal)));
        tbl.Columns.Add(new DataColumn("dates", typeof(DateTime)));
        for (int i = 0; i < 181; i++)
        {
            tbl.Rows.Add(new object[] { i, DateTime.Now.AddDays(i) });
        }
     
        return tbl;
    }



    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Back to Top