Help with chart X-axis label

[James Molohon]

Forgive me for being a bit overwhelmed with all the chart settings.  I've looked for hours and haven't made much headway in solving my problem. I have a chart with date and number of widgets.  I would like the tick and label to appear directly below the point representing widgets.  for some reason I have more ticks than data points.  It's even worse when I zoom in.
Can you please tell me which settings will correct my problem?

Please see attached image file for example.
thanks,
James

[Sia]

Hello James Molohon,

In order to achieve the desired look I suggest you to use categorical chart, you can find more information about this topic here. In your case just map the category values to the XCategory property:

seriesMapping.ItemMappings.Add(new ItemMapping("XItem", DataPointMember.XCategory));

If you want to position every tick below a bar, you need to change the layout mode of the X axis. The default layout mode for our bar series is between and you can change it to normal by setting:

RadChart1.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Normal;

But have in mind that in that way your first and last bar will be clipped. Please check the attached image, try my tips and let me know if this solution works fits your needs.

Kind regards,
Sia
the Telerik team

[James Molohon]

Thanks, setting the item mapping from a XValue to an XCategory resolved my issue.

[Rahul]

I am aslo facing the same problem. But I cannot use XCategory as it groups the data by some category as I am plotting multiple seriesmappings on the same chart. Please help ASAP

[Evgenia]

Hello Rahul,

 Could you be more specific on how does the result chart looks like when you are using XCategory and how would you like it to look like? Two sample images demonstrating "the result" and the "expected result" would be of great help for us to better understand the specifics of your scenario.

Kind regards,
Evgenia
the Telerik team

[Rahul]

Hello Evgenia,
                          Thanks for replying. Any help in solving this  issue asap will be great. I am attaching two images. The one I have used XCategory which groups the dates for 2 items. Suppose if you have to items you want it to draw then it will group 2 items by date and if one of the item does not have value on that day then it puts that items values at the last which I do not want. Please take a look at the images and below code also.

 1> not desired one.
 2> desired result.


Below is the xaml--

<

 

 

telerik:RadChart Grid.Row="1" Grid.ColumnSpan="2" x:Name="radTimeGraph" ItemsSource="{Binding Job_TimeSeries,Mode=OneWay}"

 

 

 

Background="Transparent" BorderBrush="{x:Null}"

 

 

 

HorizontalAlignment="Left" Margin="0,0,5,0" SeriesMappings="{Binding ChartSeriesMapping}"

 

 

 

VerticalAlignment="Top"

 

 

 

Visibility="{Binding ChartVisibility}">

 

<

 

 

telerik:RadChart.DefaultView>

 

 

 

 

<telerik:ChartDefaultView ChartLegendPosition="Right">

 

 

 

 

<telerik:ChartDefaultView.ChartLegend>

 

 

 

 

<telerik:ChartLegend x:Name="chartLegend" Header="" UseAutoGeneratedItems="True"

 

 

 

MouseLeftButtonUp="chartLegend_MouseLeftButtonUp"

 

 

 

LegendItemStyle="{StaticResource LegendItemStyle}"

 

 

 

HorizontalAlignment="Center"

 

 

 

Background="Transparent" BorderBrush="{x:Null}" FontWeight="Bold"

 

 

 

/>

 

 

 

 

</telerik:ChartDefaultView.ChartLegend>

 

 

 

 

<telerik:ChartDefaultView.ChartArea>

 

 

 

 

<telerik:ChartArea LegendName="chartLegend" ItemToolTipOpening="ChartArea_ItemToolTipOpening">

 

 

 

 

<telerik:ChartArea.AxisY>

 

 

 

 

<telerik:AxisY Title="Elapse Mins. (in min)" StripLinesVisibility="Collapsed"/>

 

 

 

 

</telerik:ChartArea.AxisY>

 

 

 

 

<telerik:ChartArea.AxisX>

 

 

 

 

<telerik:AxisX Title="Cycle Date"

 

 

 

LabelRotationAngle="-70" DefaultLabelFormat="dd MMM" />

 

 

 

 

</telerik:ChartArea.AxisX>

 

 

 

 

</telerik:ChartArea>

 

 

 

 

</telerik:ChartDefaultView.ChartArea>

 

 

 

 

</telerik:ChartDefaultView>

 

 

 

 

</telerik:RadChart.DefaultView>

 

</

 

 

telerik:RadChart>

 

view model code--

private

 

 

void AddSeriesMapping()

 

{

ChartSeriesMapping =

 

new SeriesMappingCollection();

 

 

 

if (item_Series != null && item_Series.Count > 0)

 

{

 

 

foreach (var series_data in originalData)

 

{

ChartSeriesMapping.Add(GetSeries(series_data ));

}

}

}

 

private

 

 

SeriesMapping GetSeries(series_data  jobTS_data)

 

{

 

 

SeriesMapping series = new SeriesMapping();

 

series.ItemsSource = jobTS_data.TSData;

 

 

int range = (Convert.ToDateTime(EndDate) - Convert.ToDateTime(StartDate)).Days;

 

series.LegendLabel = jobTS_data.TSData.FirstOrDefault().UniqueJobIdParentID;

 

 

 

 

 

　

 

 

SeriesDefinition seriesDef = null;

 

 

 

switch (SelectedChartType)

 

{

 

 

case "Bar":

 

seriesDef =

 

new BarSeriesDefinition() { ShowItemLabels = Util.SHOW_ITEM_LABEL };

 

 

 

break;

 

 

 

case "Line":

 

seriesDef =

 

new LineSeriesDefinition()

 

{

ShowItemLabels =

 

Util.SHOW_ITEM_LABEL,

 

EmptyPointBehavior =

 

EmptyPointBehavior.Drop,

 

 

};

 

 

break;

 

 

 

case "Scatter":

 

seriesDef =

 

new ScatterSeriesDefinition()

 

{

ShowItemLabels =

 

Util.SHOW_ITEM_LABEL

 

};

 

 

break;

 

}

seriesDef.ShowItemToolTips =

 

true;

 

series.SeriesDefinition = seriesDef;

series.ItemMappings.Add(

 

new ItemMapping() { DataPointMember = DataPointMember.YValue, FieldName = "Minutes" });

 

series.ItemMappings.Add(

 

new ItemMapping() { DataPointMember = DataPointMember.XValue, FieldName = "Date"});

 

IsStatsExpanded =

 

false;

 

 

 

return series;

 

}

[Evgenia]

Hello Rahul,

 Thanks for the attachments. In fact what happens is that RadChart does not know how to sort a list of strings apart from the obvious (and mostly useless) alphabetical sorting. Therefore RadChart does not use any sorting at all. The XAxis labels are displayed in the same order as they occur in the data. If you need to enforce strict ordering of items on the XAxis, you'll need to sort the XCategories before providing them to the chart. For example you may convert them to DateTimes, sort them and then use ToString() to make each of them string again.

All the best,
Evgenia
the Telerik team