Categorical Chart - Custom X-Axis Label

3 posts, 0 answers
  1. Geoffrey
    Geoffrey avatar
    23 posts
    Member since:
    Mar 2011

    Posted 08 Nov 2012 Link to this post

    Hi,

    I made a categorical chart with a bar series definition and a line series definition. The x-axis label always seems to be the category name. How can I change it to something else? I have a custom class with various properties such as XValue, YValue, XCategory and Label. I have tried a few different things as suggested in other posts on the forum, but they don't seem to work and the item on the x-axis is always labelled according to the category.

    I have tried setting the item label format in the series mapping (I tried #LABEL and "#DATAITEM.Label") and I have added the item mappings as well, but it still shows the XCategory instead of the label.

    var seriesDefinition = new BarSeriesDefinition
                {
                    ShowItemLabels = false,
                    ShowItemToolTips = true,
                    ItemToolTipFormat = "#DATAITEM.Label",
                    ItemLabelFormat = "#DATAITEM.Label",
                    EmptyPointBehavior = emptyPointBehavior
                };

    seriesMapping.ItemMappings.Add(new ItemMapping("XValue", DataPointMember.XValue));
    seriesMapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue));            
    seriesMapping.ItemMappings.Add(new ItemMapping("XCategory", DataPointMember.XCategory));
    seriesMapping.ItemMappings.Add(new ItemMapping("Label", DataPointMember.Label));

    I have also tried the following:

    chart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "#DATAITEM.Label"; and chart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "#LABEL"; 

    Any help would be appreciated.
  2. Geoffrey
    Geoffrey avatar
    23 posts
    Member since:
    Mar 2011

    Posted 08 Nov 2012 Link to this post

    I have made a sample application that I used to do some testing and illustrate what I'm trying to achieve. I don't need the x category values but I put them in for testing. The attached image shows how the chart must look like, but the x axis must be labelled according to the item's labels, not 1 & 2. I would prefer not to have to use x category linked to label in a series mapping for this because it would complicate my actual program that I need to use the chart in quite a bit.

    Here is the content of the sample application:

    public MainWindow()
            {
                InitializeComponent();


                var pointsList = new List<List<DataPoint>>();


                //add bar chart points
                var barPoints = new List<DataPoint>();
                barPoints.Add(new DataPoint { XValue = 1, YValue = 30, Label = "Bar", XCategory = "a" });
                barPoints.Add(new DataPoint { XValue = 2, YValue = 35, Label = "Bar", XCategory = "b" });
                pointsList.Add(barPoints);


                //add bar chart definition and series mapping
                var barSeriesDefinition = new BarSeriesDefinition();
                AddSeriesMapping(pointsList, barSeriesDefinition);


                //add line chart points
                var linePoints = new List<DataPoint>();
                linePoints.Add(new DataPoint { XValue = 1, YValue = 40, Label = "Line a", XCategory = "a" });
                linePoints.Add(new DataPoint { XValue = 2, YValue = 45, Label = "Line a", XCategory = "b" });
                pointsList.Add(linePoints);


                //add line chart definition and series mapping
                var lineSeriesDefinition = new LineSeriesDefinition();
                AddSeriesMapping(pointsList, lineSeriesDefinition);


                //add line chart points
                linePoints = new List<DataPoint>();
                linePoints.Add(new DataPoint { XValue = 1, YValue = 50, Label = "Line b", XCategory = "a" });
                linePoints.Add(new DataPoint { XValue = 2, YValue = 55, Label = "Line b", XCategory = "b" });
                pointsList.Add(linePoints);


                //add line chart definition and series mapping
                lineSeriesDefinition = new LineSeriesDefinition();
                AddSeriesMapping(pointsList, lineSeriesDefinition);


                //chart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "#LABEL";
                chart.ItemsSource = pointsList;
            }


            private void AddSeriesMapping(List<List<DataPoint>> pointsList, SeriesDefinition seriesDefinition)
            {
                var seriesMapping = new SeriesMapping
                {
                    SeriesDefinition = seriesDefinition
                };
                seriesMapping.ItemMappings.Add(new ItemMapping("XValue", DataPointMember.XValue));
                seriesMapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue));
                //seriesMapping.ItemMappings.Add(new ItemMapping("XCategory", DataPointMember.XCategory));
                //seriesMapping.ItemMappings.Add(new ItemMapping("Label", DataPointMember.Label));
                //seriesMapping.ItemMappings.Add(new ItemMapping("Label", DataPointMember.XCategory));
                seriesMapping.CollectionIndex = pointsList.Count - 1;
                chart.SeriesMappings.Add(seriesMapping);
            }
  3. UI for WPF is Visual Studio 2017 Ready
  4. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 13 Nov 2012 Link to this post

    Hi Geoffrey,

    The RadChart's axes have two modes - categorical and numerical. In numerical mode, the series associated with the axis are positioned  according their XValue (of their data points) which should be a number or DateTime. Note that all of the series associated with the axis should have only XValue ItemMapping in their SeriesMapping (and not XCategory), because otherwise the chart will be confused if it has to use the XValue to position data points on the axis or XCategory. For example: 
    SeriesMapping seriesMapping = new SeriesMapping();
    seriesMapping.SeriesDefinition = new LineSeriesDefinition();
    seriesMapping.ItemMappings.Add(
     new ItemMapping {DataPointMember=DataPointMember.XValue, FieldName = "XVal" });
    seriesMapping.ItemMappings.Add(
     new ItemMapping {DataPointMember=DataPointMember.YValue, FieldName = "YVal" });
    seriesMapping.ItemsSource = new List<PlotInfo>
    {
        new PlotInfo {XVal = 0.3, YVal = 13},
        new PlotInfo {XVal = 2.8, YVal = 8},
        new PlotInfo {XVal = 3.3, YVal = 18},
        new PlotInfo {XVal = 7.3, YVal = 15},
    };
     
    this.RadChart1.SeriesMappings.Add(seriesMapping);

    In the categorical mode the chart will position the items on equal distance from one another (as if the x axis is not continuous, but behaving like slot collection - each item sits on its own slot) and will display an axis label per each item. This label is actually the the XCategory DataPointMember. There are no restrictions to the type. If it is different than string, int or DateTime then the default string from
    DataItem.[associated_with_XCategory_property].ToString() is displayed. Example: 
    SeriesMapping seriesMapping = new SeriesMapping();
    seriesMapping.SeriesDefinition = new LineSeriesDefinition();
    seriesMapping.ItemMappings.Add(
        new ItemMapping { DataPointMember = DataPointMember.XCategory,
            FieldName = "Category" });
    seriesMapping.ItemMappings.Add(
        new ItemMapping { DataPointMember = DataPointMember.YValue,
            FieldName = "YVal" });
    seriesMapping.ItemsSource = new List<PlotInfo>
    {
        new PlotInfo {Cateogry = "Cateogry A", YVal = 13},
        new PlotInfo {Cateogry = "Cateogry B", YVal = 8},
        new PlotInfo {Cateogry = "Cateogry C", YVal = 18},
        new PlotInfo {Cateogry = "Cateogry D", YVal = 15},
    };
     
    this.RadChart1.SeriesMappings.Add(seriesMapping);
    Note that if you want the axis to be in categorical mode, all of the series associated with it should have only XCategory item mapping.

    If you want the XCategory value to be taken from a different member of your business object just change the FieldName to the property you want to use - for example "Label".
    The DefaultLabelFormat property of the axis is used only when the axis is in numerical mode for formatting numbers or DateTime values. From the more complex RadChart specific format expressions only the #VAL is applicable (for example #VAL{C2}).

    I hope this helps.
     
    Greetings,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top