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.
Any and all help will be greatly appreciated.
Kind regards.
Leon
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
3 Answers, 1 is accepted
0
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:
Regards,
Danail Vasilev
Telerik
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.
0
Leon
Top achievements
Rank 1
Rank 1
answered on 19 Feb 2014, 06:38 AM
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
but it doesn't seem to work.
Regards.
Leon Havenga
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;Regards.
Leon Havenga
0
Hi Leon,
Step and Skip properties are exposed by the LabelsAppearance element of the x-axis. For example:
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:
ASPX:
You can also find the full runnable VS example in the attached archive.
Regards,
Danail Vasilev
Telerik
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<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.