Help with chart X-axis label

7 posts, 1 answers
  1. James Molohon
    James Molohon avatar
    6 posts
    Member since:
    Jan 2009

    Posted 11 Feb 2011 Link to this post

    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
  2. Answer
    Sia
    Admin
    Sia avatar
    667 posts

    Posted 16 Feb 2011 Link to this post

    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
  3. DevCraft banner
  4. James Molohon
    James Molohon avatar
    6 posts
    Member since:
    Jan 2009

    Posted 17 Feb 2011 Link to this post

    Thanks, setting the item mapping from a XValue to an XCategory resolved my issue.
  5. Rahul
    Rahul avatar
    10 posts
    Member since:
    Mar 2013

    Posted 25 Mar 2013 Link to this post

    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
  6. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 28 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Rahul
    Rahul avatar
    10 posts
    Member since:
    Mar 2013

    Posted 28 Mar 2013 Link to this post

    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;

     

    }

  8. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 02 Apr 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner