mattosaurus / ChartJSCore

Implementation of Chart.js for use with .NET Core.
GNU General Public License v3.0
116 stars 34 forks source link

How to deal with time scale on x-axis? #63

Closed Crossbow78 closed 3 years ago

Crossbow78 commented 3 years ago

I'm trying to plot time-based data, but struggling to get the x-axis to behave like I want. Part of the problem is that I'm not sure what format the date/time should be in, and whether any additional client-side processing is needed.

The chart definition below only ever seems to render the two first data points. What should I change?

            var chart = new Chart
            {
                Type = ChartType.Line,
                Data = new Data
                {
                    Datasets = new List<Dataset>
                    {
                        new LineScatterDataset
                        {
                            Label = "Sample Dataset",
                            Data = new List<LineScatterData>
                            {
                                new LineScatterData {
                                    X = "02-12-2020",
                                    Y = "23"
                                },
                                new LineScatterData {
                                    X = "08-12-2020",
                                    Y = "26"
                                },
                                new LineScatterData {
                                    X = "11-12-2020",
                                    Y = "14"
                                },
                                new LineScatterData {
                                    X = "21-12-2020",
                                    Y = "17"
                                },
                            }
                        }
                    }
                },
                Options = new Options
                {
                    Scales = new Scales
                    {
                        XAxes = new List<Scale>
                        {
                            new TimeScale
                            {
                                // Type = "time",  // Is this relevant?
                                Time = new Time
                                {
                                    Min = "01-12-2020",
                                    Max = "31-12-2020",
                                }
                            }
                        }
                    }
                },
            };
Crossbow78 commented 3 years ago

Ok, I should have spent a bit more time figuring this out myself.

The Type = "time" is absolutely essential to turn the axis it into a time scale (which kinda makes me wonder what the added value is of the TimeScale class). For me that kept causing javascript errors because I had placed the "chart.js" library before "moment.js"; the easy way out is to simply use the "chart.bundle.js" (which includes momentjs).

mattosaurus commented 3 years ago

Hi, glad you figured this out. I can't remember what the rationale was behind the TimeScale class but I'll have a look over the code when I get a chance and see if it still makes sense to have.