Time based charts being really awkward..

[CaiusJard]

I have some data like this:

2001-01-01T12:34   12
2001-01-01T12:37   24
2001-01-01T12:51   16
2001-01-01T12:56   8
2001-01-01T12:58   32

I want to plot the date on the X and the number on the Y

If make a struct like:

    public struct ChartPoint {
        public DateTime X { get; set; }
        public int Y { get; set; }
    }

And have no options, no special setup or anything, just a quick thing to make a dataset and a chart:

                        var d = new ChartData<ChartPoint>();
                        d.Datasets = new List<ChartDataset<ChartPoint>>() { MyMethodThatReturnsA_ListOfChartPoint_FromTheAboveData() };
                        <LineChart TItem="ChartPoint" Data="d" />

I just get a graph with two points on it, which are the first two points in the data:

No X labels or anything.

If I set an options of:

var opt = new Blazorise.Charts.LineChartOptions()
{
    Scales = new Scales()
    {
        XAxes = new List<Axis>()
        {
            new Axis{
                Type="time",

            },
        }
    }
};

I get a nice fat error in the console either no adapter can be found or an incomplete integration was provided

I tried switching to strings in yyyyMMddHHmmss, making the struct public string X, setting an OptionsObject= of:

                        object options = new
                        {
                            Scales = new
                            {
                                XAxes = new object[] {
                                    new {
                                        Type = "time",
                                    },
                                    Time = new {
                                        Parser = "yyyyMMddHHmmss"
                                }
                            }
                        };

Same error

Switched to using longs of the epoch, but I still can't get past that error when Type is "time" - it seems to explode no matter what

I saw in chartJs website they have slightly different looking JSON on the axis pages:

https://www.chartjs.org/docs/latest/axes/cartesian/time.html

It looks more like that JS should have this C# (no XAxes array, just an X obj):

object options = new
                        {
                            Scales = new
                            {
                                /*XAxes = new object[] {
                                    new {
                                        Type = "time",
                                    }
                                },*/
                                X = new
                                {
                                    Type = "time",
                                    Time = new
                                    {
                                        Parser = "yyyyMMddHHmmss"
                                    }
                                }
                            }
                        };

I couldnt get any form of this working either. It goes back to "two points on a graph" mode, which I think means "it's being ignored"

---

I can get my chart to work if I use long and set my type="linear" but then the labels are ugly on the X and setting Labels= seems not to work either. I'd be happy to convert all my times to longs/ticks/sesconds since the first time/whatever is needed if I could override the labels on the axis..

..but really I'd just like the Time series axes to work.. I noted that the Live Demo has working datetime graphing and I've borrowed large sectiosn of it, to no avail:

//in the markup

                       var d = new ChartData<ChartPoint>();

                        d.Datasets = new List<ChartDataset<ChartPoint>>() { GetLineChartDatasetXY() };


                        object horizontalLineChartOptions = new
                        {
                            Title = new
                            {
                                Display = true,
                                Text = "Line chart (horizontal scroll) sample"
                            },
                            Scales = new
                            {
                                YAxes = new object[]
                            {
                                new {
                                    ScaleLabel = new {
                                    Display = true, LabelString = "value" }
                                }
                            }
                            },
                            Tooltips = new
                            {
                                Mode = "nearest",
                                Intersect = false
                            },
                            Hover = new
                            {
                                Mode = "nearest",
                                Intersect = false
                            }
                        };
                        //d.Labels = Labels.Cast<object>().ToList();

                        <td><LineChart TItem="ChartPoint" Data="d" OptionsObject="@horizontalLineChartOptions" /></td>

@code{

    string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };

    LineChartDataset<ChartPoint> GetLineChartDatasetXY()
    {
        return new LineChartDataset<ChartPoint>
        {
            Label = "hello",
            Data = RandomizeDataXY(),
            //BackgroundColor = backgroundColors,
            //BorderColor = borderColors,
            ShowLine = true
        };
    }

    //method that makes 12 random points in time over the next 12ish hours
    List<ChartPoint> RandomizeDataXY()
    {
        var r = new Random();

        var ret = new List<ChartPoint>();
        for(int i=0;i<12;i++){
            ret.Add(new ChartPoint() { X = DateTime.Now.AddMinutes((i * 60) + r.Next(0, 60)), Y = r.Next(3, 50) });
        }
        return ret;
    }

    public struct ChartPoint {
        public object X { get; set; } //datetime
        public object Y { get; set; } //int
    }
}

It just draws two points at the start and end of the graph, no labels on the axis

If I uncomment the d.Labels = call to add the color names labels to the dataset, then I get 6 data points rendered with a name under each color, and theyre at even spaced intervals - it's not what I want, and it's not the right number of data points (dataset has 12)

And I really can't understand why the code for the live demo (code: https://github.com/stsrki/Blazorise/blob/master/Demos/Blazorise.Demo/Pages/Tests/LiveChartsPage.razor.cs#L353 - live demo: https://bootstrapdemo.blazorise.com/tests/livecharts ) mentions and uses these Labels - passes them into the AddLabelsDatasetsAndUpdate in HandleRedraw, but these color name labels never appear on any live demo chart, the demo charts just have the time values on them like I want.. What's going on?

[stsrki]

It's hard to tell without full code to test it. As far as I know, a number of labels should match the number of data. But it can be configured to work with different numbers.

It's best for you to look at chart.js documentation as they should have it all explained(hopefully) https://www.chartjs.org/docs/2.9.4/axes/cartesian/time.html

[CaiusJard]

So it's v2.9.4 of chartJS? I think it explains some things then, like scales{ x{ ... not working, cos that's in the 3.1.1 docs.. So how do I know (in future) what version of chartjs Blazorise uses?

[stsrki]

🤔 I'm still on 2.8.0, so maybe I should update.

So how do I know (in future) what version of chartjs Blazorise uses?

The latest supported is always mentioned in the documentation, but if not much of chartjs API has changed it should work for the latest version(s) also.

In any case, I think I should update my sources.

[CaiusJard]

Oh, I was just going off the version number you posted in the docs link - I totally forgot I'd pasted v2.8.0 into the _Host.cshtml

If you're updating to 3.x it looks like quite a bit changed - x/yAxes are gone for example - https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

[CaiusJard]

If you're accepting suggestions, I'd love to see some of the List<T> swapped out for IEnumerable/List/Collection/<T> if possible, give a bit more flexibility on what we put into them :)

[CaiusJard]

I fixed this, in the end.

Hadn't imported moment.js

Doh

Once _Host.cshtml looked like:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

And razor looked like:

                        var d = new ChartData<ChartPoint>() { Datasets = new List<ChartDataset<ChartPoint>>() { new LineChartDataset<ChartPoint> {
                                Data = new List<ChartPoint>()
                                {
                                    new ChartPoint(){X=DateTime.Parse("2001-01-01T12:34"),  Y=12},
                                    new ChartPoint(){X=DateTime.Parse("2001-01-01T12:37"),  Y=24},
                                    new ChartPoint(){X=DateTime.Parse("2001-01-01T12:51"),  Y=16},
                                    new ChartPoint(){X=DateTime.Parse("2001-01-01T12:56"),  Y=8 },
                                    new ChartPoint(){X=DateTime.Parse("2001-01-01T12:58"),  Y=32}
                                }
                        } }};

                        var o = new LineChartOptions
                        {
                            Scales = new Scales
                            {
                                XAxes = new List<Axis>()
                                {
                                    new Axis(){
                                        Type = "time"
                                    }
                                }
                            }
                        };

                        <LineChart TItem="ChartPoint" Data="d" Options="@o" />
@code{
    public struct ChartPoint {
        public DateTime X { get; set; }
        public int Y { get; set; }
    }
}

Chart looked like

And all was good. I only lost 6 hours to an import - <3 front end dev

[stsrki]

I also love when I lost n amount of hours/days on trivial things 🤣... noot

Chart.js v3 seems OK, and while there are some breaking changes it doesn't seem like it is too bad.