trendline does not support time scale?

[reinertisa]

Hi @Makanz I use chartjs library. I use trend line for linear scale. I do not see trendline for time scale and I got an this error. 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite.

scales: {
   x: {
         type: 'time'
         time: {
              unit: 'day'
         }
      }
  }

I use the same data for linear scale and time scale.

data = {
    "labels": [
        "2023-01-01T08:00:00.000Z",
        "2023-01-02T08:00:00.000Z",
        "2023-01-03T08:00:00.000Z",
        "2023-01-04T08:00:00.000Z",
    ],
    "datasets": [
        {
            "label": "Default",
            "data": [65,59,80,81],
            "trendlineLinear": {
                "colorMin": "red",
                "colorMax": "green",
                "lineStyle": "dotted",
                "width": 2,
                "projection": false
            }
        }
    ]
}

[Makanz]

I think it's the same problem as the issue #79 that I'm working on. Thanks for the information and example.

[Makanz]

I have not tested time scale before. Please provide me with a example on codepen.io

[reinertisa]

I am kind of busy at work but I hope this weekend I will create it. Thanks.

[Bliksempie]

Hi,

I have a similar issue where I do not get any error, yet, the trend line does not appear. Here is my data variable - the graph displays perfectly otherwise, but no trendline.

{
  "labels": [
    "2023-08-10 20:00:00",
    "2023-08-10 21:30:00",
    "2023-08-10 22:30:30",
    "2023-08-11 07:00:00",
    "2023-08-11 07:15:00",
    "2023-08-11 08:00:00"
  ],
  "datasets": [
    {
      "type": "line",
      "label": "Blood Sugar",
      "data": {
        "2023-08-10 21:30:00": "6.20",
        "2023-08-10 22:30:30": "6.60",
        "2023-08-11 07:00:00": "5.90",
        "2023-08-11 08:00:00": "4.60",
        "2023-08-11 11:17:00": "5.10",
        "2023-08-11 12:15:00": "4.90"
      },
      "backgroundColor": "#A9CCE3",
      "pointStyle": "circle",
      "pointRadius": 6,
      "pointHoverRadius": 12,
      "borderColor": "#5DADE2",
      "trendlineLinear": {
        "colorMin": "red",
        "colorMax": "green",
        "lineStyle": "dotted",
        "width": 3,
        "projection": true
      }
    }
  ]
}

I have edited the data (as it contains sensitive information) and I have removed other parts of the graph that has no bearing to what I want to achieve. The full graph looks something like this (made smaller to crop sensitive info).

Please can you advise? I think it has to be with the dates in the X-axis labels, if I understand the issue correctly.

[Makanz]

I tried with a array instead and then I worked. I can take a look at it later if it´s not working with array for you. Example "data": [ "6.20", "6.60", "5.90", "4.60", "5.10", "4.90" ],

[Bliksempie]

Hi, thanks for the response - with an array with numerical indexes, it works, but because the data is tied to time, it is now distorted. There is not an even time between events I measure, so with a numerical array, I am losing the time range.

If there is a way to perhaps use the numeric array for the trendline and the associative array for the actual graph, maybe that's a way forward? I am not sure how - but perhaps the trendline can be "scaled" after drawn with numerical data to be the total width of the X-axis after the fact? Not sure how feasible this is.

I will appreciate your feedback once you have any. Thanks!

[reinertisa]

@Makanz I created issue on https://codepen.io/Isa-Reinert/pen/poqgEEX

[Makanz]

@reinertisa I have made a fix and created a PR. Do you have time to try it out before I make a merge?

[reinertisa]

@Makanz I tested PR and works pretty well. Thanks.