Line Chart - Custom X-Axis Item Labels

[Geoffrey]

Hi,

I'm trying to make a line chart with multiple series with the Y-Axis being an integer value and the X-Axis being a date value. However, I need to display something custom for the X-Axis item labels - not the date. So far I have been able to do everything except to get the X-Axis item labels to show the custom label values. Any help would be appreciated.

Thanks.

[Petar Marchev]

Hello Geoffrey,

Just in case you have not spotted it - try to use the DefaultLabelFormat property of the axis. We will need more information on what is it that you need to display, so please contact us again explaining in more details.

Greetings,
Petar Marchev
the Telerik team

[Geoffrey]

Hi,

I have already tried various combinations of the DefaultLabelFormat without success. I will include a screenshot of what I'm trying to achieve. The x-axis labelled Time should display a b c d e as item labels for each point on the graph, but is currently not displaying anything. 

Here is the class I'm using to store the chart data:

public class ChartItem
    {
        public DateTime Time { get; set; }
        public double Value { get; set; }
        public string Label { get; set; }
    }

And the code I'm using:

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            try
            {
                InitLineChart();


                LineChartData = new List<List<ChartItem>>();


                var series1 = new List<ChartItem>();
                series1.Add(new ChartItem { Time = DateTime.Parse("2012-07-19 06:00:01"), Value = 15, Label = "a" });
                series1.Add(new ChartItem { Time = DateTime.Parse("2012-07-19 14:00:01"), Value = 61, Label = "b" });
                series1.Add(new ChartItem { Time = DateTime.Parse("2012-07-19 22:00:01"), Value = 80, Label = "c" });
                series1.Add(new ChartItem { Time = DateTime.Parse("2012-07-20 08:15:00"), Value = 85, Label = "d" });
                series1.Add(new ChartItem { Time = DateTime.Parse("2012-07-20 14:00:01"), Value = 75, Label = "e" });
                LineChartData.Add(series1);
                AddLineChartSeriesMapping("OEE", "Green");


                var series2 = new List<ChartItem>();
                series2.Add(new ChartItem { Time = DateTime.Parse("2012-07-19 06:00:01"), Value = 25, Label = "a" });
                series2.Add(new ChartItem { Time = DateTime.Parse("2012-07-19 14:00:01"), Value = 50, Label = "b" });
                series2.Add(new ChartItem { Time = DateTime.Parse("2012-07-19 22:00:01"), Value = 55, Label = "c" });
                series2.Add(new ChartItem { Time = DateTime.Parse("2012-07-20 08:15:00"), Value = 60, Label = "d" });
                series2.Add(new ChartItem { Time = DateTime.Parse("2012-07-20 14:00:01"), Value = 65, Label = "e" });
                LineChartData.Add(series2);
                AddLineChartSeriesMapping("Availability", "Yellow");


                //OnPropertyChanged("LineChartData");
                lineChart.ItemsSource = LineChartData;
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
        }


        /// <summary>
        /// Inits the line chart.
        /// </summary>
        public void InitLineChart()
        {
            //chart settings
            lineChart.DefaultView.ChartArea.EnableAnimations = true;
            lineChart.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "0";


            lineChart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "#LABEL";


            lineChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = -90;
            lineChart.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;
            lineChart.DefaultView.ChartArea.AxisY.StripLinesVisibility = System.Windows.Visibility.Collapsed;
            lineChart.DefaultView.ChartArea.AxisY.MajorGridLinesVisibility = System.Windows.Visibility.Visible;
            lineChart.DefaultView.ChartArea.SmartLabelsEnabled = true;


            //axis labels
            lineChart.DefaultView.ChartArea.AxisY.Title = "Value";
            lineChart.DefaultView.ChartArea.AxisX.Title = "Time";


            //clear any series mappings
            lineChart.SeriesMappings.Clear();
        }


        /// <summary>
        /// Adds the line chart series mapping.
        /// </summary>
        /// <param name="legendLabel">The legend label.</param>
        /// <param name="emptyPointBehavior">The empty point behavior.</param>
        /// <param name="color">The color.</param>
        private void AddLineChartSeriesMapping(string legendLabel, string color)
        {
            //the line series definition
            var seriesDefinition = new LineSeriesDefinition
            {
                ShowItemLabels = true,
                ShowPointMarks = true,
                EmptyPointBehavior = EmptyPointBehavior.Gap
            };


            //thickness of line
            seriesDefinition.Appearance.StrokeThickness = 3;


            //color of line
            seriesDefinition.Appearance.Stroke = new BrushConverter().ConvertFromString(color) as SolidColorBrush;


            //make the series mapping
            var seriesMapping = new SeriesMapping
            {
                LegendLabel = legendLabel,
                SeriesDefinition = seriesDefinition
            };


            seriesMapping.ItemMappings.Add(new ItemMapping("Time", DataPointMember.XValue));
            seriesMapping.ItemMappings.Add(new ItemMapping("Value", DataPointMember.YValue));


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


            seriesMapping.ItemMappings.Add(new ItemMapping(legendLabel, DataPointMember.Label));
            seriesMapping.CollectionIndex = lineChart.SeriesMappings.Count;


            //add it to the existing series mappings
            lineChart.SeriesMappings.Add(seriesMapping);
        }

[Petar Marchev]

Hello Geoffrey,

I realize that the example you have sent is a simplified version of the actual app you are working on, but I want to ask if you really need to have a DateTime axis. If you do not need to show the date in the labels, why do you need to have a DateTime axis? Is it an option to have just a categorical axis, where "a b c d e" would just be categories (use XCategory instead of XValue).
 
However, if this is not applicable I can suggest you change the template of the axis label and use a converter. This can be done with an implicit style. Note that doing this will affect both X and Y axes. So you need to handle both of these cases in the converter. I have attached a simple project to demonstrate the above.

Regards,
Petar Marchev
the Telerik team

[Geoffrey]

Hi,

Thanks, I'll have a look at the example. What the chart is supposed to show is shifts which run on certain dates. The y-axis would be the qty produced in the shift and the x-axis would be the date. So I need to plot the x-axis as a date, but display the shift name as the item label instead of the date.

Thanks.

[Rosko]

Hi Geoffrey,

As I have understood, you want to have a chart where the horizontal axis has dates on it, the vertical one has quantity represented in integer or floating point numbers and item labels which are coming from the underlying object. What you need to do is to set an item mapping pointing to label. You can check the attached project. I hope this is what you are after.

<telerik:ItemMapping DataPointMember="Label"     FieldName="Shift"/>

Greetings,

Rosko

the Telerik team