Grouping x-axis by Month

[Justin Wilson]

Hi,

I am trying to display purchase prices of a product over time.  I cannot show the specific date these purchase have been made so on the chart I am formating the date into a month.  Everything works prefect except when the chart is expanded the month is repeated.

This is what I am using to render the chart.

/// <summary>
        /// Creates a DataSeries object with the brush and label provided.
        /// </summary>
        /// <param name="brush">Color of the Series</param>
        /// <param name="legendLabel">Text for the legend label</param>
        /// <returns></returns>
        private DataSeries CreateDataSeries(SolidColorBrush brush, string legendLabel)
        {
            DataSeries dataSeries = new DataSeries();
            dataSeries.Definition = new BarSeriesDefinition();
            dataSeries.Definition.ShowItemLabels = false;
            dataSeries.Definition.ShowItemToolTips = true;
            dataSeries.Definition.Appearance.Fill = brush;
            dataSeries.LegendLabel = legendLabel;
            dataSeries.Definition.InteractivitySettings.HoverScope = InteractivityScope.Series;
            dataSeries.Definition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
            return dataSeries;
        }

        #region IChart Members


        public void Render()
        {
            PgReports.PricePointReportItems chartItems = this.DataSource as PgReports.PricePointReportItems;

            ChartHelper.ClearChart(this.Chart);

            this.Chart.DefaultView.ChartArea.EnableAnimations = true;
            this.Chart.DefaultView.ChartArea.NoDataString = "No Data";
            this.Chart.DefaultView.ChartArea.AxisX.IsDateTime = true;
            this.Chart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "MM/yyyy";
            this.Chart.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "C2";
            this.Chart.DefaultView.ChartArea.AxisY.Title = "Price Paid ($)";

            ChartHelper.SetChartLegend(this.Chart.DefaultView.ChartLegend);
            ChartHelper.SetChartTitle(this.Chart.DefaultView.ChartTitle, "Purchase Analysis");

            DataSeries primaryMemberDataSeries = this.CreateDataSeries(StyleHelper.Brushes.PrimaryMember(), "Primary Member");
            DataSeries healthSystemMembersDataSeries = this.CreateDataSeries(StyleHelper.Brushes.HealthSystemMembers(), "Health System Members");
            DataSeries otherMemberDataSeries = this.CreateDataSeries(StyleHelper.Brushes.OtherMembers(), "Other Members");
            DataSeries selectedMemberDataSeries = this.CreateDataSeries(StyleHelper.Brushes.SelectedMember(), "Selected Member");

            foreach (PgReports.PricePointReportItem pricePoint in chartItems)
            {
                DataPoint dataPoint = new DataPoint(pricePoint.PurchaseDate.Value);
                dataPoint.YValue = pricePoint.PricePerUOM.Value;
                dataPoint.Tooltip = string.Concat("Member ID: ", pricePoint.MemberKey, " ", pricePoint.PricePerUOM.Value.ToString("C2"));

                if (selectedMemberId.HasValue && selectedMemberId.Value == pricePoint.MemberKey.Value)
                    selectedMemberDataSeries.Add(dataPoint);
                else if (pricePoint.MemberKey.Value == ((IMember)(App.Current as App).UserProfile.PrimaryMember).MemberId.ToInt())
                    primaryMemberDataSeries.Add(dataPoint);
                else if ((from m in (App.Current as App).UserProfile.HeathSystemMembers.Cast<IMember>() where m.MemberId.ToInt() == pricePoint.MemberKey.Value select m).Count() == 1)
                    healthSystemMembersDataSeries.Add(dataPoint);
                else
                    otherMemberDataSeries.Add(dataPoint);
            }

            if (chartItems.Count > 0)
            {
                CustomGridLine customGridLine = new CustomGridLine();
                customGridLine.YIntercept = chartItems.Average(p => p.PricePerUOM.Value);
                customGridLine.Stroke = StyleHelper.Brushes.SelectedMember();
                customGridLine.StrokeThickness = 3;
                this.Chart.DefaultView.ChartArea.Annotations.Add(customGridLine);
            }

            this.EndWaiting();

            this.Chart.DefaultView.ChartArea.DataSeries.Add(primaryMemberDataSeries);
            this.Chart.DefaultView.ChartArea.DataSeries.Add(healthSystemMembersDataSeries);
            if (selectedMemberId.HasValue)
                this.Chart.DefaultView.ChartArea.DataSeries.Add(selectedMemberDataSeries);
            this.Chart.DefaultView.ChartArea.DataSeries.Add(otherMemberDataSeries);
        }

Attached is what I am getting in the chart.  I understand why I am getting these results in the chart.  But I can't figure out how to only show one month.

Thanks,
Justin

[Yavor]

Hello Justin Wilson,

The months, displayed in your X-axis, are repeated because you are adding your DateTime objects as X values. This causes the axis to go into strict mode in which the items are drawn from Min to Max using a calculated step. In your case the step can be 7 (or perhaps 10) days and thats why the months are repeated.

In your case I believe that more appropriate are categories. You can add months as categories by simply changing the way you are defining your data points like this:

DataPoint dataPoint = new DataPoint();
dataPoint.XCategory = pricePoint.PurchaseDate.Value;

When you are in categorical mode you'll no longer need your X-axis to be DateTime aware, so you no longer need this line:

this.Chart.DefaultView.ChartArea.AxisX.IsDateTime = true;

You can find more information on categorical charts in this topic in our help system.

Hope this helps!

Greetings,
Yavor Ivanov
the Telerik team

[Justin Wilson]

I tried this previously but the xCategory expects a string.  Also, when I change it to this.

DataPoint dataPoint = new DataPoint();
dataPoint.XCategory = pricePoint.PurchaseDate.Value.ToShortDateString();
dataPoint.YValue = pricePoint.PricePerUOM.Value;

The graph groups the xAxis by day.  If I then format the date string into months it groups all of the points into one month and I can't see each individual point.

[Yavor]

Hello Justin Wilson,

There are several approaches that you can try:
First you can set only the categories to only the month component of the DateTime (pricePoint.PurchaseDate.Value.Month). This will work if your data is only from one year.

Another approach could be to use data binding approach which allows you to use RadChart build-in grouping functionality. RadChart has several datetime group descriptors that allow you to group your data by intervals, such as month and year.

Regards,
Yavor Ivanov
the Telerik team