Line Chart - Custom X-Axis Item Labels

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

    Posted 30 Jul 2012 Link to this post

    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.
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 31 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Geoffrey
    Geoffrey avatar
    23 posts
    Member since:
    Mar 2011

    Posted 31 Jul 2012 Link to this post

    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);
            }
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 31 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Geoffrey
    Geoffrey avatar
    23 posts
    Member since:
    Mar 2011

    Posted 01 Aug 2012 Link to this post

    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.

  7. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 03 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready