Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature] [DateTimeAxis] an option to draw month title between grid lines #1186

Closed
dodikk opened this issue Jan 24, 2018 · 5 comments

Comments

@dodikk
Copy link

commented Jan 24, 2018

As of now...

<package id="OxyPlot.Core" version="2.0.0-unstable0956" targetFramework="xamarinios10" />

The grid lines are rendered in the middle of the month title and the data points with year-month-01 X values are rendered on the grid lines.

As a plot library user, 
I need to draw grid lines around the month title
AND data point in the middle of the month title (as it is done now).

screen shot 2018-01-15 at 11 18 53 am

@dodikk

This comment has been minimized.

Copy link
Author

commented Jan 25, 2018

Looks like ExtraGridLines can help.

P.S. CategoryAxis or ColumnSeries might help emulating the desired behaviour
https://stackoverflow.com/questions/27155814/oxyplot-zero-line

@dodikk

This comment has been minimized.

Copy link
Author

commented Jan 25, 2018

In order to convert DateTime ==> Double for ExtraGridLines,
The following functions might be helpful.

class DateTimeAxis
{
        public static DateTime ToDateTime(double value);
        public static double ToDouble(DateTime value);
}

P.S. I am not sure yet.

@dodikk

This comment has been minimized.

Copy link
Author

commented Jan 25, 2018

So I've generated the DateTime ticks as 15th day starting with a previous month.

        private void GenerateShiftedDatetimeTicks()
        {
            // assume sorted dataset
            DateTime minDate = this.originalDataset.ValuesByMonth.First().yearAndMonth;
            DateTime maxDate = this.originalDataset.ValuesByMonth.Last().yearAndMonth;

            var result = new List<DateTime>();

            // TODO: fix inaccurate time calculations in case of issues
            // 1. Localization
            // 2. February handing
            //
            DateTime previousMonth = minDate.AddMonths(-1);
            var currentDate =
                new DateTime(
                    year: previousMonth.Year,
                    month: previousMonth.Month,
                    day: 15
                    // , kind: DateTimeKind.Utc
                );
            


            do
            {
                // TODO: maybe improve precision for irregular "february like" months
                // https://stackoverflow.com/questions/28409182/semi-monthly-date-calculation-in-c-sharp
                //
                // If you want, you can add half days of the current month by doing this:
                //
                // DateTime a = new DateTime();
                // a.AddDays(DateTime.DaysInMonth(a.Year, a.Month) / 2);

                result.Add(currentDate);
                currentDate = currentDate.AddMonths(1);
            }
            while (currentDate < maxDate);

            this.shiftedDatetimeTicks = result;
        }

Then I have converted them with DateTimeAxis.ToDouble() and put into the ExtraGridlines property.

        private void AddVerticalGridLinesToPlot(
            PlotModel result, 
            DateTimeAxis withDateTimeAxis)
        {
            DateTimeAxis dateTimeAxis = withDateTimeAxis;
            var shiftedDates = this.normalizedData.shiftedDatetimeTicks;

            var shiftedDatesInAxisSpace =
                shiftedDates.Select(
                    singleDateTime => DateTimeAxis.ToDouble(singleDateTime)
                );

            dateTimeAxis.ExtraGridlines = shiftedDatesInAxisSpace.ToArray();
            dateTimeAxis.ExtraGridlineThickness = 2;
            dateTimeAxis.ExtraGridlineStyle = LineStyle.Dash;
            dateTimeAxis.ExtraGridlineColor = OxyColor.FromRgb(r: 255, g: 0, b: 0);
        }

Works like a charm.
extragridlines

@dodikk dodikk closed this Jan 25, 2018

@dodikk

This comment has been minimized.

Copy link
Author

commented Jan 25, 2018

P.S. Some documentation and example improvements are clearly needed.

@dodikk

This comment has been minimized.

Copy link
Author

commented Jan 25, 2018

A documentation issue created oxyplot/documentation-examples#12

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.