How can I use a date in the rows attribute?

[simasch]

I'm trying to use a timeline chart where I have to pass dates.

But do I pass dates to the rows attribute?

I tried:

rows='[["Jan", "2019-06-21T08:12:00.000Z"]]'

But get:

Error: Type mismatch. Value 2019-06-21T08:12:00.000Z does not match type date in column index 1

[rslawik]

This is not possible without custom deserialization to parse the attribute. Currently, the default JSON.parse is used (https://lit.dev/docs/components/properties/#conversion-type), so strings are not parsed as Dates.

My recommendation is to pass rows as a property from JS with the value that uses Date objects.

[simasch]

That looks like a huge limitation because I cannot use the web component without using JavaScript.

[rslawik]

Looking through the docs, I found https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation which documents a custom serialization for Dates. It is used when DataTable is created, but not when rows are added (like here).

We can use data attribute instead of cols and rows to get Dates deserialized:

<google-chart
    type="timeline"
    data='[[{"label": "Label", "type": "string"},{"label": "Start", "type": "date"},{"label": "End", "type": "date"}],["a", {"v": "Date(2023, 8, 5)"}, {"v": "Date(2023, 8, 30)"}]]'>
</google-chart>

---

That looks like a huge limitation because I cannot use the web component without using JavaScript.

Is the input for the chart static? I would expect most applications to generate the input dynamically, in which case JavaScript is already involved.

[simasch]

Yes, the input is static generated in a Java app. With data it works fine.

Thanks @rslawik