This is a migrated thread and some comments may be shown as answers.

Categorical Chart - Custom X-Axis Label

2 Answers 246 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Geoffrey
Top achievements
Rank 1
Geoffrey asked on 08 Nov 2012, 11:51 AM
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 Answers, 1 is accepted

Sort by
0
Geoffrey
Top achievements
Rank 1
answered on 08 Nov 2012, 02:07 PM
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);
        }
0
Petar Kirov
Telerik team
answered on 13 Nov 2012, 11:27 AM
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.

Tags
Chart
Asked by
Geoffrey
Top achievements
Rank 1
Answers by
Geoffrey
Top achievements
Rank 1
Petar Kirov
Telerik team
Share this question
or