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.
3 Answers, 1 is accepted
Rank 1
Rank 1
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);}
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